画面遷移時のスライドアニメについて
基本的にはボタンを押すとパッと切り替わるのですが、どことなく味気ないと感じるケースもあるかもしれません。このため、ページからページへと画面を切り替える時に、アニメーションを設定しておくことがあります。画面遷移にあわせてフェードインしたり、色が変化したりするのが代表例でしょう。
今回は、定番ともいえるスライドアニメーションを作ってみました。TOPページなどに設定できるよう、ローディングモーションも入れています。まずは、下のボタンで動作を確認してみて下さい。
Now.Loading
紙芝居のように横方向にスライドさせるモーションです。ちょっと高級感がでてきたのではないでしょうか。
スライドアニメを使うメリット
- リッチな印象を与えることができる
- 動きを出すことでユーザーの注目度を上昇させる
- コンテンツに特別感やワクワク感を演出できる
リッチで特別なイメージのサイトに、マッチしやすいと思います。逆に、迅速さや厳格さが必要な場面など、向ていないケースもあるでしょう。また、アニメモーションが長すぎるのも、ユーザーが嫌がる可能性があります。
遷移アニメの作り方
今回はHTMLとCSSで主なデザインを作り、JavaScriptでアニメの動作をコントロールしています。CSSのKeyframeでも作れますが、これはまた別の機会に。
ソースコード
HTML
<div id="trs3">
</div>
<div id="trs2">
</div>
<div id="trs">
<div id="TrsLoD">Now.Loading</div>
</div>
<div id="trs2">
</div>
<div id="trs">
<div id="TrsLoD">Now.Loading</div>
CSS
.trsON{
Overflow: hidden;
}
#trs{
width:100%;
height:100%;
position: absolute;
display: flex;
top:0;
left:0;
Overflow: hidden;
background-color:#ffffff ;
z-index:999!important;
}
#trs2{
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
display: flex;
Overflow: hidden;
background-color:#353535 ;
z-index:999!important;
}
#trs2.activeTRS{
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
display: flex;
Overflow: hidden;
background-color:#353535 ;
z-index:999!important;
animation: aniTRS2 0.5s;
animation-fill-mode:forwards;
}
#trs3{
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
display: flex;
Overflow: hidden;
background-color:#ffffff ;
z-index:990!important;
}
#TrsLoD{
width:100%;
height:100%;
position: fixed;
animation: aniTRSLod 0.5s;
animation-fill-mode:forwards;
text-align: center;
vertical-align: middle;
font-size: 22px;
color:#cccccc;
transform: translate(0, 50%);
}
#trs3.activeTRS2{
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
display: flex;
Overflow: hidden;
background-color:#ffffff ;
z-index:999!important;
animation: aniTRS2 0.8s;
animation-fill-mode:forwards;
}
@keyframes aniTRS {
0% {
opacity: 1;
} 50% {
opacity: 0.5;
} 100% {
opacity: 0.0;
width:0;
}
}
@keyframes aniTRS2 {
0% {
opacity: 1;
} 50% {
opacity: 0.5;
} 100% {
opacity: 0.0;
width:0;
}
}
@keyframes aniTRSLod {
0% {
opacity: 0;
} 50% {
opacity: 0.5;
}100% {
opacity:1;
color:#555555;
}
}
Overflow: hidden;
}
#trs{
width:100%;
height:100%;
position: absolute;
display: flex;
top:0;
left:0;
Overflow: hidden;
background-color:#ffffff ;
z-index:999!important;
}
#trs2{
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
display: flex;
Overflow: hidden;
background-color:#353535 ;
z-index:999!important;
}
#trs2.activeTRS{
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
display: flex;
Overflow: hidden;
background-color:#353535 ;
z-index:999!important;
animation: aniTRS2 0.5s;
animation-fill-mode:forwards;
}
#trs3{
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
display: flex;
Overflow: hidden;
background-color:#ffffff ;
z-index:990!important;
}
#TrsLoD{
width:100%;
height:100%;
position: fixed;
animation: aniTRSLod 0.5s;
animation-fill-mode:forwards;
text-align: center;
vertical-align: middle;
font-size: 22px;
color:#cccccc;
transform: translate(0, 50%);
}
#trs3.activeTRS2{
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
display: flex;
Overflow: hidden;
background-color:#ffffff ;
z-index:999!important;
animation: aniTRS2 0.8s;
animation-fill-mode:forwards;
}
@keyframes aniTRS {
0% {
opacity: 1;
} 50% {
opacity: 0.5;
} 100% {
opacity: 0.0;
width:0;
}
}
@keyframes aniTRS2 {
0% {
opacity: 1;
} 50% {
opacity: 0.5;
} 100% {
opacity: 0.0;
width:0;
}
}
@keyframes aniTRSLod {
0% {
opacity: 0;
} 50% {
opacity: 0.5;
}100% {
opacity:1;
color:#555555;
}
}
JavaScript
const trs1 = document.getElementById("trs")
const trs2 = document.getElementById("trs2")
const trs3 = document.getElementById("trs3")
var trsX=0;
var trsX2=0;
var winwidTRS= window.outerWidth;
winwidTRS*=-1;
var TrsDelay=150;//遷移開始までの待ち時間
var trsXX
var trsXX2
window.addEventListener('DOMContentLoaded', function() {
document. body.classList.add("trsON2");
console.log("trsON",trs1)
})
async function trsON(){
TrsDelay–;
if(TrsDelay<0){
trsX–;
trsXX=trsX*20;//遷移スピードの設定
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
if(trsXX<winwidTRS){
trs2.classList.add("activeTRS");
trsX2–;
trsXX2=trsX2*20;//遷移スピードの設定
if(trsXX2<winwidTRS){
trs3.classList.add("activeTRS2");
document. body.classList.remove("trsON");
document. body.classList.remove("trsON2");
}
}else{
trs1.style.left=trsXX+"px"
}
}
}
interval=setInterval (function(){
trsON()
console.log("Interval RUN:trs1-",trsXX,":::trs2-",trsXX2,);
}, 1);
function TrsReload(){
window.location.reload();
}
const trs2 = document.getElementById("trs2")
const trs3 = document.getElementById("trs3")
var trsX=0;
var trsX2=0;
var winwidTRS= window.outerWidth;
winwidTRS*=-1;
var TrsDelay=150;//遷移開始までの待ち時間
var trsXX
var trsXX2
window.addEventListener('DOMContentLoaded', function() {
document. body.classList.add("trsON2");
console.log("trsON",trs1)
})
async function trsON(){
TrsDelay–;
if(TrsDelay<0){
trsX–;
trsXX=trsX*20;//遷移スピードの設定
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
if(trsXX<winwidTRS){
trs2.classList.add("activeTRS");
trsX2–;
trsXX2=trsX2*20;//遷移スピードの設定
if(trsXX2<winwidTRS){
trs3.classList.add("activeTRS2");
document. body.classList.remove("trsON");
document. body.classList.remove("trsON2");
}
}else{
trs1.style.left=trsXX+"px"
}
}
}
interval=setInterval (function(){
trsON()
console.log("Interval RUN:trs1-",trsXX,":::trs2-",trsXX2,);
}, 1);
function TrsReload(){
window.location.reload();
}
カスタマイズについて
JavaScriptファイルのコメントアウトで示している部分の数字を調整すると、待ち時間や遷移スピードを調節できます。同時にＣＳＳのKeyframeを調整すれば、透明化の調整も可能です。
まとめ
JavaScriptによる画面遷移アニメーションの作り方でした。スタンダードなスライドモーションです。お役に立てれば幸いです。
目次-Index-