ヤビブロ

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

ヤビブロ

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

iPhone(ios)対応!background-attachment: fixed;の代用で背景画像にパララックス効果を適用する方法 – jQuery

2018年5月13日
logo_jquery

メインビジュアルにbackground-attachment: fixed;で背景画像を固定しパララックス効果を実装することがあるかと思いますが、iPhone(ios)だとバグがおきて思うように動かないということがありました。

その問題を解決すべく、PC時はこれまで通りbackground-attachment: fixed;を使い、スマホ時にはjQueryで代用するサンプルを作ってみました。

完全再現ではない(スマホ時の背景移動範囲に制限)ですが、このサンプルだとiPhone(ios)でも問題なくパララックス効果を実装できるので、もしよければお使いください。

background-attachment: fixed;の代用パララックス効果のデモ

https://hiroyayabiku.github.io/background-attachment-substitution/

スポンサードサーチ

background-attachment: fixed;の代用パララックス効果をダウンロード

https://github.com/HiroyaYabiku/background-attachment-substitution

html

1
<div class="js-parallax"></div>

スポンサードサーチ

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.js-parallax {
width: 100%;
height: 300px;
  margin: 0 auto 1500px;
background: url(./img/img01.jpg) no-repeat center top;
text-align: center;
background-attachment: fixed;
}
@media screen and (max-width: 750px) {
.js-parallax {
background-size: cover;
background-attachment: scroll;
}
}

JQuery

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var parallaxBkImg = function(){
   $(window).on('load resize', function() {
     $(window).on('load scroll', function(){
       var $winTop = $(window).scrollTop();
       var $target = $('.js-parallax');
       var $winWidth = $(window).width();
       if($winWidth < 750) {
         $target.each(function(index){
           var $position = $winTop - $target.eq(index).offset().top;
           if($winTop > $target.eq(index).offset().top - 800) {
             $target.eq(index).css({
               'background-position-y': $position * .4
             });
           }
         });
       }
     });
   });
}();

関連記事

  • 【jQuery】スマホ時にトップへ戻るボタンの表示非表示が一瞬チラつく場合の対処法2017年11月1日 【jQuery】スマホ時にトップへ戻るボタンの表示非表示が一瞬チラつく場合の対処法
  • コピペでOK! jQueryで上下連動タブの切り替えをする方法2019年1月27日 コピペでOK! jQueryで上下連動タブの切り替えをする方法
  • 【jQuery】要素にランダムかつ重複なしにクラスを付与する方法2019年1月27日 【jQuery】要素にランダムかつ重複なしにクラスを付与する方法
  • 【jQuery】スライドショーとポップアップ(モーダル)を両方使用し、作成したサンプル2017年11月11日 【jQuery】スライドショーとポップアップ(モーダル)を両方使用し、作成したサンプル
  • 【jQueryプラグイン】スクロールバーの太さ、色などをカスタマイズできるプラグイン ※mCustomScrollbar2016年8月12日 【jQueryプラグイン】スクロールバーの太さ、色などをカスタマイズできるプラグイン ※mCustomScrollbar

スポンサードリンク

  • 最近の投稿

    • 【基礎】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.