ふわふわと漂う泡のエフェクトのDEMO

指定のセクションが画面内に表示されると、下から泡が湧き出るエフェクトを実装したDEMOページです。次のセクションで泡を実装していますので、スクロールしてみてください。

要素が画面に表示されたかどうかの判定は、JavaScriptのIntersection observer APIを使用しています。要素が画面に入ると泡の生成を開始し、画面外に出るとストップする仕組みになっています。

いかがでしたでしょうか。

泡の見た目や大きさ、数、上に浮かび上がっていくスピード等は調整可能ですので、ぜひ記事を確認してカスタマイズしてみてください。