animated-css-gallery/index.html at master · Codeflare-Limited/animated-css-gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/main.css">
    <title>Animated CSS Image</title>
 </head>
 <body>
    <main class="gallery">
        <div class = "item" data-pos = "0">
            <img src="https://plus.unsplash.com/premium_photo-1770416629652-962a91120bf5?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Fluffy Cat" />
        </div>
        <div class = "item" data-pos = "1">
            <img src="https://images.unsplash.com/photo-1770106678115-ec9aa241cdf6?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Fluffy Cat" />
        </div>
        <div class = "item" data-pos = "2">
            <img src="https://images.unsplash.com/photo-1761839258075-585182da7521?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Fluffy Cat" />
        </div>
        <div class = "item" data-pos = "3">
            <img src="https://images.unsplash.com/photo-1770045232338-5eaac4a3b05b?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Fluffy Cat" />
        </div>
        <div class = "item" data-pos = "4">
            <img src="https://images.unsplash.com/photo-1761839257513-a921710a4291?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Fluffy Cat" />
        </div>
    </main>

    <script>
        function init(e) {
            if(!e.target.closest('.item')) return;
            let hero = document.querySelector('div[data-pos="0"]');
            let target = e.target.parentElement;
            [target.dataset.pos, hero.dataset.pos] = [hero.dataset.pos, target.dataset.pos]
        }
        window.addEventListener('click', init, false);
        </script>

 </body>
 </html>