jQuery + CSS3でスクロールアニメーション実装してみる
動的な動きをつけたいの！
jQueryによってスクロールする距離によってCSSクラスを与えて、そのCSSクラスにアニメーション処理を施しちゃうような動きを期待している。
勿論、skrollr
のようにもっと便利なjQueryプラグインは色々あるのですが、今回はもっと簡単にjQueryとCSSだけでやっちゃおう的なものです。スクロール関係の効果は簡単なものに対して重いプラグインを使ってもリソースの無駄だったり、複雑なものは素早くスクロールしたりすると表示が壊れたりするため基本的には規模にあったものを実装するのが良い。
と、誰がえらい人がいつか言っていた気がします。
サンプルはこんな感じ
コード
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title>mypglog sample 01</title> <link rel="stylesheet" href="../reset.css" /> <link rel="stylesheet" href="../base.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <style> section { width: 960px; margin: 100px auto; min-height: 300px; } section h2 { font-size: 30px; font-weight: bolder; text-align: center; } .opa { opacity: 0; } .noneopa { opacity: 1; } .action { opacity: 1; -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -ms-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; } .rotate { animation: rotate 2s; animation-iteration-count: 1; -webkit-animation: rotateanime 2s; -webkit-animation-iteration-count: 1; } .move { animation: rotate 2s; animation-iteration-count: 1; -webkit-animation: moveanime 2s; -webkit-animation-iteration-count: 1; } .big { animation: rotate 2s; animation-iteration-count: 1; animation-delay: 2s; -webkit-animation: biganime 2s; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 2s; } strong { font-weight: bolder; } @keyframes moveanime { 0% { transform: translate(200px, 0); } 100% { transform: translate(0, 0); } } @-webkit-keyframes moveanime { 0% { transform: translate(200px, 0); } 100% { transform: translate(0, 0); } } @keyframes rotateanime { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(360deg); } } @-webkit-keyframes rotateanime { 0% { -webkit-transform: rotateX(0deg); } 100% { -webkit-transform: rotateX(360deg); } } @keyframes biganime { 0% { font-size: 30px; } 50% { font-size: 85px; } 100% { font-size: 30px; } } @-webkit-keyframes biganime { 0% { font-size: 30px; } 50% { font-size: 85px; } 100% { font-size: 30px; } } </style> <script type="text/javascript"> // <!-- $(document).ready(function () { var number = 200; //animation $(window).scroll(function () { if ($(this).scrollTop() > 250 - number) { $(".anime01").addClass("action"); } if ($(this).scrollTop() > 650 - number) { $(".anime02").addClass("action move"); } if ($(this).scrollTop() > 1050 - number) { $(".anime03").addClass("action rotate"); } if ($(this).scrollTop() > 1050 - number) { $(".anime04").addClass("action"); $('.anime04').delay(1000).queue(function () { $(this).addClass('big').dequeue(); }); } }); }); // --> </script> </head> <body> <header> <h1>jQuery + CSS3でスクロールアニメーション実装してみる</h1> <p>http://samplesample.com</p> </header> <section class="sec01"> <p>スクロールをしていくとフェードインや3D回転のアニメーションしていくようなアレです</p> </section> <section class="sec02"> <h2 class="opa anime01">こんにちわこんにちわこんにちわわ！</h2> </section> <section class="sec03"> <h2 class="opa anime02">実は今、こんにちわを三回言ったのではなく…</h2> </section> <section class="sec04"> <h2 class="opa anime03">最後は「<strong class="opa anime04">ちわわ</strong>」と言っていたんです＞＜</h2> </section> </body> </html>
解説
仕組みは物凄く簡単で
$(document).ready(function () { var number = 200; //animation $(window).scroll(function () { if ($(this).scrollTop() > 250 - number) { $(".anime01").addClass("action"); } if ($(this).scrollTop() > 650 - number) { $(".anime02").addClass("action move"); } if ($(this).scrollTop() > 1050 - number) { $(".anime03").addClass("action rotate"); } if ($(this).scrollTop() > 1050 - number) { $(".anime04").addClass("action"); $('.anime04').delay(1000).queue(function () { $(this).addClass('big').dequeue(); }); } }); });
こんな風にスクロールした距離に合わせてクラスを追加させていき、そのクラスにはアニメーション処理がついている…というだけ。var = numberはスクロールの長さを調節する時にいちいち全ての数字をいじるのが面倒なので仮に入れてあるような形になります。
