scss - animation(1)
조지자 애니메이션!
scss에서 애니메이션은 다르게 쓰는 줄 알고 찾아봤는데 저렇게 커스터마이징이 가능하다. 하지만 난 기본 애니메이션도 아직은 서툴기에 기본에 확실할 것이다!
Nav 튀어나오기
키프레임 + 애니메이션으로 간단하게 효과를 줄 수 있다.
li에 애니메이션 주기
요렇게 li안에 animation을 정의하고
요렇게 해주면 된다잉
default로 scale(0)을 주고 fill-mode는 잘 모르겠다..
포켓볼
Parallax Scrolling
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow: hidden;
height: 100%;
}
body {
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
header {
min-height: 100vh;
background: 50% 50% /cover;
padding: 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
h1 {
margin-top: -100px;
z-index: 1;
}
&:before {
background: 50% 50% /cover;
}
&::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(./image.jpg);
background-size: cover;
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
* {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
}
}
Parallax Scrolling
출처 : https://www.youtube.com/watch?v=6CQ7DYni7Bg
https://www.youtube.com/watch?v=TUD9999TbS0&t=1109s
Author And Source
이 문제에 관하여(scss - animation(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dongha1992/scss-animation1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)