メインビジュアルや、記事のメイン画像、タイトルに使えそうな動き・アニメーションを、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: .5s; } .pattern1.show img{ opacity: 1; } .pattern1 p{ color: #ffdee7; opacity: 0; transition: .5s; transition-delay: .5s; } .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); }
MVや画像のアニメーションまとめ
上記は割と定番なパターンかもしれませんが、transformとtransitionを調整すれば、様々なパターンが作成できると思います。
また、疑似要素を使えば更に表現は膨らむかと思います。
ちなみに、上記で使用している画像はO-DANより使用させてもらってます。
ありがとうございまーす!
コメント