WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

  • 中
  • 大

くりりん

2018/08/30

超軽量！スクロールアニメーションスクリプト Delighters

投稿者： くりりん
カテゴリー： プログラム >JavaScript

コンテンツが横からスライドしたり、コンテンツが追従するように表示されたり、スクロールに合わせてCSSアニメーションを実装できるスクリプトをご紹介します。

Delightersについて

DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。

  • 超軽量

    1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。

  • フレームワークにとらわれない

    React、VueJS、Angular、jQueryなど、フレームワークにとらわれずに動作します。

  • レスポンシブに完全対応

    スマホ・タブレット・デスクトップ、さまざまなデバイス・さまざまなサイズに対応しています。

  • フレキシブル

    さまざまな要素にアニメーションを適用できます。

  • 宣言的

    CSSで定義したデフォルトのスタイル、スタート時のスタイル、エンド時のスタイル間を繋ぐアニメーションが指定できます。

実際にデモページを見てみましょう。
Delighters

スクロールをしていくとコンテンツが様々な方向から出てきます。
こういった動きを入れると重たくなりがちですが、超軽量スクリプトなので気にせず使えます！
では続いてDelightersの使い方です。

使い方

1.JSファイルの読み込み

まず、Delighters -GitHubからファイルをダウンロードし、jsファイルを読み込みます。

<head>
  <script type="text/javascript" src="delighters.js">
</head>

2.HTMLの記述

HTMLはアニメーションを与える要素に「data-delighter」を加えるだけです。

<div class="content" data-delighter>testtest</div>

3.アニメーションの設定

アニメーションはCSSで設定していきます。
要素に基本のスタイルを定義し、アニメーションのスタート時とエンド時のスタイルを定義します。
.delighter, .started, .endedはスクロール時に自動で適用されます。

/* 基本のスタイル */
   .content.delighter {
      transition: all .3s ease-out;
      transform: translateX(-100%);
      opacity: 0;
   }
 
/* スタート時のスタイル */
   .content.delighter.started {
      transform: none;
      opacity: 1;
   }
 
/* エンド時のスタイル */
   .content.delighter.started.ended {
      border: solid red 10px;
   }

動作の仕組みについて

delighters.jsのファイルの中を見てみましょう。
下記の記述が出てきます。

options = {
    attribute:  'data-delighter',
    classNames: ['delighter', 'started', 'ended'],
    start:      0.75, // default start threshold
    end:        0.75, // default end threshold
    autoInit:   true  // initialize when DOMContentLoaded
  }

Delighters.jsは、ユーザーがスクロールした時にclassを切り替え、要素がブラウザのビューポートの高さの75％を上回ると、.startedが適用され、要素の下部が75％を過ぎると、.endが適用されます。
この値を変更することで動きの見え方を変える事ができます。

まとめ

スクロール時のアニメーションするスクリプトは色々とありますが、軽さを求める方にぜひおすすめしたいスクリプトです。
デモページが参考になるので、まずはダンロードして使ってみてくださいね。

コーディング業務のご依頼、ご相談の詳細についてはこちらから

Webコーディング代行サービス　クイックアシスト

最後までお読みいただき、ありがとうございました。

お仕事のご相談やご依頼はお気軽にお問い合わせはこちら

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam！qam（カム）はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ（コーディング）、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ