ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。 単体で動作し、しかも1KBの超軽量スクリプトです。
![[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/cfd16f6b3cf9495ffab4b2256010a83797a2cf0d/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110801-02.png)
ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。 単体で動作し、しかも1KBの超軽量スクリプトです。
Bouncy Scrolling ※アニメーションGIFにしたらサイズがすごかったので静止画像です。 デモページには他にもたくさんのデモがあります。 Impulseの使い方 実装は各デモによってHTMLやJavaScriptが異なるので、「Pulldown Menu」で実装方法を紹介します。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ここは全デモ共通です。 <head> ... <script src="/scripts/impulse.js"></script> </head> Step 2: HTML ヘッダ、メニュー、コンテンツをそれぞれdiv要素で実装します。 <body> <div class="nav-header"> <div class="hamburger-menu-handle"></div> </div> <div class="pu
![[JS]スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できるスクリプト -Impulse](https://cdn-ak-scissors.b.st-hatena.com/image/square/b00ab7bf5a19e33db792ea0ed5fb6335ba4f97e7/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090106.png)
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
