
コーディングテクニックの実装内容
今回はオープニングアニメーションに関する内容です。ページアクセス時にズームで傾けた状態の背景画像をアニメーションさせながら元の状態に戻す方法を紹介します。オープニングアニメーションのテクニックになります。
使いどころ
ページアクセス時にメインビジュアルに適用すると効果的です。
実装所要時間:10分程度
難易度:初心者コーダーでも実装可能
CSS,JavaScriptの記述内容
body {
overflow-x: hidden;
}
.block {
width: 100%;
height: 100vh;
opacity: 0;
text-align: center;
transform: rotate(10deg) scale(1.3);
transform-origin: center center;
background: url(/img/w03.jpg) no-repeat center;
background-size: cover;
}
.active.block {
opacity: 1;
transition: opacity 1.4s,transform 1s cubic-bezier(.52,.01,.09,1);
transition-delay: .2s;
transform: scale(1) rotate(0);
}
@media screen and (max-width:640px){
.block {
height: 40vh;
}
}
実装のポイント
background-size: cover、transform:使用。
スポンサーリンク