[REQ_ERR: 405] [KTrafficClient] Something is wrong. Enable debug mode to see the reason. スクロールに応じて要素をフェードインやスライドインさせるアニメーション 「Animate.css」+「ScrollTrigger」 | マイニチ!

キシコウイチロウのポートフォリオ&制作覚書

キシコウイチロウのポートフォリオ&制作覚書

  1. TOP ＞
  2. 制作覚書 ＞
  3. デザインコーディング ＞
  4. スクロールに応じて要素をフェードインやスライドインさせるアニメーション

スクロールに応じて要素をフェードインやスライドインさせるアニメーション 「Animate.css」+「ScrollTrigger」

スクロールしていくと動的に要素が表示されるアニメーションを実装。
アニメーション用CSS「Animate.css」と、JAVAscript「ScrollTrigger」を組み合わせて設定。

DEMO

① アニメーション用CSS「Animate.css」

クラス名を指定するだけで、簡単にアニメーションが実装できる便利なスタイルシート。それ単体で出来るのは「ページを読み込んだ瞬間にアニメーションする」ところまで。
スクロールに応じてアニメーションをさせるためには、JavaScript上で一工夫が必要。
ダウンロードするかajaxで実装。

animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

② JAVAscript「ScrollTrigger」

ページのスクロールに連動して様々なエフェクトで要素が表示されていくJS。
ダウンロードして「ScrollTrigger.min.js」を実装。

<script type="text/javascript" src="js/ScrollTrigger.min.js"></script>
GitHub

③ 実装

HTML

<ul>
  <li>Scroll !!</li>
</ul>
<div class="scroll_box animated" data-scroll="once toggle(.bounceInDown, .invisible) addHeight">bounceInDown</div>
<div class="scroll_box animated" data-scroll="once toggle(.bounceInLeft, .invisible) addHeight">bounceInLeft</div>
<div class="scroll_box animated" data-scroll="once toggle(.bounceInRight, .invisible) addHeight">bounceInRight</div>
<div class="scroll_box animated" data-scroll="once toggle(.bounceInUp, .invisible) addHeight">bounceInUp</div>
<div class="scroll_box animated" data-scroll="once toggle(.flash, .invisible) addHeight">flash</div>
<div class="scroll_box animated" data-scroll="once toggle(.lightSpeedIn, .invisible) addHeight">lightSpeedIn</div>
<div class="scroll_box animated" data-scroll="once toggle(.rotateInDownRight, .invisible) addHeight">rotateInDownRight</div>
<div class="scroll_box animated" data-scroll="once toggle(.rotateIn, .invisible) addHeight">rotateIn</div>
<div class="scroll_box animated" data-scroll="once toggle(.jackInTheBox, .invisible) addHeight">jackInTheBox</div>
<div class="scroll_box animated" data-scroll="once toggle(.rollIn, .invisible) addHeight">rollIn</div>

CSS

ul {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #fabe00;
  text-align: center;
}
li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
}
.scroll_box {
  width: 600px;
  height: 300px;
  line-height: 300px;
  margin: 500px auto;
  text-align: center;
  color: #fff;
  font-size: 36px;
  font-family: 'Open Sans', sans-serif;
  background-color: #fabe00;
}

.invisible {
    transition: opacity 0.5s ease;
    opacity: 0.0;
}
 
.visible {
    transition: opacity 0.5s ease;
    opacity: 1.0;
}

JavaScript

<script>
document.addEventListener('DOMContentLoaded', function(){
    var trigger = new ScrollTrigger({
      toggle: {
        visible: 'visibleClass',
        hidden: 'hiddenClass'
      },
      offset: {
        x: 0,
        y: 20
      },
      addHeight: true,
      once: true
    }, document.body, window);
});
</script>

PRICE 主な受注案件

グラフィックデザイン 会社案内、カラログ、広告、チラシ、CDジャケット ¥50,000~
WEB/UIデザイン コーポレート、ポータル、ランディングページ、バナー各種 ¥50,000~
コーディング/システム構築 動的なサイトやレスポンシブサイト、WordPressへの移行 ¥50,000~
起業のお手伝い一式 ロゴ、名刺、会社案内、その他販促物、ホームページ ¥98,000~