スクロールするとアニメーションしながら要素が表示するスクリプト「ScrollReveal」のDEMO

必要なファイルは「scrollreveal.min.js」のみです。こちらより最新版をダウンロードして/bodyの上あたりに記述してください。
スクリプトの読み込みと同時に、どのclassをアニメーションさせるかを指定する必要があります。以下を参考に記述をしてください。

BODY内

オプション

動きを細かく指定可能なオプションが用意されています。詳しくはこちらより参照可能です。
英語サイトなので、とりあえず、大まかな説明だけ記述しておきます。

var ScrollrevealFade = {
	origin: 'left',
	distance: '0px',//移動範囲
	scale: 1,//拡大表示（１で横スクロールが始まる）
	rotate: { x: 0, y: 0, z: 0 }, //xは縦回転、yは横回転、zは傾き（風車みたいな感じ）
	duration: 1200, //アニメーションの速度
	delay :200 //要素が表示するまでの待機時間（ディレイ）
};

sr.reveal('.scrollreveal-fade', ScrollrevealFade, 100);

上記のような形でオプションは記述していきます。scaleを0.8にすれば表示の際に拡大するように表示されたり、1.2にすれば縮小しながら表示されたりします。
rotateの数値をいじると、縦回転・横回転・傾きをしながら表示されるようになります。また、durationでアニメーションの速度を調節したり等も可能です。

注意点として、オプションの数値部分ですが1や0といった数値、true / false等のはい・いいえといった記述以外は必ずシングルクォーテーションで囲むようにしましょう。
例えばorignの場合は、「orign: 'left';」というように、leftを必ず'で囲んでください。じゃないとエラーで動かないです。

orign

値：'bottom', 'left', 'top', 'right'

アニメーションする方向を指定できます。leftを選択すると「左から右へ」アニメーションしながら表示します。
追加オプションとして「distance」で距離を指定できます。「distance : '50px',」のような感じで指定しましょう。

		//例では左から右へ50px移動しながら表示されます。
        origin: 'left',
        distance: '50px',

拡大しながらという場合は「scale」を指定します。
1が拡大無しとなり、1未満は徐々に拡大しながら表示し、1より大きくすると徐々に縮小しながら表示されます。

		//例では、右から左に拡大しながら50px移動しながら表示されます。
        origin: 'right',
        distance: '50px',
		scale: 0.5,

scale

値：0～

徐々に拡大しながら or 徐々に縮小しながらといったアニメーションをさせることができます。
値は1を基準とし、1より大きい数字を指定すれば徐々に縮小しながらアニメーションします。
逆に1より小さい数字を指定すると徐々に拡大しながらアニメーションします。
この数字が1より差が大きければ大きいほど、変化が大きくなります。まずは徐々に縮小しながら表示させるサンプルです。

		//例では、徐々に縮小しながら表示されます。
		scale: 1.5,

		//例では、徐々に拡大しながら表示されます。
		scale: 0.5,

rotate

値：{ x: 0, y: 0, z: 0 },

x、y、zに合わせて回転しながら表示させるアニメーションが可能です。
xは縦回転、yは横回転、ｚは傾きです。0を基準に、数字を指定すると数字の大きさに合わせてより回転します。
数字をマイナスで指定すると逆回転します。たぶん300で1回転くらいかな？

		//例では、縦に回転しながら表示します。
		rotate: { x: 300, y: 0, z: 0 },

		//例では、横に回転しながら表示されます。
		rotate: { x: 0, y: 300, z: 0 },

		//例では、側転するように表示されます。
		rotate: { x: 0, y: 0, z: 300 },

		//全部指定も可能です。
		rotate: { x: 300, y: 300, z: 300 },

		//左から回転しながら表示みたいな事も可能です。
        origin: 'left',
        distance: '1000px',
		rotate: { x: 0, y: 0, z: 500 },

duration

値：0～

アニメーションの速度を指定できます。
ここで指定した数字が大きければ大きい程、ゆっくりとアニメーションするようになります。

delay

値：0～

アニメーション開始のタイミングをズラします。
数字が大きければ大きいほど、アニメーションの開始が遅くなります。

スクロールするとアニメーションしながら要素が表示するスクリプト「ScrollReveal」

用意するもの

Javascript

BODY内

オプション

orign

値：'bottom', 'left', 'top', 'right'

scale

値：0～

rotate

値：{ x: 0, y: 0, z: 0 },

duration

値：0～

delay

値：0～

opacity

値：0～1