仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

プラグインを使わないで簡単にパララックスをコーディングする方法

公開日:

WEB

プラグインを使わないで簡単にパララックスをコーディングする方法

 

以前、パララックス効果(視差効果)を用いたサイトをご紹介しました!

スクロールで動く!パララックスを使用したユニークなサイト

 

このようなかっこいいサイト、つくってみたいですよね!
パララックスの実装をするためにさまざまなプラグインが存在しますが、
今回はプラグインを使わないで、簡単に作成する方法を書いてみたいと思います。

 

作成の流れとしては

1.スクロール量を取得する
2.positionのCSSを変更して動かす

というものです。

 

 

 

デモページ

今回、私がプラグインを使わないで作成したパララックスを用いたサイトはこちら。

パララックスを使用したデモページ

夏も終わるというのにカブトムシですが。
このように、ひとつずつ動きを変えることもできます。

 

 

 

スクロール量を取得、出力する

まずはスクロール量を取得、出力してみます。
実際は出力しなくてもいいのですが、今回は表示させてみました。
jQueryを使用しているので読み込むのを忘れずに。

 

JS

 

HTML

 

 

 

positionのCSSを変更して動かす

y(スクロール量)を2で割ったり4で割ったり。
CSSのTOPの値は、割る数字を変えることによって速さも変えています。

 

JS

 

HTML

 

 

 

まとめ

以上、プラグインを使わないで簡単にパララックスをコーディングする方法をご紹介しました。
かっこいいサイトを作れるように頑張ります(*´ω`*)

 

ブログ作成者4
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00