Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
1,602
Scroll
? Hey!
Scroll
I’m here ?
Scroll
Notice me! ?
Scroll
Dancing ?
Scroll
?Party ?
Scroll
Dizzy! ?
Scroll
? Enough ?
Scroll
看原始碼：html css js
// html
Scroll
? Hey!
Scroll
I'm here ?
Scroll
Notice me! ?
Scroll
Dancing ?
Scroll
?Party ?
Scroll
Dizzy! ?
Scroll
? Enough ?
Scroll
// css
@keyframes dance_when_animate {
0%, 10% {
transform: none;
}
25% {
transform: rotateZ(-20deg);
}
50% {
transform: rotateZ(20deg);
}
75% {
transform: rotateZ(-10deg);
}
90%, 100% {
transform: none;
}
}
.demo_animated {
animation: dance_when_animate 1s cubic-bezier(0, .8, .5, 1.5) infinite;
}
.demo_scroll_animation {
width: 100%;
}
.spacer {
background: rgba(255,255,255,.1);
border-radius: 1rem;
color: black;
font-size: 4rem;
height: 90vh;
line-height: 80vh;
margin: 4rem 0;
width: 100%;
border:1px solid black;
}
button.btn_animation {
background: #3991AE;
border: 1px solid #fff;
border-radius: 1rem;
color: #fff;
font-size: 2rem;
padding: 1rem;
}
// js
var windowHeight = window.innerHeight,
gridTop = windowHeight * 0.2,
gridBottom = windowHeight * 0.8;
$(window).on('scroll', function() {
$('button.btn_animation').each(function() {
var thisTop = jQuery(this).offset().top - $(window).scrollTop();
if (thisTop >= gridTop && (thisTop + $(this).height()) <= gridBottom) {
$(this).addClass('demo_animated');
} else {
$(this).removeClass('demo_animated');
}
});
});
$(window).trigger('scroll');
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Facebook
Twitter
寫了
5860316篇文章，獲得
23313次喜歡