福野泰介の一日一創

スクロールするたびにふわっと現れるオシャレ表示の正体としてよく使われている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)