画面遷移時のアニメーション5つ
公開日:
最終更新日:
画面遷移時にアニメーションするのをまとめてみました。
こういうのってあんま使い所ないですよね。。
ふわっとフェードするやつ
じわっと消えて画面遷移するやつです
Demo
Html
|
1 |
<button id="button1"></button> |
css
bodyにallで1sかけてアニメーションするようにしてます。.bodyfadeoutクラスを次のjsでつける事によってフェードアウトさしてます。
buttonは押すところを作ってるだけなので、気にしないでください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { transition: all 1s; } .bodyfadeout { opacity: 0; } button { width: 40px; height: 40px; background-color: coral; border-radius: 50%; border: none; cursor: pointer; } |
Javascript
1行目でbodyタグを取得。
fadeOut()はbodyにbodyfadeoutクラスをつける関数。
linkUrl()はリンク先を設定する関数
button1を押したらfadeOut()起動して、1500ミリ秒後にlinkUrl()関数が起動します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var body = document.getElementsByTagName('body')[0]; function fadeOut() { body.classList.add('bodyfadeout'); } function linkUrl() { location.href = 'ここに遷移先のアドレス' } var bt1 = document.getElementById('button1'); bt1.addEventListener('click', function() { fadeOut(); setTimeout(linkUrl, 1500); }); |
クルクル下降で遷移します
クリックした要素が回りながら下降していってから、画面遷移します。
Demo
html
|
1 |
<button id="button2"></button> |
css
上のフェードアウトの感じで最終遷移させるので、buttonまでは一緒です。
くるくるしてアニメーションさせるようにanime2クラスを作っています。anime2クラスで使うキーフレームアニメーションをanimemove2で指定してます。
オブジェクトの場所によって、translate(0, ？)？の値を変えて頂ければよいかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
body { transition: all 1s; } .bodyfadeout { opacity: 0; } button { width: 40px; height: 40px; background-color: coral; border-radius: 50%; border: none; cursor: pointer; } .anime2 { animation: animemove2 2s linear forwards; } @keyframes animemove2 { 0% { transform: rotateY(180deg); } 10% { transform: rotateY(360deg) translate(0, 10vh); } 20% { transform: rotateY(0) translate(0, 20vh); } 30% { transform: rotateY(360deg) translate(0, 35vh); } 40% { transform: rotateY(0) translate(0, 50vh); } 50% { transform: rotateY(360deg) translate(0, 75vh); } 60% { transform: rotateY(0) translate(0, 90vh); } 70% { transform: rotateY(360deg) translate(0, 105vh); } 100% { transform: rotateY(0) translate(0, 120vh); } } |
Javascript
button2を押したらbutton2にanime2がセットされて、2000ミリ秒後にfadeOut()起動して、3500ミリ秒後にlinkUrl()関数が起動します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var body = document.getElementsByTagName('body')[0]; function fadeOut() { body.classList.add('bodyfadeout'); } function linkUrl() { location.href = 'ここに遷移先のアドレス' } var bt2 = document.getElementById('button2'); bt2.addEventListener('click', function() { bt2.classList.add('anime2'); setTimeout(fadeOut, 2000); setTimeout(linkUrl, 3500); }); |
全体が右へ消えていって画面遷移します。
画面全体が右へ消えて行ってから遷移します、遷移先の要素が左から入ってくるようにすると面白いかもしれません。
Demo
html
|
1 |
<button id="button3"></button> |
css
上のフェードアウトの感じで最終遷移させるので、buttonまでは一緒です。
anime3クラスで1秒かけて右へ110vwマージンレフトになるクラスです。徐々に速くなるほうが良さそうなので、イージングをease-inにしてます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
body { transition: all 1s; } .bodyfadeout { opacity: 0; } button { width: 40px; height: 40px; background-color: coral; border-radius: 50%; border: none; cursor: pointer; } .anime3 { transition: all 1s ease-in; margin-left: 110vw; } |
Javascript
button3を押したら、bodyにanime3がセットされて、1500ミリ秒後にlinkUrl()関数が起動します。
|
1 2 3 4 5 6 7 8 9 10 11 |
var body = document.getElementsByTagName('body')[0]; function linkUrl() { location.href = 'ここに遷移先のアドレス' } var bt3 = document.getElementById('button3'); bt3.addEventListener('click', function(){ body.classList.add('anime3'); setTimeout(linkUrl, 1500); }); |
丸のオブジェクトが全体を覆ってから遷移します。
丸いボタンをクリックすると、大きくなって全体を覆い遷移します。
Demo
html
動画のやつ以外htmlは、ほぼ一緒です。
|
1 |
<button id="button4"></button> |
css
キーフレームで画面一杯に左上から広がるようにしてます。
それを2秒でって設定です。
キーフレームでなくてもいけそうなんですが、いまいち上手くいかないので、キーフレームにしてます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
body { transition: all 1s; } .bodyfadeout { opacity: 0; } button { width: 40px; height: 40px; background-color: coral; border-radius: 50%; border: none; cursor: pointer; } .anime4 { animation: animemove4 2s linear forwards; } @keyframes animemove4 { 0% {} 100% { width: 100vw; height: 100vh; border-radius: 0; position: absolute; top: 0; left: 0; z-index: 999; } } |
Javascript
position:absolute;にしてやらないと、急にカクっと右上に寄っちゃうので、button4の位置を取得して、position:absolute;のtopとleftに付けてます。
つぎにbutton4にanime4クラスを付けて、2000ミリ秒後にfadeOut()、3500ミリ秒後にlinkUrl()です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var body = document.getElementsByTagName('body')[0]; function fadeOut() { body.classList.add('bodyfadeout'); } function linkUrl() { location.href = 'ここに遷移先のアドレス' } var bt4 = document.getElementById('button4'); var posi = bt4.getBoundingClientRect(); bt4.addEventListener('click', function() { bt4.style.position = 'absolute'; bt4.style.top = posi.top + 'px'; bt4.style.left = posi.left + 'px'; bt4.classList.add('anime4'); setTimeout(fadeOut, 2000); setTimeout(linkUrl, 3500); }); |
左からカーテンみたいに遷移します。
左からカーテンみたいに全体を覆ってから遷移します。
Demo
html
全体を覆う用のdivを#coverとして用意してます。
|
1 |
<button id="button5" class="button5"></button> |
css
#coverをwidth:0;で用意しときます。
anime5クラスで横幅を100vwに1.5秒でなるようにしてます。
キーフレームでない方が綺麗な気がしますが、widthの強さの関係でキーフレームにしてます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
body { transition: all 1s; } .bodyfadeout { opacity: 0; } button { width: 40px; height: 40px; background-color: coral; border-radius: 50%; border: none; cursor: pointer; } #cover { width: 0; height: 100vh; background-color: coral; border: none; position: absolute; top: 0; left: 0; z-index: 999; } .anime5 { animation: animemove5 1.5s linear forwards; } @keyframes animemove5 { 0% {} 100% { width: 100vw; } } |
Javascript
クリックしたら、#coverにanime5クラスを付けて、1500ミリ秒後にfadeOut()、2500ミリ秒後にlinkUrl()です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var body = document.getElementsByTagName('body')[0]; function fadeOut() { body.classList.add('bodyfadeout'); } function linkUrl() { location.href = 'ここに遷移先のアドレス' } var bt5 = document.getElementById('button5'); var cover = document.getElementById('cover'); bt5.addEventListener('click', function() { cover.classList.add('anime5'); setTimeout(fadeOut, 1500); setTimeout(linkUrl, 2500); }); |
Githubにもあげときました。Github
よろしければコメントをどうぞ