DETAIL NOTE

INTUITION DETAIL DESIGN BLOG

jqueryでページ遷移のエフェクトを実装

Webサイト上でリンクをクリックした際、通常のページ遷移では画面がパッと切り替わるだけ。
それだと何か味気ない感じもするので、ページ遷移の際にアニメーションで表示されるエフェクトを実装してみました。

今回はそれの忘備録のために書きます。

animation.jsを使用する

今回使用したのは「animation.js」というプラグイン。

まずはそれを以下のサイトからダウンロード

animsition

ファイルの読み込み

ダウンロードしたらファイルを読み込みます。

HTMLを記述

HTMLはシンプルで、Aタグにセレクタ「animsition-link」を記述

 

JavaScriptを記述

以下のJavaScriptを記述します。

 

基本的にはこれでOKです。簡単ですね。

AタグのクラスをJavaScriptで追加する

上記のようにAタグにはセレクタ「animsition-link」が必要ですが、たくさんあるとメンドクサイのでJavaScriptで制御するのもいいかなと。

 

次回、機会があったら、プラグインなしで実装する方法を書きたいと思います。

 

 

次へ 投稿

前へ 投稿

© 2022 INTUITION DETAIL DESIGN