疑似要素に設定したbg画像を切り替えたいです。画面3では別の画像にしたいです。
<div class="para parallax-bg img-bg-04"></div>の部分にきたら .img-bg-01::beforeを background: url(../img/bg1.jpg) 50% 100% no-repeat; から background: url(../img/bg3.jpg) 50% 100% no-repeat; にしたいです。「jQueryを利用して特定の位置に来たらイベントを発火させる」を見て以下を書きましたが動かないです。
書き方が違うのでしょうか。要はパララックス風を作成したのですが、background:attechmentが使えないので疑似要素に背景指定しているのですが、複数あるのでJSで切り替えしないといけなくなった次第です。
以下がHTMLです。
<div class="content"> <div class="para parallax-bg img-bg-01"> <!--<section data-delighter class="splash"> <p data-delighter class="head01 bottom">魅惑 禁断のオフィスラブ</p> <h2 data-delighter class="bottom"> 面接プレイ</h2> <p data-delighter class="head02 bottom">応接室で権力を駆使して面接</p> </section> --> </div><!-- /img-bg-01 --> <!-- /img-bg-01 END --> <div class="para parallax-bg img-bg-02"> <div class="outer"> </div><!-- /outer --> </div><!-- /img-bg-02 --> <!-- /img-bg-02 END --> <div class="para parallax-bg img-bg-03"> <div class="outer"> <!-- <div class="ser_image"><img src="img/ser1.jpg" alt="面接プレイ"></div>--> <h3 class="mar-t5">面接プレイとは</h3> <div class="box_intro"> </div><!-- /box_intro --> <div class="box_text"> </div><!-- /box_text --> </div><!-- /outer --> </div><!-- /img-bg-03 --> <!-- /img-bg-03 END --> <div class="para parallax-bg img-bg-04"> <section data-delighter class="splash"> <p data-delighter class="head01 bottom">魅惑 禁断のオフィスラブ</p> <h2 data-delighter class="bottom">逆面接プレイ</h2> <p data-delighter class="head02 bottom">OLからの逆襲</p> </section> </div><!-- /img-bg-04 --> <!-- /img-bg-04 END -->
CSS
body,
1html { 2 height: 100%; 3 margin: 0 auto; 4 letter-spacing: 2px; 5 font-size: 10px; 6} 7 8/*固定する背景*/ 9div.para { 10 box-sizing: border-box; 11 color: #FFF; 12 font-size: 5rem; 13 14 display: -webkit-box; 15 display: -webkit-flex; 16 display: -ms-flexbox; 17 display: flex; 18 19 -webkit-box-align: center; 20 -webkit-align-items: center; 21 -ms-flex-align: center; 22 align-items: center; 23 24 -webkit-box-pack: center; 25 -webkit-justify-content: center; 26 -ms-flex-pack: center; 27 justify-content: center; 28 29 padding: 5%; 30 min-height: 800px; 31 height: 100%; 32 33} 34 35.img-bg-01 { 36 position: relative; 37 min-height: 800px; 38} 39.img-bg-02 { 40 position: relative; 41 background:#FFF; 42 43 44} 45.img-bg-03 { 46 /* background: #eee; */ 47 position: relative; 48 49 background-image: url('../img/bg.svg'); 50 background-color: #ddd ; 51 z-index: 10; 52 53 background-repeat: repeat; 54 background-attachment: fixed; 55 background-position: center top 56 57} 58.img-bg-04 { 59 position: relative; 60 min-height: 800px; 61 62} 63.img-bg-05 { 64 position: relative; 65 background:#FFF; 66 67} 68.img-bg-06 { 69 /* background: #eee; */ 70 position: relative; 71 background-image: url('../img/bg.svg'); 72 background-color: #ddd ; 73 z-index: 10; 74 75 background-repeat: repeat; 76 background-attachment: fixed; 77 background-position: center top; 78 79} 80 81 82.img-bg-01::before{ 83 content: ""; 84 display: block; 85 position: fixed; 86 background: url(../img/bg1.jpg) 50% 100% no-repeat; 87 background-size: cover; 88 top: 0; 89 left: 0; 90 width: 100%; 91 height: 120%; 92 -webkit-transform: translate(0, 0); 93 transform: translate(0, 0); 94 z-index: -1; 95 96 min-height: 800px; 97} 98 99.img-bg-04::before{ 100 display: block; 101 position: fixed; 102 background: url(../img/bg3.jpg) 50% 100% no-repeat; 103 background-size: cover; 104 top: 0; 105 left: 0; 106 width: 100%; 107 height: 120%; 108 -webkit-transform: translate(0, 0); 109 transform: translate(0, 0); 110 z-index: -5; 111 112 min-height: 800px; 113} 114 115コード
回答2件
あなたの回答
tips
プレビュー