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

用意するもの

Javascript

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



BODY内

動かしたい要素のclass等を、scriptで以下のように指定しましょう。 これで基本的な動作は終了です。

        
      <div class="demo">これはテストです。</div>
    
▼こんな動きになります

オプション

動きを細かく指定可能なオプションが用意されています。詳しくはこちらより参照可能です。
英語サイトなので、とりあえず、大まかな説明だけ記述しておきます。
var ScrollrevealFade = {
	origin: 'left',
	distance: '0px',//移動範囲
	scale: 1,//拡大表示(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',
    
▼demo
拡大しながらという場合は「scale」を指定します。
1が拡大無しとなり、1未満は徐々に拡大しながら表示し、1より大きくすると徐々に縮小しながら表示されます。
		//例では、右から左に拡大しながら50px移動しながら表示されます。
        origin: 'right',
        distance: '50px',
		scale: 0.5,
    
▼demo
scale
値:0~
徐々に拡大しながら or 徐々に縮小しながらといったアニメーションをさせることができます。
値は1を基準とし、1より大きい数字を指定すれば徐々に縮小しながらアニメーションします。
逆に1より小さい数字を指定すると徐々に拡大しながらアニメーションします。
この数字が1より差が大きければ大きいほど、変化が大きくなります。まずは徐々に縮小しながら表示させるサンプルです。
		//例では、徐々に縮小しながら表示されます。
		scale: 1.5,
    
▼demo
		//例では、徐々に拡大しながら表示されます。
		scale: 0.5,
    
▼demo
rotate
値:{ x: 0, y: 0, z: 0 },
x、y、zに合わせて回転しながら表示させるアニメーションが可能です。
xは縦回転、yは横回転、zは傾きです。0を基準に、数字を指定すると数字の大きさに合わせてより回転します。
数字をマイナスで指定すると逆回転します。たぶん300で1回転くらいかな?
		//例では、縦に回転しながら表示します。
		rotate: { x: 300, y: 0, z: 0 },
    
▼demo
		//例では、横に回転しながら表示されます。
		rotate: { x: 0, y: 300, z: 0 },
    
▼demo
		//例では、側転するように表示されます。
		rotate: { x: 0, y: 0, z: 300 },
    
▼demo
		//全部指定も可能です。
		rotate: { x: 300, y: 300, z: 300 },
    
▼demo
		//左から回転しながら表示みたいな事も可能です。
        origin: 'left',
        distance: '1000px',
		rotate: { x: 0, y: 0, z: 500 },
    
▼demo
duration
値:0~
アニメーションの速度を指定できます。
ここで指定した数字が大きければ大きい程、ゆっくりとアニメーションするようになります。
		//素早くアニメーション
		duration: 500,
    
▼demo
		//ゆっくりアニメーション
		duration: 2000,
    
▼demo
delay
値:0~
アニメーション開始のタイミングをズラします。
数字が大きければ大きいほど、アニメーションの開始が遅くなります。
		//即開始
		delay: 0,
    
▼demo
		//遅れて開始
		delay: 500,
    
▼demo
opacity
値:0~1
フェードしながら表示させます。
1だとフェード無し、1未満で数字に合わせてフェードしていくようになります。
		//フェードしながら表示
		opacity: 0,
    
▼demo
		//ややフェードしながら表示
		opacity: 0.5,
    
▼demo
		//フェードせずに表示
		opacity: 1,
    
▼demo
その他にもいろいろとオプションがありますが、とりあえずここまで!
是非参考にしてくださいね。