コーディングテクニックの実装内容
今回はWeb制作におけるテキストのエフェクトに関する内容です。@keyframesを使用してテキストにノイズが走ったようにブレさせるグリッチエフェクトを実装する方法を紹介します。
コーディングテクニックの使いどころ
見出しのテキストなどに使用すると効果的です。ページアクセス時にメインビジュアル内のタイトルに適用しても効果的です。
実装難易度・必要なスキル
コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。
実装所要時間は10分程度
CSS,JavaScriptの記述内容
body {
overflow: hidden;
background: #000;
}
.block {
margin: 70px auto 0;
}
.block p {
position: relative;
font-size: 100px;
text-align: center;
color: #fff;
}
.block p span {
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.block.active p span {
opacity: 1;
animation: anime 0.8s 1 alternate-reverse 1s;
}
@keyframes anime {
0% {
left: -10px;
clip: rect(10px, 9999px, 63px, 0);
}
4% {
clip: rect(137px, 9999px, 150px, 0);
}
8% {
clip: rect(82px, 9999px, 178px, 0);
}
12% {
left: -2px;
clip: rect(85px, 9999px, 125px, 0);
}
16% {
clip: rect(223px, 9999px, 258px, 0);
}
20% {
left: 10px;
clip: rect(100px, 9999px, 146px, 0);
}
24% {
clip: rect(41px, 9999px, 72px, 0);
}
28% {
clip: rect(9px, 9999px, 45px, 0);
}
32% {
clip: rect(136px, 9999px, 164px, 0);
filter: hue-rotate(-25deg);
}
36% {
left: -9px;
clip: rect(84px, 9999px, 116px, 0);
}
40% {
top: 7px;
clip: rect(229px, 9999px, 315px, 0);
}
44% {
clip: rect(37px, 9999px, 73px, 0);
}
48% {
clip: rect(163px, 9999px, 180px, 0);
}
52% {
clip: rect(205px, 9999px, 244px, 0);
}
56% {
left: 6px;
clip: rect(135px, 9999px, 170px, 0);
}
60% {
clip: rect(14px, 9999px, 100px, 0);
}
64% {
left: -2px;
clip: rect(116px, 9999px, 129px, 0);
}
68% {
clip: rect(37px, 9999px, 69px, 0);
}
72% {
top: -9px;
clip: rect(232px, 9999px, 264px, 0);
}
76% {
left: -8px;
clip: rect(100px, 9999px, 196px, 0);
filter: hue-rotate(35deg);
}
80% {
clip: rect(199px, 9999px, 245px, 0);
}
84% {
clip: rect(37px, 9999px, 73px, 0);
}
88% {
left: -10px;
clip: rect(1px, 9999px, 296px, 0);
}
92% {
clip: rect(141px, 9999px, 272px, 0);
}
96% {
clip: rect(33px, 9999px, 65px, 0);
}
100% {
clip: rect(137px, 9999px, 273px, 0);
}
}
@media screen and (max-width:640px){
.block p {
font-size: 30px;
}
}
実装のポイント
現在制作中
PR
法律をもっと身近にする話題のメディアサイト「法律ビッグバン」
アニメ・漫画の登場人物やゲームキャラクターの現在の年齢まとめ
TwitterやYouTube、TikTok、SNSで話題の猫(ネコ、ねこ)情報まとめ
TikTokで人気急上昇のTikToker(ティックトッカー)情報まとめ
スポンサーリンク