IntersectionObserverではてなブログ記事内のApple Musicを自動再生する - Log

2023/02/13 15 users log Twitter span Style 要件定義

Twitterに要件定義が転がっていたのでIntersectionObserverを用いて実装しました。 以下のコードを記事のどこかに貼り付けると、画面右下に自動再生ボタンが表示されます。自動再生ボタンを押すと、画面で見えている「iTunes商品紹介」を自動で再生するようになります。 再生中 <span></span><style> #autoplay-btn{colo... 続きを読む

IntersectionObserverを使用すると実装が簡単に！Vue.jsでスクロールイベントをトリガーする方法 | コリス

2021/02/24 6 users スクロールイベント コリス トリガー スクロール ライブラリ

Webページやスマホアプリにスクロールのアニメーションを実装したり、特定の地点までスクロールしたらイベントをトリガーにしたりする際は、JavaScriptのライブラリを使用するのではなく、IntersectionObserverが非常に簡単で便利です。 IntersectionObserverを使用して、Vue.jsでスクロールイベントをトリガーする方法... 続きを読む

スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama | コリス

2017/11/24 60 users コリス ビューポート スクロール ブラウザ 表示領域

スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama Intersection Observerを利用したWebページが増えてきました。 IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる（または交差する「Intersection」）量を計算す... 続きを読む

スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」 | bl6.jp

2017/11/22 13 users スクロールイベント JSライブラリ トリガー 赤い点線 要素

scrollama.jsは、スクロールイベントを実装することができるモダンで軽量なJavaScriptライブラリです。IntersectionObserverを使用しているとのこと。スクロールされた位置によって要素のカラーを変更したりなんてことができます。 以下、scrollama.jsの実際のデモページになります。 デモ デモページでは中央に赤い点線が引かれていて、ここがトリガーとなっています。... 続きを読む