シリウスの改変テンプレートで、ヘッダーテキストに動きを付け加えられないかとの質問が、
寄せられましての記事追加...

 

ボランティアで配布しているDEMO用サイトに、一部ヘッダータイトルが動くものがございます..
しかし、当サイトの配布テンプレートには未装着...

 

ま、個人差により不要と思われる方もおられるので過度な仕様は、お問い合わせに応じて
対応しておりますが、毎度同じこと説明するのも面倒？大変なので解説記事をここに
掲載いたします...

 

当配布テンプレートに入れ込むにはどのようにすればよいのか？...ですね
多くのご質問がございます...今まで5件...?

 

どこかのサブサイトにはヒント程度は記事にしてるかな？とは記憶しているのですけど..
当サイト特有の意味不明タイトルでたどり着かない...んでしょうね...

 

作動はこちらでご確認ください...開くとタイトルが動きますね
https://www.affiliateno1.com/parallax_demo1/demoP1/

 

忘却してましたが、こんなサイト追加していたの忘れておりました？
https://www.affiliateno1.com/animation-demo/
上サイトより、当ページに合わせてコンテンツを一部改行して追記してます...
記事内横滑りは使えるかもしれません..

 

ただし、配布例トップページでの2連続作動は、当サイトテンプレートでは、他のnaviとかも
同時に動くことから...動きが鈍くなり...なんか？変...ですので、ひとつの作動に押さえています...

 

現作動は、当ページを参照...

 

HTMLのテンプレートソースは、トップ、カテゴリ、エントリとも以下の箇所
ここから
<div id="top">
<h1 id="logo"><a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></h1>
</div>
ここまでを張替え

 

<div id="headerbox">
<div class="inner">
<div id="header">
<img src="<% pageDepth %>img/header.jpg" />
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>

 

 

張り替え後
<div id="top">
<div id="logo">
<div class="anim1-3 ">
<a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></div>
</div>
</div>
ここまで...

 

<div class="inner">
<div id="header">
<img src="<% pageDepth %>img/header2.jpg" alt="<% pageTitle %>" />
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>

 

HTMLはここで終わり

 

 

次、スタイルシートに以下を張り付け

 

当サイト及びhTMLでは、横フェード,,div class=anim1-3 を指定してますが、
他に書き換えれば動きも変わります...書き換えてお試しください..

 

 

/*スライドイン*/
.anim1 {
-webkit-animation: 1.5s forwards anim1;
animation: 1.5s forwards anim1;
}
@-webkit-keyframes anim1 {
0% {
-webkit-transform: translate(0, 20px);
opacity: 0;
}
100% {
-webkit-transform: translate(0, 0);
opacity: 1;
}
}
@keyframes anim1 {
0% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

 

.anim1-2 {
-webkit-animation: 1.5s forwards anim1-2;
animation: 1.5s forwards anim1-2;
}
@-webkit-keyframes anim1-2 {
0% {
-webkit-transform: translate(0, -20px);
opacity: 0;
}
100% {
-webkit-transform: translate(0, 0);
opacity: 1;
}
}
@keyframes anim1-2 {
0% {
transform: translate(0, -20px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

 

.anim1-3 {
-webkit-animation: 1.5s forwards anim1-3;
animation: 1.5s forwards anim1-3;
}
@-webkit-keyframes anim1-3 {
0% {
-webkit-transform: translate(-100px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate(0, 0);
opacity: 1;
}
}
@keyframes anim1-3 {
0% {
transform: translate(-100px, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

 

.anim1-4 {
-webkit-animation: 1.5s forwards anim1-4;
animation: 1.5s forwards anim1-4;
}
@-webkit-keyframes anim1-4 {
0% {
-webkit-transform: translate(100px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate(0, 0);
opacity: 1;
}
}
@keyframes anim1-4 {
0% {
transform: translate(100px, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

 

 

 

 

 

/*残像スライドイン*/
.anim2 {
-webkit-animation: 2s forwards anim2;
animation: 2s forwards anim2;
}
@-webkit-keyframes anim2 {
0% {
-webkit-text-shadow: rgba(0, 0, 0, 1) 0 10px 0;
opacity: 0;
}
100% {
-webkit-text-shadow: rgba(0, 0, 0, 0) 0 0 0;
opacity: 1;
}
}
@keyframes anim2 {
0% {
text-shadow: rgba(0, 0, 0, 1) 0 10px 0;
opacity: 0;
}
100% {
text-shadow: rgba(0, 0, 0, 0) 0 0 0;
opacity: 1;
}
}

 

.anim2-2 {
-webkit-animation: 2s forwards anim2-2;
animation: 2s forwards anim2-2;
}
@-webkit-keyframes anim2-2 {
0% {
-webkit-text-shadow: rgba(0, 0, 0, 1) 0 -10px 0;
opacity: 0;
}
100% {
-webkit-text-shadow: rgba(0, 0, 0, 0) 0 0 0;
opacity: 1;
}
}
@keyframes anim2-2 {
0% {
text-shadow: rgba(0, 0, 0, 1) 0 -10px 0;
opacity: 0;
}
100% {
text-shadow: rgba(0, 0, 0, 0) 0 0 0;
opacity: 1;
}
}

 

.anim2-3 {
-webkit-animation: 2s forwards anim2-3;
animation: 2s forwards anim2-3;
}
@-webkit-keyframes anim2-3 {
0% {
-webkit-text-shadow: rgba(0, 0, 0, 1) -10px 0px 0;
opacity: 0;
}
100% {
-webkit-text-shadow: rgba(0, 0, 0, 0) 0 0 0;
opacity: 1;
}
}
@keyframes anim2-3 {
0% {
text-shadow: rgba(0, 0, 0, 1) -10px 0px 0;
opacity: 0;
}
100% {
text-shadow: rgba(0, 0, 0, 0) 0 0 0;
opacity: 1;
}
}

 

.anim2-4 {
-webkit-animation: 2s forwards anim2-4;
animation: 2s forwards anim2-4;
}
@-webkit-keyframes anim2-4 {
0% {
-webkit-text-shadow: rgba(0, 0, 0, 1) 10px 0px 0;
opacity: 0;
}
100% {
-webkit-text-shadow: rgba(0, 0, 0, 0) 0 0 0;
opacity: 1;
}
}
@keyframes anim2-4 {
0% {
text-shadow: rgba(0, 0, 0, 1) 10px 0px 0;
opacity: 0;
}
100% {
text-shadow: rgba(0, 0, 0, 0) 0 0 0;
opacity: 1;
}
}

 

 

 

 

 

 

 

/*ズーム*/
/*拡大*/
.anim3 {
-webkit-animation: 1.5s forwards anim3;
animation: 1.5s forwards anim3;
}
@-webkit-keyframes anim3 {
0% {
-webkit-transform: scale(0.2, 0.2);
opacity: 0;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes anim3 {
0% {
transform: scale(0.2, 0.2);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}

 

/*縮小*/
.anim3-2 {
-webkit-animation: 1.5s forwards anim3-2;
animation: 1.5s forwards anim3-2;
}
@-webkit-keyframes anim3-2 {
0% {
-webkit-transform: scale(1.5, 1.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes anim3-2 {
0% {
transform: scale(1.5, 1.5);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}

 

/*縦方向縮小*/
.anim3-3 {
-webkit-animation: 1.5s forwards anim3-3;
animation: 1.5s forwards anim3-3;
}
@-webkit-keyframes anim3-3 {
0% {
-webkit-transform: scale(1, 5);
opacity: 0;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes anim3-3 {
0% {
transform: scale(1, 5);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}

 

/*縦方向拡大*/
.anim3-4 {
-webkit-animation: 1.5s forwards anim3-4;
animation: 1.5s forwards anim3-4;
}
@-webkit-keyframes anim3-4 {
0% {
-webkit-transform: scale(1, 0);
opacity: 0;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes anim3-4 {
0% {
transform: scale(1, 0);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}

 

 

 

 

 

 

/*回転*/
/*ぐるぐる回転*/
.anim4 {
-webkit-animation: 1.5s forwards anim4;
animation: 1.5s forwards anim4;
}
@-webkit-keyframes anim4 {
0% {
-webkit-transform: rotate(-720deg) scale(0.1, 0.1);
opacity: 0;
}
100% {
-webkit-transform: rotate(0deg) scale(1, 1);
opacity: 1;
}
}
@keyframes anim4 {
0% {
transform: rotate(-720deg) scale(0.1, 0.1);
opacity: 0;
}
100% {
transform: rotate(0deg) scale(1, 1);
opacity: 1;
}
}

 

/*縦回転*/
.anim4-2 {
-webkit-animation: 1s forwards anim4-2;
animation: 1s forwards anim4-2;
}
@-webkit-keyframes anim4-2 {
0% {
-webkit-transform: scale(1, 1);
}
20% {
-webkit-transform: scale(1, -1);
}
80% {
-webkit-transform: scale(1, -1);
}
100% {
-webkit-transform: scale(1, 1);
}
}
@keyframes anim4-2 {
0% {
transform: scale(1, 1);
}
20% {
transform: scale(1, -1);
}
80% {
transform: scale(1, -1);
}
100% {
transform: scale(1, 1);
}
}

 

/*横回転*/
.anim4-3 {
-webkit-animation: 1.5s forwards anim4-3;
animation: 1.5s forwards anim4-3;
}
@-webkit-keyframes anim4-3 {
0% {
-webkit-transform: scale(-1, 1);
opacity: 0;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes anim4-3 {
0% {
transform: scale(-1, 1);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}

 

 

 

 

 

 

/*震える*/
.anim5 {
-webkit-animation: 1.5s linear forwards anim5;
animation: 1.5s linear forwards anim5;
}
@-webkit-keyframes anim5 {
0% {
-webkit-transform: translate(20px, 20px) scale(1.2, 1.2);
}
5% {
-webkit-transform: translate(-18px, -18px) scale(1.15, 1.15);
}
15% {
-webkit-transform: translate(16px, 16px) scale(1.1, 1.1);
}
20% {
-webkit-transform: translate(-14px, -14px) scale(1.05, 1.05);
}
25% {
-webkit-transform: translate(12px, 12px) scale(1, 1);
}
30% {
-webkit-transform: translate(-10px, -10px) scale(1, 1);
}
35% {
-webkit-transform: translate(8px, 8px) scale(1, 1);
}
40% {
-webkit-transform: translate(-6px, -6px) scale(1, 1);
}
45% {
-webkit-transform: translate(4px, 4px) scale(1, 1);
}
50% {
-webkit-transform: translate(-2px, -2px) scale(1, 1);
}
55% {
-webkit-transform: translate(0, 0) scale(1, 1);
}
85% {
-webkit-transform: translate(0, 0) scale(1, 1);
}
90% {
-webkit-transform: translate(2px, 2px) scale(1, 1);
}
95% {
-webkit-transform: translate(-2px, -2px) scale(1, 1);
}
100% {
-webkit-transform: translate(0, 0) scale(1, 1);
}
}
@keyframes anim5 {
0% {
transform: translate(20px, 20px) scale(1.2, 1.2);
}
5% {
transform: translate(-18px, -18px) scale(1.15, 1.15);
}
15% {
transform: translate(16px, 16px) scale(1.1, 1.1);
}
20% {
transform: translate(-14px, -14px) scale(1.05, 1.05);
}
25% {
transform: translate(12px, 12px) scale(1, 1);
}
30% {
transform: translate(-10px, -10px) scale(1, 1);
}
35% {
transform: translate(8px, 8px) scale(1, 1);
}
40% {
transform: translate(-6px, -6px) scale(1, 1);
}
45% {
transform: translate(4px, 4px) scale(1, 1);
}
50% {
transform: translate(-2px, -2px) scale(1, 1);
}
55% {
transform: translate(0, 0) scale(1, 1);
}
85% {
transform: translate(0, 0) scale(1, 1);
}
90% {
transform: translate(2px, 2px) scale(1, 1);
}
95% {
transform: translate(-2px, -2px) scale(1, 1);
}
100% {
transform: translate(0, 0) scale(1, 1);
}
}

 

 

 

 

 

/*影*/
.anim6 {
-webkit-animation: 1.5s forwards anim6;
animation: 1.5s forwards anim6;
}
@-webkit-keyframes anim6 {
0% {
-webkit-text-shadow: #333 30px 0px 0, #333 29px 0px 0, #333 28px 0px 0, #333 27px 0px 0, #333 26px 0px 0, #333 25px 0px 0, #333 24px 0px 0, #333 23px 0px 0, #333 22px 0px 0, #333 21px 0px 0, #333 20px 0px 0, #333 19px 0px 0, #333 18px 0px 0, #333 17px 0px 0, #333 16px 0px 0, #333 15px 0px 0, #333 14px 0px 0, #333 13px 0px 0, #333 12px 0px 0, #333 11px 0px 0, #333 10px 0px 0, #333 9px 0px 0, #333 8px 0px 0, #333 7px 0px 0, #333 6px 0px 0, #333 5px 0px 0, #333 4px 0px 0, #333 3px 0px 0, #333 2px 0px 0, #333 1px 0px 0;
}
100% {
-webkit-text-shadow: rgba(0, 0, 0, 0) 0 0 0;
}
}
@keyframes anim6 {
0% {
text-shadow: #333 30px 0px 0, #333 29px 0px 0, #333 28px 0px 0, #333 27px 0px 0, #333 26px 0px 0, #333 25px 0px 0, #333 24px 0px 0, #333 23px 0px 0, #333 22px 0px 0, #333 21px 0px 0, #333 20px 0px 0, #333 19px 0px 0, #333 18px 0px 0, #333 17px 0px 0, #333 16px 0px 0, #333 15px 0px 0, #333 14px 0px 0, #333 13px 0px 0, #333 12px 0px 0, #333 11px 0px 0, #333 10px 0px 0, #333 9px 0px 0, #333 8px 0px 0, #333 7px 0px 0, #333 6px 0px 0, #333 5px 0px 0, #333 4px 0px 0, #333 3px 0px 0, #333 2px 0px 0, #333 1px 0px 0;
}
100% {
text-shadow: rgba(0, 0, 0, 0) 0 0 0;
}
}

 

.anim6-2 {
-webkit-animation: 1.5s forwards anim6-2;
animation: 1.5s forwards anim6-2;
}
@-webkit-keyframes anim6-2 {
0% {
-webkit-text-shadow: #333 0 -30px 0, #333 0 -29px 0, #333 0 -28px 0, #333 0 -27px 0, #333 0 -26px 0, #333 0 -25px 0, #333 0 -24px 0, #333 0 -23px 0, #333 0 -22px 0, #333 0 -21px 0, #333 0 -20px 0, #333 0 -19px 0, #333 0 -18px 0, #333 0 -17px 0, #333 0 -16px 0, #333 0 -15px 0, #333 0 -14px 0, #333 0 -13px 0, #333 0 -12px 0, #333 0 -11px 0, #333 0 -10px 0, #333 0 -9px 0, #333 0 -8px 0, #333 0 -7px 0, #333 0 -6px 0, #333 0 -5px 0, #333 0 -4px 0, #333 0 -3px 0, #333 0 -2px 0, #333 0 -1px 0;
}
100% {
-webkit-text-shadow: rgba(0, 0, 0, 0) 0 0 0;
}
}
@keyframes anim6-2 {
0% {
text-shadow: #333 0 -30px 0, #333 0 -29px 0, #333 0 -28px 0, #333 0 -27px 0, #333 0 -26px 0, #333 0 -25px 0, #333 0 -24px 0, #333 0 -23px 0, #333 0 -22px 0, #333 0 -21px 0, #333 0 -20px 0, #333 0 -19px 0, #333 0 -18px 0, #333 0 -17px 0, #333 0 -16px 0, #333 0 -15px 0, #333 0 -14px 0, #333 0 -13px 0, #333 0 -12px 0, #333 0 -11px 0, #333 0 -10px 0, #333 0 -9px 0, #333 0 -8px 0, #333 0 -7px 0, #333 0 -6px 0, #333 0 -5px 0, #333 0 -4px 0, #333 0 -3px 0, #333 0 -2px 0, #333 0 -1px 0;
}
100% {
text-shadow: rgba(0, 0, 0, 0) 0 0 0;
}
}

 

ここまで...終わります...

 

 

 

 

動的ヘッダーテキストの追加方法
トップTP3カラム組み込み済みHTMLソース..その1
3カラム特異指定..スタイルシート記述..その2
3カラムの設定..その3
当サイトレイアウト3カラムバージョンソース..公開

関連ページ

トップTP3カラム組み込み済みHTMLソース..その1

トップTPを3カラムバージョンにカスタマイズ済みの ソースを記載しております。

3カラム特異指定,,スタイルシート記述..その2

3カラムボックスレイアウトの最終設定解説です。

3カラム目のボックスを取り付けて、カスタマイズは終了します。

ヘッダ-h1、タイトルテキストの切り替えとフォントカラー変更

当サイトの配布テンプレートでは、ヘッダーテキストは、h1デフォルトですが、テキストも表示は可能で切り替えができます...又、フォントカラーはCSS指示となります...説明はサイトで．．．．．．