TOP

サイトオープン同時作動のタイトル...もしくはその他

サイトを開いた時だけ作動するアニメーションとは、トップページや下層ページを開くと同時に
動く...

 

スクロールポイントはありませんで、その時だけの作動なんですね
当ページタイトル作動参照

 

タイトルでは、タイトルをアニメーションと言っておりますが、開いた時の範囲なら記事内でも
動きます
あくまで開いた時見える範囲でとご理解ください。

 

 

もし、見えない位置に指定を置いたとしますね
その際も、サイトオープンで隠れているが、作動してしまっているので、その位置にスクロール
したとしても作動終了の後...

 

ちと、変な動きですが、有料WPなどではよくお見かけしますけど...

 

作動スタイル複数...ただし、タイトルで使う場合はトップ、カテゴリー、エントリーのHTML
ソースにポジションを置くので...3つのスタイルに限定されますが、エントリーのスタイルの
割り込みを使えば、個別ページごとに切り替え作動はできると思います..多分?
(まだ、未実行...面倒なんで...)

 

では、HTML記載とCSSソースの説明に進みますね

 


 

説明は、シリウスのレスポンシブTP(デフォルト...ノンカスタマイズ状態)の取り付け例に
なります...

 

そこで大変申し訳ないのですが、DEMO作動状況は当ページのタイトル以外おみせする例が
ないんです...
例ごとにページ作るのも大変が理由..

 

 

で、作動スタイルとHTML記載、CSSを小分けしてまとめますのでコピーしてお使いください

 


 

最初はここから

 

まず、HTML内のポイント記述を理解しましょう

 

タイトルは、ソース内にclass指定

 

<h2 class="animeA-C"> (この記述を原本に御使いください)
タイトル関数&lt;% headerText | tag_insert(a href=&quot;&lt;% pageDepth %&gt;&quot;) | tag_insert(div class=&quot;title&quot;) %&gt;
&lt;/h2&gt;

 

 

位置は以下でご確認ください

 

&lt;body&gt;
&lt;div id=&quot;wrapper&quot;&gt;
&lt;div id=&quot;top&quot;&gt;
&lt;h1 id=&quot;logo&quot;&gt;&lt;a href=&quot;&lt;% pageDepth %&gt;&quot;&gt;&lt;% logoImage | ifEmpty({%h1text%}) | str_replace(alt=&quot;&quot;,alt=&quot;{%h1text%}&quot;) | oneline %&gt;&lt;/a&gt;&lt;/h1&gt;
&lt;/div&gt;
&lt;% topMenu2 | tag_put(&lt;div id=&quot;topmenubtn&quot;&gt;MENU&lt;/div&gt;) | tag_insert(div id=&quot;topmenubox&quot;) | tag_insert(div id=&quot;nav&quot;) %&gt;
&lt;div id=&quot;headerbox&quot;&gt;
&lt;div class=&quot;inner&quot;&gt;
&lt;div id=&quot;header&quot;&gt;
&lt;img src=&quot;&lt;% pageDepth %&gt;img/header.jpg&quot; /&gt;
&lt;div id=&quot;headertxt&quot;&gt;

 

ここですよ
<h2 class="animeA-C">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
</h2>
ここまで

 

<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>

 

 

もし、当サイトのトップページのように二つの要素を同時に作動させる際は、直下にh2ではなく
div要素に書き換えてください

 


<div class="animeA-C">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
</div>

 

記事内で作動させる際ですが、h2 では見出し枠を読み込んでしまいますので、
やはりdiv要素に書き換えてください

 


 

 

ここからCSSに進みますが、選択するclss-idに合わせれば、シリウスのプレビュー段階でも
作動はご確認できます

 

簡単に進めるには、以下CSSをすべてスタイルシートに張り付けてHTMLのidだけ好みに
書き換える...とすれば...お勧め?

 

 

/*左から右スライド...当ページ例*/

 

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

transform: translate(-100px, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

 

 

 

 

/*上から下へ*/

 

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

transform: translate(0, -20px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

 

 

 

 

/*下から上に浮き上がる*/

 

 

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

transform: translate(0, 20px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

 

 

 

/*右から左へ横スライド*/

 

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

transform: translate(100px, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

 

 

 

 

/*フェード*/

 

.animeA-D {
-webkit-animation: 2s forwards animeA-D;
animation: 2s forwards animeA-D;
}
@-webkit-keyframes animeA-D {
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 animeA-D {
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;
}
}

 

 

 

 

 

/*右からセンタースライド拡大*/

 

.animeA-F {
-webkit-animation: 1.5s forwards animeA-F;
animation: 1.5s forwards animeA-F;
}
@-webkit-keyframes animeA-F {
0% {
-webkit-transform: scale(0.2, 0.2);
opacity: 0;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes animeA-F {
0% {

transform: scale(0.2, 0.2);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}

 

 

 

 

/*左から右へ縮小*/

 

.animeA-Y {
-webkit-animation: 1.5s forwards animeA-Y;
animation: 1.5s forwards animeA-Y;
}
@-webkit-keyframes animeA-Y {
0% {
-webkit-transform: scale(1.5, 1.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes animeA-Y {
0% {

transform: scale(1.5, 1.5);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}

 

 

 

 

/*縦拡大から縮小*/

 

.animeA-G {
-webkit-animation: 1.5s forwards animeA-G;
animation: 1.5s forwards animeA-G;
}
@-webkit-keyframes animeA-G {
0% {
-webkit-transform: scale(1, 5);
opacity: 0;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes animeA-G {
0% {

transform: scale(1, 5);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}

 

 

 

 

/*横縮小から縦伸び*/

 

.animeA-X {
-webkit-animation: 1.5s forwards animeA-X;
animation: 1.5s forwards animeA-X;
}
@-webkit-keyframes animeA-X {
0% {
-webkit-transform: scale(1, 0);
opacity: 0;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes animeA-X {
0% {

transform: scale(1, 0);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}

 

 

 

 

 

 

 

 

更新履歴