質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3360閲覧

jQueryで特定の位置でイベント発動

yes111

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/06/12 06:42

疑似要素に設定した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で切り替えしないといけなくなった次第です。

<script type="text/javascript"> var thisOffset; $(window).on('load',function(){ thisOffset = $('.img-bg-01').offset().top + $('.img-bg-01').outerHeight(); }); $(window).scroll(function(){ if( $(window).scrollTop() + $(window).height() > thisOffset){ // 特定の要素を超えた $(".img-bg-01::before").css("background", " url(img/bg3.jpg) 50% 100% no-repeat"); } else { // 特定の要素を超えていない } }); </script>

以下が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コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/06/12 08:31

JSもコードブロックに記載しましょう。
guest

回答2

0

ベストアンサー

jQueryは疑似要素を変更できません。

投稿2019/06/12 07:37

recal

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

jQueryによるスクロールイベント時の要素位置の取得

jQueryスクロールイベント時要素位置の取得出来ないっぽいですね。多分。。(私英語での調べ&テストより)

ですので、素のJavaScriptのelement.getBoundingClinetRect()を使う他ないと思われます。

擬似要素のプロパティ値を変更する

recalさんが書かれているように、擬似要素をjQueryで変更する事は出来きません。素のJavaScriptでCSSOMを使えばできます。(試しましたが出来ました)。

ただし、英語でもまだMDN等使用書の解説部分やWeb解説記事が充実していない様子でした。
(一応対応箇所のリンクを貼っておきます。ただ、インターフェースという概念やIDL(Interface Definition Language)の知識が必要ですので、まだ未学習でしたら、厳しいかも知れません。)

代替案

ですので、擬似要素の背景画像を変更する替案として、

  • classを追加/削除して、背景画像を変更する

方法をお勧めします。Jsの記述が少なくて済み、簡単だからです。

以上を踏まえて、以下、「質問内容を抽象化したデモ」を以下に書いてみました。
質問コードをコピーして試し、意図を抽象化してみました。

質問した意図と違いましたらごめんなさい…????????

html

1<div class="base"></div> <!-- 背景画像用 --> 2<div class="scrollingElement"> <!-- 透明な要素。スクロールされる要素 --> 3 <div class="item">1</div> 4 <div class="item">2</div> 5 <div class="item">3</div> 6</div> 7

css

1*{ 2 padding: 0; 3 margin: 0; 4 box-sizing: border-box; 5} 6/* 背景のための固定要素 */ 7.base{ 8border: 5px solid #555; 9 position: fixed; 10 top: 0; 11 left: 0; 12 width: 100vw; 13 height: 100vh; 14 z-index: -1; 15 /* color image position/size repeat [origin clip attachment */ 16 background: transparent url(bg.jpg) left top/cover no-repeat; 17} 18/* .itemの3番目が見え始めた時に、.baseの背景画像を変えるための追加クラス */ 19.base.changed{ 20 background: transparent url(changed.jpg) left top/cover no-repeat; 21} 22 23/* スクール用の要素*/ 24.scrollingElement{ 25 background: transparent; 26 border: 5px solid #888; 27} 28/* スクロール内の要素 */ 29.item{ 30 border: 2px solid red; 31 height: 80vh; 32 text-align: center; 33 line-height: 80vh; 34 font-size: 60px; 35 color: #fff; 36} 37 38/* .item の 3番目の要素のトップに目印用の線 */ 39.item:nth-of-type(3){ 40 border-top: 6px solid yellow; 41}

js

1// js + jQuery 2"use strict"; 3 4/* デバッグ用 */ 5let _ = console.log, 6type = v => ({}.toString.call(v)); 7/***************/ 8 9 10$(window).scroll(function(){ 11 let item3 = $(".item").get(2); 12 /* 0開始のインデックス。(2)なので3つ目の要素。素のJavaScriptオブジェクト取り出し 13 */ 14 15 let item3Top_FromVP = item3.getBoundingClientRect().top, 16 /* viewport からの要素のトップまでの距離(px)。viewportとは、ブラウザのウィンドウの事で、最上左点が基準点。 17 * その点からの、あるHTML要素の位置を取得できる。 18 * (2) "viewport からの要素位置" なので、スクロールに絡めて、逐次変化する要素の位置を計測できる。 */ 19 20 item3Bottom_FromVP = item3Top_FromVP - window.innerHeight; 21 /* :: viewportの基準点を左上ではなく、"画面下"にしたい場合:: 22 画面の高さ分だけマイナスする。 23 */ 24 25 26 // item3 のトップが 0以下 === 画面から消え始め 27 if( item3Bottom_FromVP < 0 ){ 28 $(".base").addClass("changed"); 29 } else { 30 $(".base").removeClass("changed"); 31 } 32});

追記

質問のjsのコードも、質問投稿時のバーにある<code>を使って、'コード表示'されるようにして頂けると、回答者も見やすく非常に助かります。

回答者: 見やすい・理解しやすい・コピペの作業が減る 質問者: その結果、回答が得られやすくなる

質問者側も質問文を書く事で精一杯なのは理解しておるつもりです。不躾ではありますが、何卒よろしくお願い致します<(_ _)>????

追記2: $("")で、擬似要素は取得できないが、擬似クラス文字列を使って要素は取得できる

もしやこの辺りがややこしいから勘違いもあるかも…と思い、後から追記しました。

擬似要素

$()element.querySelector(all)()に渡すセレクター文字列は、擬似要素・擬似クラスも構文的にはOKです。ただし、仕様書にもありますが、擬似要素の場合は、DOMとして実際に要素が存在するわけでは無いため、例えば、element.querySelector(".foo::before")と記述しても違法にはならず、エラーも投げられません。返却値はnullが返されます。

note: Authors are advised that while the use of pseudo-elements in selectors is permitted, they will not match any elements in the document, and thus would not result in any elements being returned. Therefore, authors are advised to avoid the use of pseudo-elements in selectors that are passed to the methods defined in this specification.

作成者にアドバイスです。セレクタでの擬似要素の使用は許可されていますが、ドキュメント内のどの要素とも一致しないため、結果として要素が返却されません。そのため、この仕様で定義されているメソッドに、疑似要素セレクターを渡す事は避けて下さい。

6.5. Grammar | Selector API lvele2 -W3C-

擬似クラス

擬似クラスは要素が返却されます。ですのでCSSの変更もできます。例コードを以下に。

html

1<div id="foo">this is #foo text.</div> 2 3<div> 4 <div class="item">this is 1st item.</div> 5 <div class="item">this is 2rd item.</div> 6 <div class="item">this is 3rd item.</div> 7</div>

css

1.foo::before{ 2 content: "@@"; 3} 4.item:nth-of-type(2){ 5 color: red; 6}

js

1"use strict"; 2 3let _ = console.log, 4type = v => ({}.toString.call(v)); 5 6 7let elm = $("#foo"); 8_( elm.text() ) // this is text. 9 10let secondItemTxt = $(".item:nth-of-type(2)").text(); // 11// === let secondItemTxt = document.querySelector(".item:nth-of-type(2)").innerHTML; 12_( secondItemTxt ) // this is 2nd item.

投稿2019/06/17 15:01

編集2019/06/18 10:44
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/06/18 03:51

誤情報、失礼致しました???? ありがとうございます!!✨ DOM 2 Style(2000年)には既にRECだったとは…全く知りませんでした…???????? ???????? 単に、MDNの解説量やWeb解説記事が少ないだけなのですね…。。 直ぐに修正致します<(_ _)>????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問