スクロールに応じてコンテンツにエフェクト効果をつける　- scrolldeck –

スクロールに応じてコンテンツにエフェクト効果をつける　- scrolldeck –

今回はスクロール関係のプラグインを試してみたので、そちらの説明をさせていただきます。

scrolldeck.jsというプラグインなのですが、

こちらはscrolloramaというプラグインがもともとあって、それを利用したもののようです。

プラグインのプラグインみたいな感じなんでしょうか。

同じスクロール効果のプラグインですが

scrolloramaが、スクリプトで、アニメーションの速さや効果、開始時、終了時を設定しないといけないのに対し、

scrolldeckは、クラスに決められたスタイルを指定し、「data-animation」というdata属性を使用し、動きを指定するだけでOKという形です。

（HTML5ですのでご注意ください！）

デモを作成したので、よろしければご覧ください。

scrolldeckの使い方

head内に以下のソースを読み込み、

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/fix.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.scrollorama.js"></script> <script src="js/jquery.scrolldeck.js"></script>

1
2
3
4
5

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/fix.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/jquery.scrolldeck.js"></script>

bodyの閉じタグの前に、

JavaScript

<script> $(document).ready(function() { var deck = new $.scrolldeck({ buttons: '.nav-button', easing: 'easeInOutExpo' }); }); </script>

1
2
3
4
5
6
7
8
9
10

<script>
$(document).ready(function() {

var deck = new $.scrolldeck({
buttons: '.nav-button',
easing: 'easeInOutExpo'
});

});
</script>

を記載し、

HTMLは、コンテンツ毎に、

XHTML

<div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div>

1
2
3
4

<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>

とします。

この場合、ダウンロードしたファイルのstlye.cssの.slideの部分をコピーしたほうが良いと思います。

あとは、効果を付けたい箇所は、以下のようにします。上記divの中に記載します。

XHTML

フェードイン <div class=animate-in" data-animation="fade-in"></div> 拡大から通常へ <div class=animate-in" data-animation="space-in"></div> 右からスライドイン <div class=animate-in" data-animation="fly-in-right"></div> 左からスライドイン <div class=animate-in" data-animation="fly-in-left"></div> １から順番に表示※画面が固定されます。上記のdata属性を指定することも可能 <div data-build="1" class="animate-build"></div> <div data-build="2" class="animate-build"></div> <div data-build="3" class="animate-build"></div>

1
2
3
4
5
6
7
8
9
10
11
12

フェードイン
<div class=animate-in"  data-animation="fade-in"></div>
拡大から通常へ
<div class=animate-in"  data-animation="space-in"></div>
右からスライドイン
<div class=animate-in"  data-animation="fly-in-right"></div>
左からスライドイン
<div class=animate-in"  data-animation="fly-in-left"></div>
１から順番に表示※画面が固定されます。上記のdata属性を指定することも可能
<div data-build="1" class="animate-build"></div>
<div data-build="2" class="animate-build"></div>
<div data-build="3" class="animate-build"></div>

demoの説明をさせていただきます。

javascriptは、上記のものと同じなので割愛します。

Author Profile

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

Gulpを使ったプロジェクトの基本設定とSass導入手順

Difyを用いたチャットボットを作成してみた

Cloudflare Workersの実践的サンプルの紹介