ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

超簡単!html要素、背景画像どちらにもパララックス効果を適用できるプラグインEnllax.jsの使い方

2017年6月19日
enllax

パララックスを実装する際に、html要素、背景画像などシチュエーションによってどちらにも指定したい場合があるかと思います。
そんな時は、html要素、背景画像どちらでも超簡単にパララックスを実装できるEnllax.jsというプラグインがあるので、その使い方をご紹介したいと思います。

デモ

Enllax.jsをダウンロード

http://mmkjony.github.io/enllax.js/

スポンサードサーチ

<head>内読み込み

1
2
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.enllax.min.js"></script>

html要素、背景画像それぞれのパララックス指定方法

html要素をパララックスで動かす記述

1
2
3
<script>
  $(window).enllax({type: 'foreground'});
</script>

type: ‘foreground’を指定します。
foregroundは、「前景」という意味です。

背景画像をパララックスで動かす記述

1
2
3
<script>
  $(window).enllax({type: 'background'});
</script>

type: ‘background’を指定します。
backgroundは、馴染みがあるかと思いますが「背景」という意味です。

スポンサードサーチ

上下(垂直)方向への指定方法

data-enllax-direction=”vertical”を指定します。
verticalは、「垂直」という意味です。

下から上に移動させる方法

data-enllax-ratio をプラスの値にします。
例)data-enllax-ratio=”0.7″

上から下に移動させる方法

data-enllax-ratio をマイナスの値にします。
例)data-enllax-ratio=”-0.7″

左右(水平)方向への指定方法

data-enllax-direction=”horizontal”を指定します。
horizontalは、
「水平」という意味です。

右から左に移動させる方法

data-enllax-ratio をプラスの値にします。
例)data-enllax-ratio=”0.2″

左から右に移動させる方法

data-enllax-ratio をマイナスの値にします。
例)data-enllax-ratio=”-0.2″

ちなみに、data-enllax-ratio の値は、大きくなる程、移動速度が早くなります。
これでEnllax.jsの基本的な実装ができるかと思います。
めちゃめちゃ簡単ですね!

【参考サイト】
http://nkmrkisk.com/archives/1256

関連記事

  • 【js】サイトに埋め込んだYouTubeの一時停止ボタンをiframe外で制御する方法2017年11月30日 【js】サイトに埋め込んだYouTubeの一時停止ボタンをiframe外で制御する方法
  • 【css3】背景を斜線にするlinear-gradientの書き方2016年10月23日 【css3】背景を斜線にするlinear-gradientの書き方
  • 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法2017年4月19日 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法
  • .htaccessファイルと.htpasswdファイルを使ってBasic認証を設定する方法2017年7月3日 .htaccessファイルと.htpasswdファイルを使ってBasic認証を設定する方法
  • logo_mamp2017年5月10日 【mac】MAMPのローカル環境でルートパスを使えるようにする方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.