本日は、小松山のコラムはお休みして、腰を痛めている中、大阪出張にきております中神からお送りいたします＾＾
ランディングページを作るときに背景画像にしたんだけど、ちょっと見た目のインパクトを高めたいときに使いたい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グループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。
