CSS3でサクッとできるオープニングアニメーションエフェクト3つ
簡単に出来るオープニングアニメーションをまとめてみました。
基本CSSだけで出来るものです。
SVGとか使うともっとリッチになりますけど、今回はもっとサクッと
ちなみにですが、変更される際のご参考に
1 2 3 |
animation: bgAnime 1s linear 1.8s forwards; |
bgAnimeは@keyframeで作ったアニメーションの名前
次の1sはアニメーションの秒数
次のlinearはアニメーションの動き
次の1.8sは1.8秒後からアニメーションするって事で
最後forwardsがアニメーションの最後の状態を維持です。
ネオンが点灯する
ネオンがチカチカとして付きます。
ネオンの揺らめきも起こってます
お好きな背景でbarのサイトとかにロゴ的に置いとくと面白いかも
Demo
Html
bgが背景のレンガで、bg2が明るさを調整するレイヤーです。
1 2 3 4 5 6 7 |
<div class="bg"> <div class="bg2"> <p class="neon">Neon Sighn</p> </div> </div> |
css
@keyframes neonAnime1で色を指定してます。
colorが文字色でdrop-shadowがボワッと広がる色をrgbaで書いています。
@keyframes neonAnime2は揺らめきです。rgbaの透過度や大きさを変えると感じが変わります。
neonAnime1とbgAnimeは点滅と光なので、%とanimationの秒数は合わせてください(bgFlaとneon1の前)
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
.bg { width: 100vw; height: 100vh; background-image: url(背景の画像); background-repeat: no-repeat; background-size: cover; } .bg2{ width: 100%; height: 100%; background-color: rgba(0,0,0,1); } .bgFla{ animation: bgAnime 3s linear 0s forwards; } .neon { text-align: center; font-size: 6vw; font-family: 'Warnes', cursive; height: 1em; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .neon1 { animation: neonAnime1 3s linear 0s forwards, neonAnime2 .1s linear 3s infinite; } /*keyframe*/ @keyframes neonAnime1 { 0% { color: rgba(0,0,0,0.5); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); } 24% { color: rgba(0,0,0,0.5); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); } 25% { color: #bb7bff; filter: drop-shadow(0 0 15px rgba(187, 123, 255, 0.8)); } 30% { color: #bb7bff; filter: drop-shadow(0 0 15px rgba(187, 123, 255, 0.8)); } 31% { color: rgba(0,0,0,0.5); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); } 74% { color: rgba(0,0,0,0.5); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); } 75% { color: #bb7bff; filter: drop-shadow(0 0 15px rgba(187, 123, 255, 0.8)); } 100% { color: #bb7bff; filter: drop-shadow(0 0 15px rgba(187, 123, 255, 0.8)); } } @keyframes neonAnime2 { 0% { filter: drop-shadow(0 0 15px rgba(187, 123, 255, 0.7)); } 50% { filter: drop-shadow(0 0 17px rgba(187, 123, 255, 0.9)); } 100% { filter: drop-shadow(0 0 15px rgba(187, 123, 255, 0.7)); } } @keyframes bgAnime{ 0% { background-color: rgba(0, 0, 0, 0.5); } 24% { background-color: rgba(0, 0, 0, 0.5); } 25% { background-color: rgba(0, 0, 0, 0); } 30% { background-color: rgba(0, 0, 0, 0); } 31% { background-color: rgba(0, 0, 0, 0.5); } 74% { background-color: rgba(0, 0, 0, 0.5); } 75% { background-color: rgba(0, 0, 0, 0); } 100% { background-color: rgba(0, 0, 0, 0); } } |
マスクが取れていくの
文字のマスクが取れて行って、取れたらちょっと動いて消えるってやつです。
説明が難しい。。。とにかく見てください。
Demo
html
1 2 3 4 5 |
<div class="bg"> <p class="text">Text</p> </div> |
css
.text:afterで文字にマスクを被せて、textAnime1でずらして表示してます。
ずらし切った後に、textAnime2にrotate(-10deg)を掛けて回転させてます。
回転さしたら、bgAnimeでフェードアウトさせて消してます。
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
.bg { width: 100vw; height: 100vh; background: #000; animation: bgAnime 1s linear 1.8s forwards; position: absolute; top: 0; left: 0; } .text { text-align: center; font-size: 6vw; color: #fff; height: 1em; line-height: 1.2; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 7; animation: textAnime2 .1s linear 1.5s forwards; } .text:after{ content: ""; width: 24vw; height: 1.2em; background: #000; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 9; animation: textAnime1 1.3s linear forwards; } /*keyframe*/ @keyframes textAnime1 { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @keyframes textAnime2 { 0%{ transform: rotate(0); } 100%{ transform: rotate(-10deg); } } @keyframes bgAnime { 0%{ opacity: 1; } 99%{ opacity: 0; } 100%{ opacity: 0; visibility: hidden; } } |
文字が躍って消える
フェードインした文字が一文字ずつ上下に踊ってからフェードアウトです。
Demo
html
一文字ずつ踊らせる為に、1文字1文字spanで囲んでいます。
1 2 3 4 5 |
<div class="bg"> <p class="text"><span>T</span><span>e</span><span>x</span><span>t</span></p> </div> |
css
textAnime1でフェードインさせて、.text span:nth-child(左から何番目の文字)でtextAnime2を付けて踊らせてます。
bgAnimeは先ほどと同じでフェードアウトです。
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
.bg { width: 100vw; height: 100vh; background: #000; animation: bgAnime 1s linear 1.8s forwards; position: absolute; top: 0; left: 0; } .text { text-align: center; font-size: 6vw; font-family: 'Pacifico', cursive; color: #fff; height: 1em; line-height: 1.2; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 7; opacity: 0; animation: textAnime1 .5s linear forwards; } .text span{ display: inline-block; } .text span:nth-child(1){ animation: textAnime2 .6s ease-in-out .5s forwards; } .text span:nth-child(2){ animation: textAnime2 .6s ease-in-out .6s forwards; } .text span:nth-child(3){ animation: textAnime2 .6s ease-in-out .7s forwards; } .text span:nth-child(4){ animation: textAnime2 .6s ease-in-out .8s forwards; } /*keyframe*/ @keyframes textAnime1{ 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes textAnime2 { 0% { transform: translateY(0); } 25%{ transform: translateY(-30%); } 75% { transform: translateY(30%); } 100%{ transform: translateY(0); } } @keyframes bgAnime{ 0%{ opacity: 1; } 99%{ opacity: 0; } 100%{ opacity: 0; visibility: hidden; } } |
サクッとできるのです。SVGとかグラデーションとか使うとネオンとかも、もっと綺麗に出来ると思います。
こんばんは。
サイト拝見させて頂きました。
ネットショップのサイトにオープニングとしてロゴを上記の様に表示させたいのですが、コピペしてもサイトの中に反映されてしまいます。
オープニングとして表示した後サイトが見れるようにするためには上記のコードにさらにurl等いれるのでしょうか?
コメントありがとうございます。
どのデモでしょうか?
ちょっと現状が把握できてないので、あれですが
.bg{position:absolute;top:0;left:0;z-index:10;}
と追加するといかがでしょうか?
cssを更新しておりますので、試していただければと思います^^