【Labs】マウスに追随する背景画像

Posted on 2016-07-08
Last updated on 22017-04-19021

こんにちは（・∀・）

今回ご紹介するサンプルは、マウスの動きに追随して背景画像や要素を動かすプラグインです。

スマホの場合はマウスの動きの代わりに端末を傾けることによって反応するセンサーによって背景画像や要素を動かすことができます。

1. マウスの動きやセンサーの動きに追随して動く要素

マウスの動きやセンサーの動きに追随して背景画像や要素が動くサンプルです。今回使用するプラグインにはNative JavaScriptの通常版とjQuery版があります。今回は通常版を使用します。

サンプル

parallax.min.jsを使用します。
ダウンロードしてHTMLの<head>内に読み込みます。
https://github.com/wagerfield/parallax


<script src="parallax.min.js"></script>

HTML


<div class="sample-demo">
<ul id="demo" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="25" data-scalar-y="15">
<li class="layer" data-depth="0.10"><div class="bg"></div></li>
<li class="layer" data-depth="0.40"><div class="bg2"></div></li>
<li class="layer" data-depth="0.70"><div class="img"><img src="3.png"></div></li>
<li class="layer" data-depth="1.00"><div class="txt">www.webdlab.com/</div></li>
</ul>
<!--sample-demo--></div>

data-friction-xは横方向の抵抗です。0.0～1.0の範囲で指定できます。
data-friction-yは縦方向の抵抗です。0.0～1.0の範囲で指定できます。
どちらも値が小さいとゆっくりスムースな動きになります。
data-scalar-xは横方向の移動距離を指定します。指定できる値は数値で、範囲は0～です。
data-scalar-yは縦方向の移動距離を指定します。指定できる値は数値で、範囲は0～です。

どちらも値が大きいと動く範囲が長くなります。

動かしたい要素にdata-depth属性を記述し、クラスlayerも記述します。data-depthの値は0.00～1.00まで指定できます。値の数値が大きいと動く距離も多くなります。表示される順番は後から記述した要素が一番上に表示されます。

CSS


.sample-demo {
  margin: 0 0 40px 0;
  padding: 0;
}
.sample-demo #demo {
  height: 500px;
  position: relative;
  overflow: hidden;
}
.sample-demo #demo li {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}
.sample-demo #demo li .bg {
  background: url(1.png) no-repeat;
  background-size: cover;
  bottom: 0;
  position: absolute;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
}
.sample-demo #demo li .bg2 {
  background: url(2.png) no-repeat;
  background-size: cover;
  bottom: 0;
  position: absolute;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
}
.sample-demo #demo li .img {
  text-align: center;
}
.sample-demo #demo li .txt {
  text-align: center;
  margin-top: 15%;
  color: #fff;
}

JavaScript

次のコードを</body>の直前に記述します。


<script>
var demo = document.getElementById("demo");
var parallax = new Parallax(demo);
</script>

このプラグインには通常のJavaScript版の「parallax.min.js」とjQuery版の「jquery.parallax.min.js」が選べるようにJSファイルが同梱されています設置する際はお間違えの無いようご注意ください。

Result

サンプルデモはこちら

サンプルは通常のJavaScript版です。

ちなみにjQuery版で組み込みたい場合の設置方法は次の通りです。

jQueryを使用するのでHTMLの<head>内にjQuery 1.x snippetを入力します。
Google Hosted Libraries


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jquery.parallax.min.jsも使用します。
こちらはダウンロードして同じくHTMLの<head>内に読み込みます。
https://github.com/wagerfield/parallax


<script src="jquery.parallax.min.js"></script>

次のコードを</body>の直前に記述します。


<script>
$(function() {
$("#demo").parallax();
});
</script>

HTMLとCSSは通常版を参考にしてください。CSSは多少調整が必要です。

当サンプルでは、背景画像を2つ、画像を１つ、それとテキストを記述してある要素を動かしています。この辺はご自由に調整してみてください。

2. マウスの動きやセンサーの動きに追随して動く要素のフルスクリーン版

マウスの動きやセンサーの動きに追随して背景画像や要素が動くサンプルのフルスクリーン版です。今回も同じく使用するプラグインは通常版のJavaScriptを使用します。

サンプル

parallax.min.jsを使用します。
ダウンロードしてHTMLの<head>内に読み込みます。
https://github.com/wagerfield/parallax


<script src="parallax.min.js"></script>

HTML


<div class="sample-demo">
<ul id="demo2" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="25" data-scalar-y="15">
<li class="layer" data-depth="0.10"><div class="bg"></div></li>
<li class="layer" data-depth="0.40"><div class="bg2"></div></li>
<li class="layer" data-depth="0.70"><div class="img"><img src="3.png"></div></li>
<li class="layer" data-depth="1.00"><div class="txt">www.webdlab.com/</div></li>
</ul>
<!--sample-demo--></div>

CSS


h1 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
#copyright {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;
  color: #fff;
}
.sample-demo #demo2 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
}
.sample-demo #demo2 li {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}
.sample-demo #demo2 .bg {
  background: url(1.png) no-repeat;
  background-size: cover;
  bottom: 0;
  position: absolute;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
}
.sample-demo #demo2 .bg2 {
  background: url(2.png) no-repeat;
  background-size: cover;
  bottom: 0;
  position: absolute;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
}
.sample-demo #demo2 .img {
  text-align: center;
}
.sample-demo #demo2 .txt {
  text-align: center;
  margin-top: 20%;
  lor: #fff;
}

JavaScript

次のコードを</body>の直前に記述します。


<script>
var demo = document.getElementById("demo2");
var parallax = new Parallax(demo2);
</script>

Result

サンプルデモはこちら

サンプルは通常のJavaScript版です。

こちらも同じくjQuery版で組み込みたい場合の設置方法は次の通りになります。

jQueryを使用するのでHTMLの<head>内にjQuery 1.x snippetを入力します。
Google Hosted Libraries


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jquery.parallax.min.jsも使用します。
こちらはダウンロードして同じくHTMLの<head>内に読み込みます。
https://github.com/wagerfield/parallax


<script src="jquery.parallax.min.js"></script>

次のコードを</body>の直前に記述します。


<script>
$(function() {
$("#demo2").parallax();
});
</script>

HTMLとCSSは通常版を参考にしてください。こちらもCSSは多少調整が必要です。

サンプル2でも同じく、背景画像を2つ、画像を１つ、それとテキストを記述してある要素を動かしています。こちらもその辺はご自由に調整してみてください。

いかがでしたか、使い道は❓ですが、デザイン次第ではキャッチーな格好の良いコンテンツを作ることができそうですね。

【Labs】CSSだけでアニメーションするリンクボタン【Labs】CSS3でグラデーションの背景色をジワジワと変更する

9月更新・前月(8月)の人気記事トップ10 09/02/2024