Home > Html & Css > 画面遷移時のアニメーション5つ
Home > Javascript > 画面遷移時のアニメーション5つ

画面遷移時のアニメーション5つ

公開日:

最終更新日:

transition-effect_catch

画面遷移時にアニメーションするのをまとめてみました。
こういうのってあんま使い所ないですよね。。

ふわっとフェードするやつ

じわっと消えて画面遷移するやつです

Demo

デモはこちら

Html

css

bodyにallで1sかけてアニメーションするようにしてます。.bodyfadeoutクラスを次のjsでつける事によってフェードアウトさしてます。
buttonは押すところを作ってるだけなので、気にしないでください。

Javascript

1行目でbodyタグを取得。
fadeOut()はbodyにbodyfadeoutクラスをつける関数。
linkUrl()はリンク先を設定する関数
button1を押したらfadeOut()起動して、1500ミリ秒後にlinkUrl()関数が起動します。

クルクル下降で遷移します

クリックした要素が回りながら下降していってから、画面遷移します。

Demo

デモはこちら

html

css

上のフェードアウトの感じで最終遷移させるので、buttonまでは一緒です。
くるくるしてアニメーションさせるようにanime2クラスを作っています。anime2クラスで使うキーフレームアニメーションをanimemove2で指定してます。
オブジェクトの場所によって、translate(0, ?)?の値を変えて頂ければよいかと思います。

Javascript

button2を押したらbutton2にanime2がセットされて、2000ミリ秒後にfadeOut()起動して、3500ミリ秒後にlinkUrl()関数が起動します。

全体が右へ消えていって画面遷移します。

画面全体が右へ消えて行ってから遷移します、遷移先の要素が左から入ってくるようにすると面白いかもしれません。

Demo

デモはこちら

html

css

上のフェードアウトの感じで最終遷移させるので、buttonまでは一緒です。
anime3クラスで1秒かけて右へ110vwマージンレフトになるクラスです。徐々に速くなるほうが良さそうなので、イージングをease-inにしてます。

Javascript

button3を押したら、bodyにanime3がセットされて、1500ミリ秒後にlinkUrl()関数が起動します。

丸のオブジェクトが全体を覆ってから遷移します。

丸いボタンをクリックすると、大きくなって全体を覆い遷移します。

Demo

デモはこちら

html

動画のやつ以外htmlは、ほぼ一緒です。

css

キーフレームで画面一杯に左上から広がるようにしてます。
それを2秒でって設定です。
キーフレームでなくてもいけそうなんですが、いまいち上手くいかないので、キーフレームにしてます。

Javascript

position:absolute;にしてやらないと、急にカクっと右上に寄っちゃうので、button4の位置を取得して、position:absolute;のtopとleftに付けてます。
つぎにbutton4にanime4クラスを付けて、2000ミリ秒後にfadeOut()、3500ミリ秒後にlinkUrl()です。

左からカーテンみたいに遷移します。

左からカーテンみたいに全体を覆ってから遷移します。

Demo

デモはこちら

html

全体を覆う用のdivを#coverとして用意してます。

 

css

#coverをwidth:0;で用意しときます。
anime5クラスで横幅を100vwに1.5秒でなるようにしてます。
キーフレームでない方が綺麗な気がしますが、widthの強さの関係でキーフレームにしてます。

Javascript

クリックしたら、#coverにanime5クラスを付けて、1500ミリ秒後にfadeOut()、2500ミリ秒後にlinkUrl()です。

Githubにもあげときました。Github

Comment

よろしければコメントをどうぞ