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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1805閲覧

より洗練された書き方 スクロールイベント

flyingHigh

総合スコア41

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/12/05 13:38

編集2016/12/11 08:26

初心者です。
よろしくお願いします。

下記のJavascriptについて
もっと効率よくて簡単で洗練された書き方、
プロならこう書くべきという
お手本を教えていただけませんでしょうか。

下記のように
HTMLでは#divWrapp の背景に暗めの画像が敷かれており
その上にimgタグで明るめの画像を重ねてあります。
imgタグの画像(明るめの画像)はページ表示時は透明状態で、
背景の暗めの画像が表示されている状態です。#divWrapp2も同様です。#divWrapp、#divWrapp2がが縦に並んでいます。

ページをスクロールして、#divWrappが画面中央に来ると
imgタグの画像(明るめの画像)の透明度が0.8になり、
暗い画像から明るい画像へとアニメーションして見えるようにしています。
簡単なパララックス風のページの一部です。

よろしくお願いします。

html

1<div id="divWrapp"> 2 <img src="" class="mainImg"> 3</div> 4 5<div id="divWrapp2"> 6 <img src="" class="mainImg"> 7</div>

Javascript

1//上部のdiv 2$(function () { 3 $(window).scroll(function () { 4 function ImgLightFunc() { 5 $('#divWrapp .mainImg').stop().animate({ 6 "opacity": "0.8" 7 }, { 8 "duration": "1500" 9 }); 10 } 11 12 function ImgDarkFunc() { 13 $('#divWrapp .mainImg').stop().animate({ 14 "opacity": "0" 15 }, { 16 "duration": "1500" 17 }); 18 } 19 20 var obj_t_pos = $('#divWrapp').offset().top; 21 var scr_count = $(document).scrollTop() + (window.innerHeight / 2); //ディスプレイの半分の高さ 22 23 if (scr_count > obj_t_pos) { 24 ImgLightFunc(); 25 } else { 26 ImgDarkFunc(); 27 } 28 29 }); 30}); 31 32 33//下部のdiv 34$(function () { 35 $(window).scroll(function () { 36 function ImgLightFunc2() { 37 $('#divWrapp2 .mainImg').stop().animate({ 38 "opacity": "0.8" 39 }, { 40 "duration": "1500" 41 }); 42 }; 43 44 function ImgDarkFunc2() { 45 $('#divWrapp2 .mainImg').stop().animate({ 46 "opacity": "0" 47 }, { 48 "duration": "1500" 49 }); 50 } 51 52 var obj_t_pos = $('#divWrapp2').offset().top; 53 var scr_count = $(document).scrollTop() + (window.innerHeight / 2); //ディスプレイの半分の高さ 54 55 if (scr_count > obj_t_pos) { 56 ImgLightFunc2(); 57 } else { 58 ImgDarkFunc2(); 59 } 60 61 }); 62});

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

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

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

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

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

kei344

2016/12/11 08:28

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
kei344

2016/12/17 19:30

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。
flyingHigh

2016/12/18 15:19

逐一のご指示ありがとうございます。お手数おかけします。ありがとうございます。
guest

回答2

0

構文エラーが出ているはずなので、そこをまず直しましょう。インデントを適切に付ける癖を付けないと後でコードを見たと気に混乱しますよ。

JavaScript

1//上部のdiv 2$( function() { // 「$(function()){」 では「)」が一つ多い ※ 同様の箇所が複数有り 3 $( window ).scroll( function() { 4 function ImgLightFunc() { 5 // ↓「()」抜け ※ 同様の箇所が複数有り 6 $( '#divWrapp .mainImg' ).stop().animate( { opacity: 0.8 }, { duration: 1500 } ); 7 // ↑「'」抜け ※ 同様の箇所が複数有り 8 } 9 function ImgDarkFunc() { 10 $( '#divWrapp .mainImg' ).stop().animate( { opacity: 0 }, { duration: 1500 } ); 11 } 12 var obj_t_pos = $( '#divWrapp' ).offset().top; 13 var scr_count = $( document ).scrollTop() + ( window.innerHeight / 2 ); 14 if ( scr_count > obj_t_pos ) { 15 ImgLightFunc(); 16 } else { // 「} else 」が抜けている ※ 同様の箇所が複数有り 17 ImgDarkFunc(); 18 } 19 20 } ); 21} ); 22//下部のdiv 23$( function() { 24 $( window ).scroll( function() { 25 function ImgLightFunc2() { 26 $( '#divWrapp2 .mainImg' ).stop().animate( { opacity: 0.8 }, { duration: 1500 } ); 27 } 28 function ImgDarkFunc2() { 29 $( '#divWrapp2 .mainImg' ).stop().animate( { opacity: 0 }, { duration: 1500 } ); 30 } 31 var obj_t_pos = $( '#divWrapp2' ).offset().top; 32 var scr_count = $( document ).scrollTop() + ( window.innerHeight / 2 ); 33 34 if ( scr_count > obj_t_pos ) { 35 ImgLightFunc2(); 36 } else { 37 ImgDarkFunc2( ); 38 } 39 40 } ); 41} );

改善点としては、
0. 構文エラーは問題外
0. インデントを適切に
0. $( window ).scroll() でイベントを複数登録しているが、まとめて1つにしたほうが良い
0. ImgLightFunc関数などが scrollイベント内で生成されているが、イベント外に関数を置くほうが良いような

JavaScript

1$( function() { 2 $( window ).scroll( function() { 3 var scr_count = $( document ).scrollTop() + ( window.innerHeight / 2 ); 4 ImgFunc( '#divWrapp', scr_count ); 5 ImgFunc( '#divWrapp2', scr_count ); 6 } ); 7 function ImgFunc( id, scr_count ) { 8 var obj_t_pos = $( id ).offset().top; 9 $( id + ' .mainImg' ).stop().animate( { opacity: ( ( scr_count > obj_t_pos ) ? 0.8 : 0 ) }, { duration: 1500 } ); 10 } 11} ); // 未テスト

投稿2016/12/07 09:31

kei344

総合スコア69364

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

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

0

ベストアンサー

こんなのでどうでしょうか。

JavaScript

1$(function() { 2 $(window).on('scroll', function() { 3 4 //ディスプレイの半分の高さ 5 var verticalCenter = 6 $(document).scrollTop() + (window.innerHeight / 2); 7 8 opaqueImg('#divWrapp'); 9 opaqueImg('#divWrapp2'); 10 11 function opaqueImg(wrapper) { 12 var wrapperPosition = $(wrapper).offset().top; 13 14 $(wrapper) 15 .find('.mainImg') 16 .stop() 17 .animate({'opacity' : (verticalCenter > wrapperPosition ? 0.8 : 0) }, 18 {'duration': 1500 }); 19 } 20 }); 21});

投稿2016/12/06 12:59

naomi3

総合スコア1105

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問