menu
menu

マウスに追随する背景画像 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook28
  • はてなブックマーク5
  • Google+1
  • Pocket0
  • Twitter0

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

  • Labs

JavaScript

こんにちは(・∀・)

 今回ご紹介するサンプルは、マウスの動きに追随して背景画像や要素を動かすプラグインです。スマホの場合はマウスの動きの代わりに端末を傾けることによって反応するセンサーによって背景画像や要素を動かすことができます。

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

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

サンプルデモ

サンプルデモはこちら!

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


HTML

 <head>内にhttps://github.com/wagerfield/parallaxからダウンロードしたparallax.min.jsを読み込みます。


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

<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 {
	width: 100%;
	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ファイルが同梱されています設置する際はお間違えの無いようご注意ください。


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

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


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

 それとあわせてhttps://github.com/wagerfield/parallaxからjquery.parallax.min.jsをダウンロードして<head>内に同じく読み込みます。


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

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


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

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


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


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

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

サンプルデモ

サンプルデモはこちら!

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


HTML

 <head>内にhttps://github.com/wagerfield/parallaxからダウンロードしたparallax.min.jsを読み込みます。


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

<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%;
	color: #fff;
}
JavaScript

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


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

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

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


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

 それとあわせてhttps://github.com/wagerfield/parallaxからjquery.parallax.min.jsをダウンロードして<head>内に同じく読み込みます。


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

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


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

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


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


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

  • カテゴリー:Labs
  • facebook28
  • はてなブックマーク5
  • Google+1
  • Pocket0
  • Twitter0