【HTML,CSS,jQuery】回転するロゴアニメーション

2023年1月13日

今回はスクロールすると、ロゴが回転するアニメーションを作成しました。ページの途中のアクセントに使ってもいいかもしれません。

【HTML,CSS,jQuery】回転するロゴアニメーション

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【HTML,CSS,jQuery】回転するロゴアニメーション</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;800&display=swap" rel="stylesheet">
</head>
<body>
    <div class="scroll">
        <h1>Thanks for coming.</h1>
        <div class="mouse">
            <i class="fas fa-mouse"></i>
            <p>scroll</p>
            <i class="fas fa-chevron-down arrow"></i>
        </div>
    </div>
    <div class="rolling">
        <div class="all">
            <div class="roll_logo">
                <img src="logo.svg" alt="">
            </div>
            <div class="roll_logo">
                <img src="logo.svg" alt="">
            </div>
            <div class="roll_logo">
                <img src="logo.svg" alt="">
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="my.js"></script>
</body>
</html>

CSS↓

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'montserrat',sans-serif;
}
.scroll{
    height: 100vh;
}
h1{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-40%);
    font-size: 4em;
    letter-spacing: 2px;
}
.mouse{
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%,-15%);
    margin-top: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
i{
    font-size: 2.5em;
}
.scroll p{
    color: #333333;
    font-size: 1em;
    margin-top: 10px;
    margin-bottom: 2px;
    letter-spacing: 2px;
}
.arrow{
    font-size: .9em;
}
.rolling{
    margin: 300px auto 400px auto;
}
.all{
    display: flex;
    justify-content: center;
}
.roll_logo:nth-child(1){
    transition: 2s ease-out;
    transition-delay: 0s;
    transform: translateX(-150px) rotateZ(-340deg);
}
.roll_logo:nth-child(2){
    transition: 1.5s ease-out;
    transition-delay: .7s;
    transform: translateX(-100px) rotateZ(-240deg);
}
.roll_logo:nth-child(3){
    transition: 1.5s ease-out;
    transition-delay: 1.4s;
    transform: translateX(-50px) rotateZ(-160deg);
}
.roll_logo.active{
    transform: translateX(0) rotateZ(0);
}
.roll_logo img{
    width: 150px;
    height: 150px;
    display: block;
}

JS↓

$(function(){
    $(window).scroll(function (){
        $('.roll_logo').each(function(){
            var position = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > position - windowHeight + 100){
              $('.roll_logo').addClass('active');
            }
        });
    });
});

解説

仕組み

大まかに仕組みを説明すると、スクロール前のまだロゴが見えてない状態の時は、三つのロゴをそれぞれ離れた位置に配置しています。スクロールしてロゴが見えると、回転しながら画面の中央に横一列で並ぶと言うふうな仕組みになっています。

基本配置

.rolling{
    margin: 300px auto 400px auto;
}
.all{
    display: flex;
    justify-content: center;
}

一番外のボックスはmarginのautoを使って画面真ん中（水平方向で）に配置しています。三つのロゴはdisplay:flex;とjustyfy-content:centerで横並びで中央揃えに配置しています。align-itemsはロゴの<img>の高さを150pxと指定しているので、ここでは省いています。

jqueryを使ったスクロールイベントの設定

$(function(){
    $(window).scroll(function (){
        $('.roll_logo').each(function(){
            var position = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > position - windowHeight + 100){
              $('.roll_logo').addClass('active');
            }
        });
    });
});

スクロールしてロゴが表示された時にアニメーションを開始する仕組みを解説します。これはJavascript(jquery)で定番の「スクロールして要素が表示された時クラスを追加する」機能を使っています。

.each()

.each()で、「.roll_logo」がついた要素一つずつに順番に処理を行うことを指定しています。今回の場合は三つともタイミングが一緒なので、特に効果はないですが、fadeinなどのアニメーションをページ全体で複数使いたいときなんかに便利です。

.offset().top

.offset().topで、ページの最上部から「.roll_logo」がついた要素までの距離を取得して、変数positionに代入しています。

.scrollTop()

.scrollTop()で、スクロールした量を取得して、変数scrollに代入します。

.height()

.height()でウィンドウの高さを取得して、変数windowHeightに代入します。

activeクラス

スクロール量(scroll)が、「ページ最上部から要素までの距離(position)」-「ウィンドウの高さ(windowHeight)」を超えた時、つまりスクロール量が要素の位置を過ぎた瞬間、「.froll_logo」が付いた要素にactiveクラスが付きます。

しかし、これだと要素が画面内に入ってすぐにアニメーションが開始されてしまうので、少し余裕を持たせるために、200pxを追加して設定することが多いです。

スクロール前の設定

.roll_logo:nth-child(1){
    transition: 2s ease-out;
    transition-delay: 0s;
    transform: translateX(-150px) rotateZ(-340deg);
}
.roll_logo:nth-child(2){
    transition: 1.5s ease-out;
    transition-delay: .7s;
    transform: translateX(-100px) rotateZ(-240deg);
}
.roll_logo:nth-child(3){
    transition: 1.5s ease-out;
    transition-delay: 1.4s;
    transform: translateX(-50px) rotateZ(-160deg);
}

上の説明で述べたように、画面をスクロールしてロゴの要素が見えたらアニメーションするよう設定しているので、まずはスクロール前のCSSの設定を解説します。

transformプロパティを使って、ロゴの水平方向の位置と回転角度を指定します。一つ目のロゴにはtransform:tanslateX(-150px) rotateZ(-340deg);と設定していますが、これは中央揃えの位置から、X軸（水平方向）に-150px（左に150px）ずらし、Z軸（ロゴの中心から画面手前）に反時計回りに340度回転させた状態を意味しています。2番目と3番目のロゴも同様にそれぞれ設定しています。

（rotateZ()はrotate()だけでも機能します。）

また、動き出したときのアニメーションをtransitionプロパティで設定しています。transition:2s ease-out;とは2秒かけてease-outのリズムで動くと言うことです。これにtransition-delay:つまり動き出すまでの「ラグ」を作ることで、三つのロゴが段階的に動き出すようになります。（ここは好みで設定してみてください。）

スクロール後の設定

.roll_logo.active{
    transform: translateX(0) rotateZ(0);
}

スクロールしてロゴが画面に表示された時、「.roll_logo」に「active」のクラスが追加されます。それぞれで設定していたtransform:translateX() rotateZ();の値を「0」にして元の中央揃えの位置に移動させます。こうすることでアニメーションが作り出されます。

まとめ

今回はtransformを使ったアニメーションを紹介しました。Javascriptを使いますが、理解できなくてもコピペでできるので、是非挑戦してみてください。スクロースしていくと要素がフェードインして表示されるサイトが多く見られるので、この仕組みを知っておくだけでイマドキのサイトが簡単に作れそうですね。webデザインの参考になれたら幸いです。