パララックス効果を簡単に作れる parallax.js を使ってみた

本日は、小松山のコラムはお休みして、腰を痛めている中、大阪出張にきております中神からお送りいたします^^

ランディングページを作るときに背景画像にしたんだけど、ちょっと見た目のインパクトを高めたいときに使いたいparallax.jsを紹介します。

みなさまの採用ページに簡単に導入できますので、試してみてください。

 

今日は、あまりにも腰の痛みがひどいので、若干投げやりです。。。すみません><

 

パララックスって?

Webデザインにおけるパララックスとは、スクロールなどの動作に応じて、動きを付けることで立体感を出したり、奥行きを見せたりする手法のことです。おもにLPやコーポレートサイトで目を引きつけたいものの背景に置くことで

詳しくは、以下を確認してみてください。

パララックス(parallax)、直訳すると「視差」という意味です。もともと写真用語で、光学式ビューファインダーを使う際、レンズとの位置関係のズレにより、ファインダー視野と実際に撮影される画面にズレが生じる現象を指す言葉です。Webデザインにおけるパララックスは、スクロールといった動作に応じて、複数のレイヤー(層)にある視覚要素を異なるスピードで動かすことで視差を生み出し、立体感・奥行きを演出する手法のことを指します。最近では、本来の多重スクロール遠近効果の定義を超え、スクロール操作による視覚的エフェクト全般を「パララックス」と呼ぶこともありますが、本コラムではその全体を「スクロールエフェクト」と称しながら、パララックスを中心に考察していきます。

(引用)株式会社マイクロウェーブ
「パララックス」をはじめとする「スクロールエフェクト」の魅力とは
https://www.micro-wave.net/column/detail/parallax.html

 

ダウンロード

以下のサイトからソースをダウンロードしてください。

必要なのはprallax.jsのみ

設定・準備

</body>直前に以下コードを挿入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="[ parallax.jsをおいたディレクトリ ]/parallax.js"></script>

これだけ!!!!

使い方

では、使い方です。

<div class="parallax-window" data-parallax="scroll" data-image-src="[ パララックス効果をつけたい画像をおいたディレクトリ ]/image.jpg"></div>

これだけ!!!!

導入事例

こちらのサイトの「ニュース」背景部分で導入していますので、効果を確認してみてくださいね。

 

おしらせ

「宮崎でITの勉強会に参加したいけど、情報がない!」というあなたへ

宮崎IT関連勉強会という、Facebookグループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。

この記事が気に入ったら
いいね ! しよう

Twitter で
 

新卒採用をはじめるならディーレクトにご相談ください

新卒採用に踏み出せない人事担当者の方、 そのお悩み、ディーレクトが解決します!

ABOUTこの記事をかいた人

中神 大司

株式会社D-rect CTO 専務取締役。大学院在学中よりITベンチャー企業にてプログラマ・エンジニアとして活躍。有名アーティストや海外ブランドのECサイト構築に携わる。その後、株式会社インタークロスにおいて、求人サイト全てのシステム設計・構築に携わり、現在に至る。 Wordbench宮崎の主催や、職業訓練校においてプログラミングの講師を務めるなど、若手技術者の育成にも力を注いでいる。サーバーの構築を得意としており、得意な事は、粗探しとあげ足取り。