スクロールでじわーっと煙のように消えていく不思議エフェクト – MagicShtick Scroll –

スクロールでじわーっと煙のように消えていく不思議エフェクト – MagicShtick Scroll –

シスコ

シスコ

どうもです! ダンサー兼フロントエンドエンジニアのシスコです!

最近、コンビニのメロンパンにハマっています! なぜかは自分でもさっぱりわかりません。。。無性に食べたくなるときがあるんです。 でも、そうゆうときもありますよね。あるはずです。あってほしい。

という余談でした。。。

今回は、これいいなっ! と思ったJavaScriptエフェクトを紹介しますー! ぜひ参考にしてみてください!
※JavaScriptのライブラリではありません。

MagicShtickとは?


http://lab.shtick.be/scroll/?do=adjust

ShtickというWebサイトで見られるスクロールエフェクトです! スクロールしていくと、じんわりと画像、ロゴがフェードアウトしていく仕様となっています。 指定のプロパティを変更することで、縦横のゆらぎの強弱などを設定することができます!

上に記述したリンク先で、ジェネレーターのようにスライドバーを動かして変更を確認することができるので、遊んでみてください!

気をつける点
青いアメーバのようになっている「ADJUST SETTING」をクリックした後に画像選択をしてください! そうしないと上手く動いてくれないです……。

実際に動かしてみる!

右下の“Download The Script”から、スクロールエフェクトをダウンロードできるようになっているので、一応落としてきてみましょう!

ダウンロードフォルダ内、HeaderScroller.jsの、このコードがプロパティ値になります。

this.strengthX = 3.0725;
    this.strengthY = 15.875;
    this.animationSpeed = 5;
    this.hardness = 50;

 

プロパティの説明
  • strengthX: “横軸のゆらぐ強さ”
  • strengthY: “縦軸のゆらぐ強さ”
  • animationSpeed: “アニメーションの速度”
  • hardness: “スクロールに応じた対象要素の消えにくさ(要素の硬さ)”

上のコードで設定するとこのような感じになります!
(ちなみにローカル環境で動作を見ています!)

shtick

もし、このスクロールエフェクトを自分の公開サイトに使いたいとなったときは、フォルダ内のREADMEファイルを読み正しく扱うこと(ライセンス等)、もしくは直接開発者の人にコンタクトを取ることをお勧めします!!

まとめ

ひとつのエフェクトのみの紹介ですが、最近のグラフィック系で目を引いたものになります!
なかなかありそうでないエフェクトだったので今回これについて書きました!

自分もこれからグラフィックなどに挑戦していきたいなと思います!
一緒に頑張っていきましょう!

それでは、またまた!!!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

シスコ
シスコ フロントエンドエンジニア / 吉川 和希

Wassup!! 茶畑出身B-boy、シスコです。 好きなことは、マンガ大人買いと辛いものです! 趣味はブレイクダンスで、週一くらいで練習してます。 体が硬いのがネックなので、やわやわになりたいですね!

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL