ScrollMagicはスクロールする度に文字や画像をフェードインやスピン等のアニメーションさせる事が出来ます。ScrollMagicはSuperScrolloramaの後継に当たるjQueryのプラグインです。
本ページではScrollMagicのダウンロード方法や使い方について説明しています。
ScrollMagicはスクロールすると文字を変形させたり、フェードイン、スピン等させる事が出来ます。以下は最初何も表示されていませんが、スクロールすると各動作をしながら文字が出てきます。
フェードイン 段々色が濃くなります
スピン 回転しながら表示されます
スクロールすると文字がバラバラに動作する
又、以下のように最初は何も表示されていなくてスクロールすると画像をアニメーションさせながら表示させる事も出来ます。
ScrollMagicはMIT LisenceとGPLというライセンスを採用していて、自由にダウンロードして無料で利用出来ます。
ScrollMagicはTweenMaxも利用しています。こちらも個人の趣味のサイトで特に有償やログインを求めないホームページであれば通常は無料で利用できます。
ScrollMagicのダウンロードは「ScrollMagic」から必要なファイルをダウンロードして使います。
ダウンロードは画面右下の「Download ZIP」をクリックすると一括でダウンロード出来ます。ダウンロード後は圧縮されているため、解凍が必要です。
解凍したファイルの中には以下が含まれています。
アップロード後、「jQueryの利用」でプラグインを利用出来るようになっている場合は<head>と</head>の間に以下の記述を追加してアップロードしたファイルを読み込ませます。
<script src="js/TweenMax.min.js"></script> <script src="js/jquery.scrollmagic.min.js"></script>
赤字部分はJavaScriptを保存したディレクトリやファイル名に合わせて修正して下さい。
フェードインさせるためには<head>と</head>の間に以下の記述を追加します。
<script>
$(document).ready(function() {
var controller = new ScrollMagic();
new ScrollScene({
triggerElement: '#fade-it'
})
.setTween(TweenMax.from( '#fade-it', 5, {
opacity: 0
}))
.addTo(controller);
});
</script>
fade-itとありますが、これが独自定義になります。赤字部分がアニメーションを行うTweenMaxの定義の始まりを示し、fromとあるため最初にページが表示された時の状態をこの後の()内で定義します。
青字部分はアニメーションが継続する時間を秒で記述します。数字を小さくするとアニメーションが速くなり、数字を大きくするとアニメーションが遅くなります。0.5等の少数も使えます。
緑の部分は先にfromで最初の状態を定義する事にしたため、ここでその状態を定義します。opacity: 0は透明を示すため、ページが表示された時は文字が表示されません。アニメーションでScrollMagicを使わない時の表示に戻っていきます。つまり、元々のCSS等で文字を消すようにしていなければ文字が浮かび上がってきます。
赤字部分をTweenMax.toと指定すると最後の状態を示すため、段々透明になってフェードアウトします。
<body>と</body>の間には実際に配置する部分にidで独自定義を指定して記述すると、記述した部分までスクロールするとフェードインが開始されます。
<p id="fade-it">フェードイン 段々色が濃くなります</p>
アニメーションの開始位置を変更したい場合は【フェードインさせるためのhead内スクリプト例】で示したtriggerElementの前にoffset: 140,等と追加します。140の部分の数字が小さいとすぐにフェードインが開始され、数字が大きいと暫くスクロールしてからアニメーションが開始されます。
又、アニメーションを終わりまで自動で動作させるのではなく、スクロールに従って動作させるようにするにはtriggerElementの前にduration: 200,等と追加します。数字が大きい程スクロールしてもゆっくり変化し、数字が小さい程少しスクロールしただけでアニメーションが終わります。0にしたり省略すると、開始位置からスクロールしなくてもアニメーションが最後まで自動的に動作します。
上記は<p>タグで利用していますが、<h1>等他のタグでも利用可能です。又、id部分はスクリプトと合わせる事で自由な名前で定義可能です。赤字部分は表示したい文字を記述して下さい。
スピンはTweenMax部分の動作を変えるだけです。
<script>
$(document).ready(function() {
var controller = new ScrollMagic();
new ScrollScene({
triggerElement: '#spin-it'
})
.setTween(TweenMax.from( '#spin-it', 5, {
opacity: 0,
rotation: 720
}))
.addTo(controller);
});
</script>
赤字部分が追加になっていて回転の角度を示します。360を指定すると360°で1回転、上の例では720を指定しているため2回転する事になります。
フェードインと同様に<body>と</body>の間で実際に配置する部分に以下のように記述するとスピンします。
このようにTweenMaxではプロパティを指定する事でアニメーションを簡単に定義出来ます。詳細は「SuperScrolloramaの使い方」の「Tweening CSS properties」をご参照下さい。
文字をバラバラに動作させるにはLettering.jsを使う方法があります。
Lettering.jsは「Lettering.js」の画面右下「Download ZIP」をクリックする事でダウンロード出来ます。
ダウンロードしたファイルを解凍し、jquery.lettering.jsファイルをサーバーのJavaScriptを配置するディレクトリにアップロードします。又、<head>と</head>の間に以下の記述を追加してLettering.jsを読み込みます。
<script src="js/jquery.lettering.js"></script>
実際のスクリプトは<head>と</head>の間に以下の記述を追加します。
<script>
$(document).ready(function() {
$('#example').lettering().find('span') .css('position','relative').each(function() {
var controller = new ScrollMagic();
new ScrollScene({
triggerElement: '#example',
})
.setTween(TweenMax.from( $(this), 3, {
left:Math.random()*800-400,
top:Math.random()*600-300,
opacity:0,
ease:Elastic.easeOut
},1))
.addTo(controller);
});
});
</script>
赤字部分でLettering.jsを使って1文字1文字をバラバラに動作させるように定義しています。
TweenMax.fromなので最初の状態としてtopやleftをランダムに指定し、文字がバラバラの位置から表示が開始されるようにしています。
青字のease:Elastic.easeOut部分でアニメーションの最後に揺れるようなアニメーション効果を追加しています。アニメーション効果は他にも多数あります。詳細は「SuperScrolloramaの使い方」の「アニメーション効果」をご参照下さい。
<body>と</body>の間には実際に配置する部分にidで独自定義を指定して記述すると記述した部分がバラバラに動作します。
<p id="example">スクロールすると文字がバラバラに動作する</p>
画像をアニメーションさせながら表示させる時は<head>と</head>の間に以下の記述を追加します。
<script>
$(document).ready(function() {
$('.example2 img').css('position','relative').each(function() {
var controller = new ScrollMagic();
new ScrollScene({
triggerElement: '.example2',
})
.setTween(TweenMax.staggerFrom( $(this), 3, {
left:Math.random()*800-400,
top:0,
opacity:0,
ease:Elastic.easeOut
},0.5))
.addTo(controller);
});
});
</script>
赤字部分で各画像が個別に動作するよう定義しています。文字と違ってimgタグで判断してバラバラに動作させる事が出来るため、Lettering.jsは使っていません。
left、topで開始位置を指定し、アニメーション効果を追加している部分は「文字をバラバラに動作」で説明したのと同じです。
<body>と</body>の間には実際に配置する部分に以下のように記述すると記述した部分が変化します。
<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で回り込ませて下さい。
以下のようにColorBoxと組み合わせる事も出来ます。
スクロールしていくにつれてアニメーションさせながら画像が表示され、各画像をクリックするとColorBoxを使って拡大して表示されます。
やり方は、まずScrollMagicと合わせてColorBoxのスタイルシートとJavaScriptも読み込みます。次に、以下のように<img>タグの前にColorBoxで説明したグループ分けのクラスを使った<a>タグを記述、<img>タグの後に</a>で閉じます。
<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の使い方」をご参照下さい。
パソコン等で参照されている場合、左サイドバーの画像がスクロールに従って移動していると思います。スマートフォン等では左サイドバーが表示されていないと思いますが、スクロールに追従して画像が移動出来ると考えて下さい。
このようにするには<head>と</head>の間に以下の赤字部分記述を追加します。
<script>
$(document).ready(function() {
var controller = new ScrollMagic();
new ScrollScene({
triggerElement: '#scroll-center'
})
.setPin("#scroll-center")
.addTo(controller);
});
</script>
HTMLファイルの最初に記述する<!DOCTYPE html>を省略しないようにする必要があります。
<body>と</body>の間には実際に配置する部分にidで独自定義を指定して記述します。
<p id="scroll-center"><img src="画像ファイル名" alt="画像の説明" /></p>
記述した部分までスクロールすると画像の移動が開始されます。
赤字部分は表示する画像に合わせて記述して下さい。又、画像ではなくテキストでも同様に固定する事が出来ます。
尚、画像を移動する開始位置を変えたい場合は、【画像をディスプレイ上下真ん中で固定するためのhead内スクリプト例】で示したtriggerElementの前にoffset: 300,等と追加します。数字が大きい程ディスプレイ上の方で固定され、-300等と指定すると下の方で固定されます。
