いきなり出現するフォントか、画像
ページをスクロールするといきなり動的作動を備える、画像、テキストフォントが
現れるというアクションイメージは、ショッピングサイトなどに限らずとも読者へ
インパクトを与えるという手段で..よく使われているアニメーション効果...
言葉では説明が、いや、言い回しが何とも説明しがたいもので、現物確認のため
上部に生上がりスタイルを二つ配置しております...せり下がりはもう少し下方に記事追加..
もう少しページをスクロールして下さい
この辺に現れるかと思いますが？
いきなり登場します、作動をご理解いただけましたか？
画像でも実施...
ＤＥＭＯは、フォントですが、画像でも同じ作動をします...
以下に横3連で画像を並べてみましたが、記事も入れ込みできますので、他サービス...
イチカラムなどで見られる..スクロールごとに浮き上がる記事メニューも作れます
当ページでは、3つの作動を指定しております....
ただし、一つのページで、一つのＩＤで二つ以上のスクリプトを動かすことはできません
二つ以上のの段差位置で作動させる場合は、別ＩＤでコード配置が必要
すみません...この画像はテーブルに入れてるの？とご質問がございましたが、そうではありません
フォトサイト用のコードで画像を横3連配置して、animationコードに2を追加して別ＩＤで
囲んだだけ....
ご興味のある方は、親サイトに解説ございます
http://www.affiliateno1.com/シリウスをフォトコレクションサイトへカスタマイズ？/
では、取り付けへ進みます
３つの工程で進めますね
１工程目
ＨＴＭＬテンプレートをひらいてください
<head>～</head>内に以下のscriptを貼り付けます
<script>
$('#animation').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 1){
$(this).addClass("fadeInDown");
}
});
});
</script>
説明
if(topWindow > targetPosition - windowHeight + 1){
+ 1の数値で出現スピードを変えられます
2工程目
スタイルシートを開いて、わかりやすい箇所に以下作動指示ＣＳＳを張り付けてください
#animation {
margin: 50px 30;
font-size: 30px; //フォントサイズ/
font-weight: bold;
color: #ff0000; //フォントカラー/
}
.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-ms-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(100px); transform: translateY(200px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
説明
作動は、ＤＥＭＯ同様上にせり上がりますが、200pxを-200に書き換えると下方向に
動きが変わりますので、どちらが良いかご確認ください
3つめの作動例
作動を追加しました..スクロールで到達すると下へ下がります
追加例...下がる出現スタイル
ソースを確認するとご理解頂けますが、同一ページに3つ目の配置で動きを逆としているため
3つ目の３ＩＤで構成してます
念のため例コードを掲載しときますね...違いを確認しといてください...
ｈｅｒｄ内配置コード
<script>
$('#animation3').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation3').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 1){
$(this).addClass("fadeInDown3");
}
});
});
</script>
スタイルシート内追加コード
#animation3 {
margin: 50px 30;
font-size: 30px; //フォントサイズ/
font-weight: bold;
color: #ff0000; //フォントカラー/
}
.fadeInDown3 {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-ms-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown3;
animation-name: fadeInDown3;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown3 {
0% { opacity: 0; -webkit-transform: translateY-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown3 {
0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY( -200px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
まだ終わりません...これを配置せねば...です
3工程目 最終
記事内配置コードは、以下です
<div id="animation">
ここに、フォントか、画像を置いてください
</div>
上例での横3連画像を踏まえれば、シリウス機能レイアウト枠、テーブルで利用で
画像、記事を合わせすれば...それも可能...
複数のページに取り付ける際は、トップ、カテゴリ、エントリＨＴＭＬすべてに
作動指示コードをを配置してください
追加記事
記事内では、ちょくちょく使用していたのですが、WPなどではヘッダーテキストが
同作動を表すの見ましてですね..やってみましたら作動しました..
でか画面（パソコンサイズのヘッダーレイアウトで表すと...格好いいです）
設定は、ソース内のタイトル表示ソースを挟めば完了...ですよ..
記事中の画像、フォントがスクロールするとフェードインで現れる
サイト内の画像をアニメーションで動かす手法まとめ
トップページ
関連ページ
- 横から縦回転まで色々動く画像の置き方
- サイトを訪れた読者様が、なんでだろうと首をかしげる、そんな仕組み？横回転から前進回転とか各種の動きがＣＳＳ指定ですぐ作れます
- ズームインする画像
- ズームインする画像とは？画像が大きくなったり、小さくなったりするんです
- 斜め横に傾斜で動く画像
- 斜め横にスルーと傾斜で動く画像ヲおいてみました
- 風車みたいに回る画像
- 画像が風車のように回ります
- 横移動、縦移動の連動画像
- 水平横に行ったり来たり、上下に上げ下げのスライド移動する画像
- ひし形表示で変形する画像
- 斜めひし形の画像が動きに合わせて変形します