動くかっこいいウェブデザインについてのメモ2 本文の部分に使う動き| SAKURAI design office サクライデザインオフィス

動くかっこいいウェブデザインについてのメモ2 本文の部分に使う動き

2024年12月10日

前回はファーストビューからの導入部分で使えそうな動きを掲載しましたが、今回は、本文部分に使えそうな動きをメモしていきます。

                               
 
<style>
/* 初期状態の設定 */
.anim-box {
    opacity: 0;
    transform: translateY(50px); /* 初期位置 */
    transition: all 2s ease-out;
}
                        
.anim-box.is-animated {
    opacity: 1;
    transform: translateY(0); /* 元の位置に移動 */
}
                        
/* slidein_left 用アニメーション */
.anim-box.slidein_left {
    transform: translateX(50px); /* 初期状態を右に設定 */
}
                        
.anim-box.slidein_left.is-animated {
    transform: translateX(0); /* 元の位置にスライドイン */
}
                        
/* slidein_up 用アニメーション */
.anim-box.slidein_up {
    transform: translateY(50px); /* 初期状態を下に設定 */
}
                        
.anim-box.slidein_up.is-animated {
    transform: translateY(0); /* 元の位置にスライドイン */
}
                        
/* ホバー時の画像拡大効果 */
.anim-box img {
    transition: transform 0.3s ease; /* なめらかな拡大アニメーション */
}
                        
.anim-box img:hover {
    transform: scale(1.1); /* 画像を110%に拡大 */
}
.title {
    font-size: xx-large;
}
                            </style>

                               

     <script>
        document.addEventListener("DOMContentLoaded", () => {
            // Intersection Observer を設定
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        // ビューポートに入った場合にクラスを追加
                        entry.target.classList.add("is-animated");
                    } else {
                        // ビューポート外に出た場合にクラスを削除
                        entry.target.classList.remove("is-animated");
                    }
                });
            });

            // アニメーション対象の要素を監視
            const animElements = document.querySelectorAll(".anim-box");
            animElements.forEach(el => observer.observe(el));
        });
    </script>

                               

                <div class="anim-box slidein_left">
                    <img src="/images/top_slider01.jpg" alt="イメージ写真">
                </div>
                <div class="anim-box slidein_up">
                    <p class="title">タイトルタイトルタイトル</p>
                    <p class="letter_body">ダミーダミーダミーダミー...</p>
                    <div class="text_center">
                        <p class="animation-btn">
                            <a href="#" class="animation-btn-inner">ダミー<i class="bi bi-arrow-right"></i></a>
                        </p>
                    </div>
                </div>

                <br><br><br><br>

                <div class="anim-box slidein_left">
                    <img src="/images/top_slider02.jpg" alt="イメージ写真">
                </div>
                <div class="anim-box slidein_up">
                    <p class="title">タイトルタイトルタイトル</p>
                    <p class="letter_body">ダミーダミーダミーダミー...</p>
                    <div class="text_center">
                        <p class="animation-btn">
                            <a href="#" class="animation-btn-inner">ダミー<i class="bi bi-arrow-right"></i></a>
                        </p>
                    </div>
                </div>

                <br><br><br><br>

                <div class="anim-box slidein_left">
                    <img src="/images/top_slider03.jpg" alt="イメージ写真">
                </div>
                <div class="anim-box slidein_up">
                    <p class="title">タイトルタイトルタイトル</p>
                    <p class="letter_body">ダミーダミーダミーダミー...</p>
                    <div class="text_center">
                        <p class="animation-btn">
                            <a href="#" class="animation-btn-inner">ダミー<i class="bi bi-arrow-right"></i></a>
                        </p>
                    </div>
                </div>

縦からゆっくりと現れるアニメーション

イベント感がある動きですね。

デモ

                               
 
<style>

.list_item_lines3-1 li {
    opacity: 0; /* 初期状態は非表示 */
    transform: translateX(50px); /* 初期位置を右にずらす */
    transition: all 1s ease-out; /* アニメーションの設定 */
}

.list_item_lines3-1 li.is-visible {
    opacity: 1; /* 表示 */
    transform: translateX(0); /* 元の位置に移動 */
}

</style>

                               

   <script>

        document.addEventListener("DOMContentLoaded", () => {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        // 順番に表示させるためにディレイを設定
                        setTimeout(() => {
                            entry.target.classList.add("is-visible");
                        }, index * 300); // 各要素の表示間隔を0.3秒ずつ増やす
                    } else {
                        // ビューポート外に出た場合にクラスを削除
                        entry.target.classList.remove("is-visible");
                    }
                });
            });

            // アニメーション対象の要素を監視
            const listItems = document.querySelectorAll(".list_item_lines3-1 li");
            listItems.forEach(item => observer.observe(item));


        });

    </script>

                               

<ul>
    <ul class="list_item_lines3-1 flex">
        <li><a href="/contents/service.html#area-1"><img src="/images/top_service01.gif" alt="ホームページの作成のイメージイラスト"><span>ホームページの作成</span></a></li>
        <li><a href="/contents/service.html#area-2"><img src="/images/top_service02.gif" alt="ネット販売用商品ページの作成のイメージイラスト"><span>ネット販売用商品ページの作成</span></a></li>
        <li><a href="/contents/service.html#area-3"><img src="/images/top_service03.gif" alt="既存サイトの改善のイメージイラスト"><span>既存サイトの改善</span></a></li>
    </ul>
</ul>

動くかっこいいウェブデザインについてのメモ2 本文の部分に使う動き

目次

縦と横から現れるアニメーション

縦からゆっくりと現れるアニメーション