How to make animation on scroll ?
Start with element html
You just simple put html will is:
<div class="icon-scroll"></div>
and if you use pug
to code it will is:.icon-scroll
Start with scss
*There're we will create square color orange has width 80px:
.icon-scroll{
background: #ec8806;
position: relative;
z-index: 10;;
cursor: pointer;
width: 90px;
left: 0;
right: 0;
top: 20px;
padding-bottom: 45px;
margin: auto;
color: #fff;
text-align: center;
transition: 2s;
}
*Next, we will add two
Pseudo-Elements
is before
and after
like this:before
: &:before{
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 1px;
height: 18px;
background-color: #FFF;
transform-origin: left bottom;
transform: scaleY(0) rotate(70deg);
animation: arrowA 1.8s ease-in-out 0s infinite;
}
after
: &:after{
content: "";
position: absolute;
width: 1px;
height: 40px;
margin: auto;
bottom: 0;
left: 0;
right: 0;
animation: arrowB 1.8s ease-in-out 0s infinite;
background-color: #FFF;
}
Start with keyframes
Keyframes
arrowA
for before
:@keyframes arrowA {
0% {
transform:rotate(35deg) scaleY(0) translate(0px, 0px);
height: 15px;
}
40% {
transform:rotate(35deg) scaleY(0) translate(0px, 0px);
height: 15px;
}
55% {
transform:rotate(35deg) scaleY(1) translate(0px, 0px);
height: 15px;
}
80% {
transform:rotate(35deg) scaleY(1) translate(0px, 0px);
height: 15px;
}
100% {
transform:rotate(35deg) scaleY(1) translate(0px, -15px);
height: 0px;
}
}
Keyframes
arrowB
for after
:@keyframes arrowB {
0% {
transform:scaleY(0);
transform-origin:50% 0;
}
20% {
transform:scaleY(0);
transform-origin:50% 0;
}
45% {
transform:scaleY(1);
transform-origin:50% 0;
}
55% {
transform:scaleY(1);
transform-origin:50% 100%;
}
85% {
transform:scaleY(0);
transform-origin:50% 100%;
}
100% {
transform:scaleY(0);
transform-origin:50% 100%;
}
}
Done!
Ahhhhh... It's so simple...
Reference
이 문제에 관하여(How to make animation on scroll ?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zurivan/items/77f092fed32f19ab0724텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)