search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

[CSS][Animation] 動畫效果 - 畫面移到特定位置後才顯示動畫效果

此篇文章瀏覽量: 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

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

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');

若覺得文章有幫助,請多分享,讓其他同好也能吸收網站技能知識。



熱門推薦

本文由 carlos-studiocom 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦