タイトルに動的作動を指示する方法
サイトを開くとタイトルが横から滑り込むスライド作動...当ページでご確認ください...
いやすみません...フェード作動から横滑りでした。
サイトは、別段動的にしなければならないということはありませんが、何かが動くと、
視覚効果として何かを感じさせることができる...
そう思いませんか？
理由付けは、頭が回らないので省きますが、もし導入するならやりようはとっても
簡単なのでお試しください...
対応テンプレートは、シリウスのニューバージョン、デフォルト、ビジネス...
レスポンシブテンプレートで...ほとんど同じ作業で終わります...
ここでは、一つのスタイルしか記載して下りませんが、他の選択を願うなら以下サイトを
御覧ください...
シリウスアニメーション取り付けDEMO例
ソースとCSS記載確認
では、先に進みましょうね
2ステップ...コピペで完了...
ソース内で以下行をお探しください
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
次にクラスID <h3 class="animeAA"> </h3>で上下を囲みます
書き換え例
<div id="header">
<% pageHeaderImage2 %>
<div id="headertxt">
<h3 class="animeAA">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
</h3>
<% pageDescription2 | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>
トップ、カテゴリ、エントリソースで同作業...
HTMLはここで終わり...スタイルシートへ移動します
ユーザー指定スタイルを開いて、以下項目を張り付ければ...終わり..
当サイトみたく動きます...
/*左から右スライド...当ページ例*/
.animeAA {
-webkit-animation: 1.5s forwards animeAA;
animation: 1.5s forwards animeAA;
}
@-webkit-keyframes animeAA {
0% {
-webkit-transform: translate(-100px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate(0, 0);
opacity: 1;
}
}
@keyframes animeAA {
0% {
transform: translate(-100px, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
簡単でしょう...でも、サイトイメージが少し？変わるのでお勧め手法かと思います。
