
コーディングテクニックの実装内容
今回はテキストアニメーションに関する内容です。テキストカラーを1行ずつ順番に変更させる方法を紹介します。
使いどころ
見出しのテキストやタイトルなどに使用すると効果的です。英字との相性が良いので英文に適用することをオススメします。
実装所要時間:10分程度
難易度:初心者コーダーでも実装可能
実装に必要なスクリプトとスタイルはこちらになります。
$(function(){
setInterval((function change() {
$(".on-01").addClass("on");
setTimeout(function(){
$(".on-01").removeClass("on");
},1500);
setTimeout(function(){
$(".on-02").addClass("on");
},1500);
setTimeout(function(){
$(".on-02").removeClass("on");
},3000);
setTimeout(function(){
$(".on-03").addClass("on");
},3000);
setTimeout(function(){
$(".on-03").removeClass("on");
},4500);
setTimeout(function(){
$(".on-04").addClass("on");
},4500);
setTimeout(function(){
$(".on-04").removeClass("on");
},6000);
return change;
}()), 6000);
});
.wrap {
margin: 50px auto 0;
}
.wrap p {
margin: 0 0 10px;
text-align: center;
font-weight: bold;
font-size: 50px;
}
.wrap p.on {
color: #ff3333;
}
@media screen and (max-width:640px){
.wrap {
width: 100%;
}
}
実装のポイント
現在制作中
スポンサーリンク