Grok先生のHTML/CSS講座

アニメーションを追加

JavaScriptで画像に動きを付けましょう。このダンス写真をクリックすると揺れます。

ソースコードを表示/非表示

<img id="dance-img" src="image1.jpg" alt="ダンス">
<script>
    document.getElementById('dance-img').addEventListener('click', function() {
        this.classList.toggle('shake');
    });
</script>
<style>
    .shake {
        animation: shake 0.5s;
    }
    @keyframes shake {
        0% { transform: translateX(0); }
        25% { transform: translateX(-10px); }
        50% { transform: translateX(10px); }
        75% { transform: translateX(-10px); }
        100% { transform: translateX(0); }
    }
</style>

クリックで`shake`クラスを追加し、アニメーションを適用。

動的コンテンツ

この製品写真をクリックすると説明が現れます。

ソースコードを表示/非表示

<img id="zoom-img" src="image2.jpg" alt="製品">
<div id="description" style="display: none;">軽量でスタイリッシュ！</div>
<script>
    document.getElementById('zoom-img').addEventListener('click', function() {
        let desc = document.getElementById('description');
        desc.style.display = desc.style.display === 'none' ? 'block' : 'none';
    });
</script>

クリックで説明を表示/非表示に。

実践してみよう

`SPARKLE_DYNAMIC.html`に動きを追加。ホバーで陽太と悠斗の笑顔が動きます。

ソースコードを表示/非表示

<img id="hover-img" src="image3.jpg" alt="笑顔">
<style>
    #hover-img:hover {
        transform: rotate(5deg);
        transition: transform 0.3s;
    }
</style>

CSSでホバー効果を追加。JSでも可能です。

サンプルページを見る