ホームぺージ関連HTML初心者講座HTML中級者講座カメラ・写真関連失敗と経験その他

アフィリエイト広告を利用しております。
参考サイトの記載がある場合はそちらの方がより詳しく記載説明がされているのでぜひそちらもご覧ください。
そのままコピペしても反映されないものもあります。サイトごとに変えないといけない箇所がありますので修正してください。

CSS HTML JavaScript

画面に波紋が広がる様なアニメーション処理の実装

画面に波紋が広がるようなアニメーション処理を実装します。
説明、コードの下にデモで波紋が広がるのを確認できます。

JavaScriptコード
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
40
41
42
43
44
45
46
document.addEventListener('DOMContentLoaded', () => {
     function createRipple(x, y) {
        for (let i = 0; i < 3; i++) {
            const delay = i * 600; // Ensure each ripple starts with enough delay to avoid overlapping animations
            setTimeout(() => {
                const ripple = document.createElement('div');
                ripple.classList.add('ripple');
                ripple.style.left = `${x}px`;
                ripple.style.top = `${y}px`;
                ripple.style.width = '0';
                ripple.style.height = '0';
                ripple.style.marginLeft = `-0px`;
                ripple.style.marginTop = `-0px`;
 
                const container = document.querySelector('.ripple-container');
                container.appendChild(ripple);
 
                // Set size after appending to trigger animation
                const size = Math.random() * 10 + 20; // Random size between 50 and 100px
                ripple.style.width = `${size}px`;
                ripple.style.height = `${size}px`;
                ripple.style.marginLeft = `-${size / 2}px`;
                ripple.style.marginTop = `-${size / 2}px`;
 
                // Remove element after animation ends
                ripple.addEventListener('animationend', () => {
                    ripple.remove();
                });
            }, delay); // Delay each ripple by 600ms
        }
    }
 
    function generateRandomRipples() {
        const container = document.querySelector('.ripple-container');
        const width = container.offsetWidth;
        const height = container.offsetHeight;
 
        setInterval(() => {
            const x = Math.random() * width;
            const y = Math.random() * height;
            createRipple(x, y);
        }, 1000); // Create a new ripple every 1 second
    }
 
    generateRandomRipples();
});
HTMLコード
1
<div class="ripple-container"></div>
CSSコード
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
.ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: ripple-animation 2s linear forwards;
    box-shadow: 0 0 0 0.1px #000; /* 初期のボーダーをbox-shadowで細く設定 */
}
 
@keyframes ripple-animation {
    0% {
        transform: scale(0);
        opacity: 1;
        box-shadow: 0 0 0 0.1px #000; /* 初期の線の太さを2pxに */
    }
    100% {
        transform: scale(10);
        opacity: 0;
        box-shadow: 0 0 0 0.05px #000; /* 広がるとともに線を細く設定 */
    }
}
.ripple-container {
    position: relative;
    width: 100%;
    height: 100vh;
}
【Amazon】ちゃんと知っておきたい人のHTML/CSS完全入門: HTML習得の最短講座！1日３０分で楽しく学ぼう！ Kindle版

おすすめ記事

1
クラシックエディタ用のプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤 ...
2
クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない？ この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
3
Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた
アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

-CSS, HTML, JavaScript
-

S