注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客
NO IMAGE

Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」


目次

Josh.js


Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです

他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です

使い方も簡単です

Ads

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> <script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script>

Animate.cssとJosh.jsを読み込みます

const josh = new Josh({ initClass: "foo", animateInMobile: true, offset: 0.3, onDOMChange: true });

セッティングします

 <div class="foo" data-josh-anim-name="zoomInDown" data-josh-anim-delay="3.5s" > hoge </div>

各要素でもセッティングすれば完了です。簡単で良いですね。ライセンスはMITとの事です

Josh.js

#wordpress #ワードプレス #SEO #集客

「かちびと.net」を閲覧する

NO IMAGE
最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG