SuperScrolloramaの使い方
SuperScrolloramaはスクロールする度に文字や画像をフェードインやスピン等のアニメーションさせる事が出来ます。SuperScrolloramaはjQueryのプラグインです。
本ページではSuperScrolloramaのダウンロード方法や使い方について説明しています。
SuperScrolloramaの概要
SuperScrolloramaはスクロールすると文字を変形させたり、フェードイン、スピン等させる事が出来ます。以下は最初何も表示されていませんが、スクロールすると各動作をしながら文字が出てきます。
フェードイン 段々色が濃くなります
スピン 回転しながら表示されます
スクロールすると文字がバラバラに動作する
又、以下のように最初は何も表示されていなくてスクロールすると画像をアニメーションさせながら表示させる事も出来ます。
SuperScrolloramaはMIT LisenceとGPLというライセンスを採用していて、自由にダウンロードして無料で利用出来ます。
SuperScrolloramaはTweenMaxも利用しています。こちらも個人の趣味のサイトで特に有償やログインを求めないホームページであれば通常は無料で利用できます。
SuperScrolloramaのダウンロードと導入準備
SuperScrolloramaのダウンロードは「SUPERSCROLLORAMA」でDownloadの下のファイルをクリックして行います。ダウンロード後は圧縮されているため解凍が必要です。
解凍したファイルの中には以下が含まれています。
- ・js\jquery.superscrollorama.js
- SuperScrolloramaのJavaScriptです。サーバーのJavaScriptを配置するディレクトリにアップロードします。
- ・js\greensock\TweenMax.min.js
- TweenMaxのJavaScriptです。サーバーのJavaScriptを配置するディレクトリにアップロードします。
- ・js\jquery.lettering-x.x.x.min.js
- 必須ではありませんが文字をバラバラに動かすにはLettering.jsを利用すると便利です。サーバーのJavaScriptを配置するディレクトリにアップロードします。
アップロード後、「jQueryの利用」でプラグインを利用出来るようになっている場合は<head>と</head>の間に以下の記述を追加してアップロードしたファイルを読み込ませます。
【SuperScrolloramaを利用するためのhead内記述例】
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.lettering-x.x.x.min.js"></script>
<script src="js/jquery.superscrollorama.js"></script>
赤字部分はJavaScriptを保存したディレクトリやファイル名に合わせて修正して下さい。
フェードイン
フェードインさせるためには<head>と</head>の間に以下の記述を追加します。
【フェードインさせるためのhead内スクリプト例】
<script>
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween('#fade-it',TweenMax.from( $('#fade-it'), 5, {
opacity: 0
}));
});
</script>
fade-itとありますが、これが独自定義になります。赤字部分がアニメーションを行うTweenMaxの定義の始まりを示し、fromとあるため最初にページが表示された時の状態をこの後の()内で定義します。
青字部分はアニメーションが継続する時間を秒で記述します。数字を小さくするとアニメーションが速くなり、数字を大きくするとアニメーションが遅くなります。0.5等の少数も使えます。
緑の部分は先にfromで最初の状態を定義する事にしたため、ここでその状態を定義します。opacity: 0は透明を示すため、ページが表示された時は文字が表示されません。アニメーションでSuperScrolloramaを使わない時の表示に戻っていきます。つまり、元々のCSS等で文字を消すようにしていなければ文字が浮かび上がってきます。
赤字部分をTweenMax.toと指定すると最後の状態を示すため、段々透明になってフェードアウトします。
<body>と</body>の間には実際に配置する部分にidで独自定義を指定して記述すると、記述した部分までスクロールするとフェードインが開始されます。
【フェードインさせるためのbody内html例】
<p id="fade-it">フェードイン 段々色が濃くなります</p>
アニメーションを開始する位置を変更したい場合は【フェードインさせるためのhead内スクリプト例】で示した緑の部分のopacity: 0}));部分を書き換えてopacity: 0}),0,140);のように記述します。140の部分の数字が小さいとすぐにフェードインが開始され、数字が大きいと暫くスクロールしてからアニメーションが開始されます。
上記は<p>タグで利用していますが、<h1>等他のタグでも利用可能です。又、id部分はスクリプトと合わせる事で自由な名前で定義可能です。赤字部分は表示したい文字を記述して下さい。
スピン
スピンさせるためには<head>と</head>の間に以下の記述を追加します。
【スピンさせるためのhead内スクリプト例】
<script>
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), 3, {
opacity:0,
rotation: 720
}));
});
</script>
定義方法はフェードインと同じですが、赤字部分が追加になっていて回転の角度を示します。360を指定すると360°で1回転、上の例では720を指定しているため2回転する事になります。
フェードインと同様に<body>と</body>の間で実際に配置する部分に以下のように記述するとスピンします。
【スピンさせるためのbody内html例】
<p id="spin-it">スピン 回転しながら表示されます</p>
Tweening CSS properties
フェードインやスピンで示したように簡単なアニメーションであれば、TweenMaxの後の{}で囲まれた部分を書き換えるのと速度の部分を書き換えるだけで出来ます。
{}内のopacity等はTweenMaxで用意されたCSSプロパティです。他にも沢山ありますが、以下に一部を記載します。
【Tweening CSS properties一覧】
プロパティ |
指定例 |
結果 |
color |
color:"#FFF" |
テキスト色の変更 |
fontSize |
fontSize:"30px" |
フォントサイズ変更 |
width |
width:"100px" |
幅の変更 |
height |
height:"300px" |
高さの変更 |
marginLeft |
marginLeft:"100px" |
外側左余白の変更 |
marginRight |
marginRight:"100px" |
外側右余白の変更 |
marginTop |
marginTop:"100px" |
外側上余白の変更 |
marginBottom |
marginBottom:"100px" |
外側下余白の変更 |
paddingLeft |
paddingLeft:"100px" |
内側左余白の変更 |
paddingRight |
paddingRight:"100px" |
内側右余白の変更 |
paddingTop |
paddingTop:"100px" |
内側上余白の変更 |
paddingBottom |
paddingBottom:"100px" |
内側下余白の変更 |
backgroundColor |
backgroundColor:"#000" |
背景色の変更 |
例としてはbackgroundColor、paddingLeft、marginLeftを指定すると、以下のように背景色が変わりながら左外側と左内側の余白の大きさが変わります。
背景色と余白が変わります
文字をバラバラに動作
文字をバラバラに動作させるためには<head>と</head>の間に以下の記述を追加します。
【バラバラに動作させるためのhead内スクリプト例】
<script>
$(document).ready(function() {
var controller = $.superscrollorama();
$('#example').lettering().find('span') .css('position','relative').each(function() {
controller.addTween('#example', TweenMax.from( $(this), .25,{
delay:Math.random()*.2,
left:Math.random()*1200-600,
top:Math.random()*600-300,
opacity:0
}),
200,160);
});
});
</script>
赤字部分でLettering.jsを使って1文字1文字をバラバラに動作させるように定義しています。
TweenMax.fromなので青字部分は最初の状態を定義しています。topやleftをランダムに指定し、文字がバラバラの位置から表示が開始されるようにしています。
緑部分の200は200pxスクロールするとアニメーションを完了させる事を示しています。数字が大きい程スクロールしてもゆっくり変化し、数字が小さい程少しスクロールしただけでアニメーションが終わります。ここを0にしたりフェードインやスピンの時のように省略すると、開始位置からスクロールしなくてもアニメーションが最後まで自動的に動作します。160はフェードインで説明したアニメーションの開始位置です。
<body>と</body>の間には実際に配置する部分にidで独自定義を指定して記述すると記述した部分がバラバラに動作します。
【変化させるためのbody内html例】
<p id="example">スクロールすると文字がバラバラに動作する</p>
画像をアニメーションさせながら表示
画像をアニメーションさせながら表示させるためには<head>と</head>の間に以下の記述を追加します。
【画像をアニメーションさせながら表示させるためのhead内スクリプト例】
<script>
$(document).ready(function() {
var controller = $.superscrollorama();
$('.example2 img').css('position','relative').each(function() {
controller.addTween('.example2', TweenMax.from( $(this), 2,{
delay:Math.random()*.2,
left:Math.random()*200-100,
top:Math.random()*200-100,
opacity:0,
ease:Elastic.easeOut
}));
});
});
</script>
赤字部分で各画像が個別に動作するよう定義しています。文字と違ってimgタグで判断してバラバラに動作させる事が出来るため、Lettering.jsは使っていません。
left、topにより開始位置等をランダムで指定している部分は「文字をバラバラに動作」で示したのと同じです。
青字のease:Elastic.easeOut部分でアニメーションの最後に揺れるようなアニメーション効果を追加しています。
<body>と</body>の間には実際に配置する部分に以下のように記述すると記述した部分が変化します。
【画像をアニメーションさせながら表示させるためのbody内html例】
<div class="example2">
<img src="画像ファイル名1" width="xxx" height="yyy" alt="画像1"/>
<img src="画像ファイル名2" width="xxx" height="yyy" alt="画像2"/>
<img src="画像ファイル名3" width="xxx" height="yyy" alt="画像3"/>
・・・
</div>
画像を横に並べる場合は必要に応じてfloatで回り込ませて下さい。
アニメーション効果
画像のアニメーションで示した追加効果はease:Elastic.easeOut以外にも沢山あり、画像だけでなくテキストにも適用出来ます。以下に例を示します。開始ボタンをクリックすると各効果を参照出来ます。
ColorBoxとの組み合わせ
以下のようにColorBoxと組み合わせる事も出来ます。
スクロールしていくにつれてアニメーションさせながら画像が表示され、各画像をクリックするとColorBoxを使って拡大して表示されます。
やり方は、まずSuperScrolloramaと合わせてColorBoxのスタイルシートとJavaScriptも読み込みます。次に、以下のように<img>タグの前にColorBoxで説明したグループ分けのクラスを使った<a>タグを記述、<img>タグの後に</a>で閉じます。
【ColorBoxと組み合わせたhtml例】
<div class="example2">
<a class="group1" href="画像ファイル名1" title="タイトル1">
<img src="画像ファイル名1" width="xxx" height="yyy" alt="画像1"/>
</a>
<a class="group1" href="画像ファイル名2" title="タイトル2">
<img src="画像ファイル名2" width="xxx" height="yyy" alt="画像2"/>
</a>
<a class="group1" href="画像ファイル名3" title="タイトル3">
<img src="画像ファイル名3" width="xxx" height="yyy" alt="画像3"/>
</a>
・・・
</div>
これでColorBoxが同時に使えるようになります。
ColorBoxの詳細は「Colorboxの使い方」をご参照下さい。