2021-07-04
スクロールするたびにふわっと現れるオシャレ表示の正体としてよく使われているAOSを、ESモジュール化&拡張タグ化したAOS-esを作りました。

stb47 from ogp
気になるスタバ日本上陸25周年記念企画の全47都道府県版OGP(Open Graph Protocol、Facebook提唱するシェアを促進する仕組み)をHTMLからパースするプログラムで集めてCSVデータ化。 今回作ったAOS-esを使って、オシャレに表示してみました。


stb47 from ogp
シンプルなリスト表示バージョンもあります。いろんなレイアウト、デザインの練習にもいいですね!

AOS.jsの依存ライブラリLodashは、ほぼESモジュールだったので微調整だけしてGitHub Pagesホスティングして、import利用(lodash)。 AOS-esを読み込むスクリプトタグを1行追加して、スクロールさせたいタグに「data-aos="fade-in"」など指定するだけでスッキリシンプル使えるようになりました。 <div style="height:100vh">demo (please scroll down)</div> <script type="module" src="https://taisukef.github.io/aos-es/AOS.js"></script> <div data-aos="zoom-in"> <img src="https://find47.jp/ja/i/q2OXh/image_file?type=thumb"><br> <div>photo: <a href=https://find47.jp/ja/i/q2OXh>鉾島 © 福井県 CC BY 4.0</a></div> </div> このシンプルなHTMLだけで、スクロールするとふわっと現れるページができちゃいます!
表示方法、発火する場所、タイミング、速さなどはdata-aos属性で細かく調整可能です。aos-esタグでまとめて指定もできます。

links
- AOS-es Animate on scroll library (forked from AOS.js)

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS