
コーディングテクニックの実装内容
今回はテキストアニメーションに関する内容です。transitionを使用してテキストの上にテキストカラーとは異なるカラーを走らせるアニメーションの実装方法を紹介します。
使いどころ
見出しのテキストなどに使用すると効果的です。スクロールをして要素が見えたらアニメーションを実行させるのも効果的です。
実装所要時間:10分程度
難易度:初心者コーダーでも実装可能
CSS,JavaScriptの記述内容
body {
background: #ddd;
}
.block {
position: relative;
margin: 70px 0 0;
text-align: center;
font-size: 50px;
}
.block div {
overflow: hidden;
width: 0;
}
.block div p {
width: 100vw;
word-wrap: break-word;
}
.block div:first-child {
color: #fff;
transition: width 1.5s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.5s ease 1.5s;
}
.block div:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transition: width 1.5s cubic-bezier(0.2, 1, 0.2, 1) 0.2s;
}
.block.active div {
width: 100%;
}
.block.active div:first-child {
opacity: 0;
filter: alpha(opacity=0);
}
実装のポイント
現在制作中
スポンサーリンク