メインビジュアルや、記事のメイン画像、タイトルに使えそうな動き・アニメーションを、CSSでいくつか作成してみました。
シュワッ、シュッ。みたいな。
基本的な形は、アニメーション変化前のデザインに、クラスを付与しアニメーションをしながら変化後の表示にする流れです。
基本のhtml、CSS
基本の構成は下記です。
テキストをposition: absolute; で画像の上に配置し固定している形ですので、お好みでtopやleftを調整して下さい。
またclassのpattern1もデザインに合わせて、数字を変更してください。
html
<div class="anime_wrap pattern1">
<img src="image1.jpg" alt="">
<p>ANIMATION DEMO</p>
</div>
CSS
.anime_wrap{
position: relative;
overflow: hidden;
}
.anime_wrap p{
position: absolute;
top: 30px;
left: 30px;
font-size: 40px;
font-weight: bold;
}
javascript
どちらもjqueryを読み込ませた例ですので、下記を使う場合は必ずjqueryを読み込ませてください。
ページ表示にアニメーション(クラス付与)する場合
window.onload = function() {
const fade = document.getElementsByClassName('pattern1');
fade[0].classList.add('show');
要素が表示したらアニメーション(クラス付与)する場合
$(window).scroll(function (){
$(".anime_wrap").each(function(){
var offset = $(this).offset().top;
var scroll = $(window).scrollTop();
var wHeight = $(window).height();
if (scroll > offset - wHeight + wHeight/2){
$(this).addClass("show");
}
});
});
アニメーション例
下記のサンプルはスクロールで対象の要素が表示時にアニメーションをするプラス、画像クリックで再度アニメーションするようにもしております。
基本的なシンプルフェードイン
ANIMATION DEMO
CSS
.pattern1 img{
opacity: 0;
transition: 1s;
transition-delay: .5s;
}
.pattern1.show img{
opacity: 1;
}
.pattern1 p{
color: #ffdee7;
opacity: 0;
transition: .5s;
transition-delay: 1s;
}
.pattern1.show p{
opacity: 1;
}
横からスライドフェードイン
ANIMATION DEMO
CSS
.pattern2 img{
opacity: 0;
transform: translateX(40px);
transition: .5s;
}
.pattern2.show img{
opacity: 1;
transform: translateX(0);
}
.pattern2 p{
color: #FFF;
opacity: 0;
transform: translateX(-40px);
transition: .5s;
transition-delay: .5s;
}
.pattern2.show p{
opacity: 1;
transform: translateX(0);
}
上にスライドフェードイン
ANIMATION DEMO
CSS
.pattern3 img{
opacity: 0;
transform: translateY(40px);
transition: .5s;
}
.pattern3.show img{
opacity: 1;
transform: translateY(0);
}
.pattern3 p{
color: #FFF;
opacity: 0;
transform: translateX(40px);
transition: .5s;
transition-delay: .5s;
}
.pattern3.show p{
opacity: 1;
transform: translateX(0);
}
大きいサイズから小さくなってフェードイン
ANIMATION DEMO
CSS
.pattern4 img{
opacity: 0;
transform: scale(1.2);
transition: .5s;
}
.pattern4.show img{
opacity: 1;
transform: scale(1);
}
.pattern4 p{
color: #FFF;
opacity: 0;
transform: translateX(-40px);
transition: .5s;
transition-delay: .5s;
}
.pattern4.show p{
opacity: 1;
transform: translateX(0);
}
小さいサイズから大きくなってフェードイン
ANIMATION DEMO
CSS
.pattern5{
background: #333;
}
.pattern5 img{
opacity: 0;
transform: scale(.8);
transition: 1.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.pattern5.show img{
opacity: 1;
transform: scale(1);
}
.pattern5 p{
color: #FFF;
opacity: 0;
transform: translateX(40px);
transition: .8s;
transition-delay: .8s;
}
.pattern5.show p{
opacity: 1;
transform: translateX(0);
}
要素をカーテンみたいに隠して？から表示
ANIMATION DEMO
CSS
.pattern6::before{
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #FFF;
z-index: 2;
transition: .5s;
}
.pattern6.show::before{
transform: translateX(100%);
}
.pattern6 img{
opacity: 0;
transition: .5s;
}
.pattern6.show img{
opacity: 1;
}
.pattern6 p{
color: #FFF;
opacity: 0;
transform: translateX(-40px);
transition: .5s;
transition-delay: .5s;
z-index: 1;
overflow: hidden;
}
.pattern6.show p{
opacity: 1;
transform: translateX(0);
}
.pattern6 p::before{
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #FFF;
transition: .5s;
transition-delay: 1s;
}
.pattern6.show p::before{
transform: translateX(100%);
}
いろいろ混ぜてみてのパターン
ANIMATION DEMO
.pattern7::before,
.pattern7::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.pattern7::before{
background: #FFF;
z-index: 3;
transition: 1s;
}
.pattern7::after{
background: #dc7497;
z-index: 2;
transition: 1s;
transition-delay: .5s;
}
.pattern7.show::before,
.pattern7.show::after{
transform: translateY(100%);
}
.pattern7 img{
opacity: 0;
transform: scale(.8);
transition: 1.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: .4s;
}
.pattern7.show img{
opacity: 1;
transform: scale(1);
}
.pattern7 p{
color: #FFF;
opacity: 0;
transform: translateX(-40px);
transition: 1.2s;
transition-delay: .8s;
z-index: 1;
overflow: hidden;
}
.pattern7.show p{
opacity: 1;
transform: translateX(0);
}
手前から飛んでくるパターン
ANIMATION DEMO
.pattern8 img,
.pattern8 p{
opacity:0;
}
.pattern8.show img {
transform: scale(1);
animation: vibe .5s;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.pattern8.show p {
transform: scale(1);
animation: vibe .5s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes vibe {
0% {transform: scale(5); opacity: 0;}
60% {transform: scale(1); opacity: 1;}
65% {transform: translate(0px, 0px) rotateZ(0deg);opacity: 1;}
75% {transform: translate(2px, 2px) rotateZ(1deg);opacity: 1;}
85% {transform: translate(0px, 2px) rotateZ(0deg);opacity: 1;}
95% {transform: translate(2px, 0px) rotateZ(-1deg);opacity: 1;}
100% {transform: translate(0px, 0px) rotateZ(0deg);opacity: 1;}
}
MV(メインビジュアル)や画像のアニメーションまとめ
上記は割と定番なパターンかもしれませんが、transformとtransitionを調整すれば、様々なパターンが作成できると思います。
また、疑似要素を使えば更に表現は膨らむかと思います。
ちなみに、上記で使用している画像はO-DANより使用させてもらってます。
ありがとうございまーす！
コメント