jqueryで要素が画面内に現れたらCSS3アニメーションが発火

この前作った実行タイミングをスクロール料の数値を固定された方法だと、画面の高さの問題でマルチデバイスに対応てきてなさそうだした。
jqueryでスクロール量を取得するパララックスサイトコーディング

微調整するのもめんどくさかったりと保守性の問題点もあったので、それを解決するために指定の要素が画面内に現れたら実行されるjqueryのサンプルを作ってみました。

さらにCSS3のアニメーションでパララックスが楽に作れる

jqueryで動きをつけるより、簡単でスムーズな動きを作ることができるのが、CSS3のanimationプロパティです。CSSの方が得意だし、jqueryをガチャガチャやるよりこっちの方が断然簡単だった。

animationプロパティを知らなかったわけじゃないけど、CSSでパララックス用のアニメーションを作るという概念がなかったから、人に言われて初めて気がつきました。

あらかじめ作っておいたanimationのクラス等を付与するなり、入れ替えるなりするだけ。

スクロールの実行タイミングよCSS3アニメーションを細かく説明

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(function () {

            //スクロール実行中の処理
            $(window).scroll(function () {

                //#action要素のスクロール量を代入
                var obj_t_pos = $("#action").offset().top;

                //画面のスクロール量と#actionのスクロール量を計算して実行タイミングを代入
                var scr_count = $(document).scrollTop() + (window.innerHeight / 1.2);

                //#action要素が現れたら実行
                if (scr_count > obj_t_pos) {

                    //classの書き換え anime1が動き出す
                    $("#fixed").removeClass("anime2").addClass("anime1");
                } else {

                    //classの書き換え anime2が動き出す
                    $("#fixed").removeClass("anime1").addClass("anime2");
                }
            });
        });
    </script>
    <style>
        /* 簡易リセット */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            margin: auto;
            /* 仮の高さ */
            position: relative;
            height: 3000px;
            width: 768px;
        }

        #fixed {
            margin: -400px 0 0 -200px;
            display: inline-block;
            position: fixed;
            top: 0;
            left: 50%;
            width: 400px;
            height: 400px;
            vertical-align: middle;
            color: #FFF;
            background: #000;
            text-align: center;
        }

        #fixed:before {
            display: inline-block;
            height: 100%;
            width: 0;
            content: "";
            vertical-align: middle;
        }

        #fixed span {
            display: inline-block;
            vertical-align: middle;
        }

        #action {
            position: absolute;
            bottom: 25%;
        }

        /*アニメーション設定*/
        #fixed.anime1 {
            animation: anime1 1.5s both;
        }

        #fixed.anime2 {
            animation: anime2 1.5s both;
        }

        /*始まりのアニメーション設定*/
        @keyframes anime1 {
            0% {
                top: 0;
            }

            100% {
                margin-top: -200px;
                top: 50%;
            }
        }

        /*戻りのアニメーション設定*/
        @keyframes anime2 {
            0% {
                margin-top: -200px;
                top: 50%;
            }

            100% {
                top: 0;
            }
        }
    </style>
</head>

<body>
    <div id="fixed"> <span id="scroll">TEST</span> </div>
    <p id="action">見えたら実行</p>
</body>

</html>

要素が画面下の20%位置に来たら、発火するjqueryです。派手なLPなど動きのあるページを作りたい時に、このjqueryとCSS3のアニメーションがなり便利に使えそうです。

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら