JavaScriptを使ってスクロールイベントに応じて要素が横からスライドインするアニメーションを実装する方法について説明します。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="box hidden">Content 1</div>
        <div class="box hidden">Content 2</div>
        <div class="box hidden">Content 3</div>
        <div class="box hidden">Content 4</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    margin: 50px;
}

.box {
    width: 100%;
    max-width: 300px;
    margin: 50px auto;
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.5s ease;
}

.box.show {
    opacity: 1;
    transform: translateX(0);
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const boxes = document.querySelectorAll('.box');

    const checkBoxes = () => {
        const triggerBottom = window.innerHeight / 5 * 4;
        
        boxes.forEach(box => {
            const boxTop = box.getBoundingClientRect().top;

            if(boxTop < triggerBottom) {
                box.classList.add('show');
            } else {
                box.classList.remove('show');
            }
        });
    };

    window.addEventListener('scroll', checkBoxes);
    checkBoxes();
});

詳細な説明

HTML

基本的なHTML構造を定義します。.boxクラスを持つ要素がアニメーション対象の要素です。

CSS

.boxクラスに対して初期状態を設定します。opacity: 0とtransform: translateX(-100%)で、要素が見えない状態から左に隠れるようにします。
.showクラスが追加されると、opacity: 1とtransform: translateX(0)により、要素が横からスライドインして見えるようになります。