TOP

いきなり出現するフォントか、画像

ページをスクロールするといきなり動的作動を備える、画像、テキストフォントが
現れるというアクションイメージは、ショッピングサイトなどに限らずとも読者へ
インパクトを与えるという手段で..よく使われているアニメーション効果...

 

言葉では説明が、いや、言い回しが何とも説明しがたいもので、現物確認のため
上部に生上がりスタイルを二つ配置しております...せり下がりはもう少し下方に記事追加..
もう少しページをスクロールして下さい

 

 

 

 

 

 

 

 

 

 

この辺に現れるかと思いますが?

 

いきなり登場します、作動をご理解いただけましたか?

 

 

 

 

 

 

 

 

 

 

画像でも実施...
DEMOは、フォントですが、画像でも同じ作動をします...
以下に横3連で画像を並べてみましたが、記事も入れ込みできますので、他サービス...
イチカラムなどで見られる..スクロールごとに浮き上がる記事メニューも作れます

 

 

当ページでは、3つの作動を指定しております....
ただし、一つのページで、一つのIDで二つ以上のスクリプトを動かすことはできません
二つ以上のの段差位置で作動させる場合は、別IDでコード配置が必要

 

すみません...この画像はテーブルに入れてるの?とご質問がございましたが、そうではありません
フォトサイト用のコードで画像を横3連配置して、animationコードに2を追加して別IDで
囲んだだけ....
ご興味のある方は、親サイトに解説ございます
http://www.affiliateno1.com/シリウスをフォトコレクションサイトへカスタマイズ?/

 

 

では、取り付けへ進みます

 


3つの工程で進めますね

 

1工程目

 

 

HTMLテンプレートをひらいてください

 

<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工程目

 

スタイルシートを開いて、わかりやすい箇所に以下作動指示CSSを張り付けてください

 

#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); }
}

 

 

説明

 

作動は、DEMO同様上にせり上がりますが、200pxを-200に書き換えると下方向に
動きが変わりますので、どちらが良いかご確認ください

 

3つめの作動例
作動を追加しました..スクロールで到達すると下へ下がります
追加例...下がる出現スタイル

 

 

 

 

ソースを確認するとご理解頂けますが、同一ページに3つ目の配置で動きを逆としているため
3つ目の3IDで構成してます

 

念のため例コードを掲載しときますね...違いを確認しといてください...

 

herd内配置コード

 

<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連画像を踏まえれば、シリウス機能レイアウト枠、テーブルで利用で
画像、記事を合わせすれば...それも可能...

 


 

 

複数のページに取り付ける際は、トップ、カテゴリ、エントリHTMLすべてに
作動指示コードをを配置してください

 

 

追加記事

 

記事内では、ちょくちょく使用していたのですが、WPなどではヘッダーテキストが
同作動を表すの見ましてですね..やってみましたら作動しました..

 

でか画面(パソコンサイズのヘッダーレイアウトで表すと...格好いいです)

 

設定は、ソース内のタイトル表示ソースを挟めば完了...ですよ..

 

 

記事中の画像、フォントがスクロールするとフェードインで現れる
サイト内の画像をアニメーションで動かす手法まとめ
トップページ

関連ページ

横から縦回転まで色々動く画像の置き方
サイトを訪れた読者様が、なんでだろうと首をかしげる、そんな仕組み?横回転から前進回転とか各種の動きがCSS指定ですぐ作れます
ズームインする画像
ズームインする画像とは?画像が大きくなったり、小さくなったりするんです
斜め横に傾斜で動く画像
斜め横にスルーと傾斜で動く画像ヲおいてみました
風車みたいに回る画像
画像が風車のように回ります
横移動、縦移動の連動画像
水平横に行ったり来たり、上下に上げ下げのスライド移動する画像
ひし形表示で変形する画像
斜めひし形の画像が動きに合わせて変形します