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

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

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

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

jQuery

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

Q&A

1回答

675閲覧

ファーストビュー処理のJSスクリプトについて

precioushappy

総合スコア6

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/02/07 07:50

JS初心者です。
どなたかお力をお借りできると幸いです。

ファーストビューのロード → 画面いっぱいのSVGアニメーション(スクロール不可) → クリックでフェードアウト → 別コンテンツがフェードイン(スクロール可能になる)の動作を実装したいと思っています。

=====/// HTML ///=====

<div id="intro">   <div id="logo"></div> </div> <div id="main"> <p>メインコンテンツ</p> </div>

=====/// JQUERY 読み込み後 ///=====

/* SVG アニメーション */
$(document).ready(function(){
$('#logo').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 1.5,
"strokeColor": "#333333"
}).lazylinepainter('paint');
});

/* #intro フェードアウト */
var intro = document.getElementById('intro');
intro.addEventListener('click', function(){
intro.classList.add('fadeout');
setTimeout(function(){
intro.style.display = "none";
}, 1500);
}, false);

/* #main フェードイン */
$('#main').css('visibility','hidden');
$(window).click(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#main').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 100){
$(this).addClass("fadeInDown");
}
})
});

=====/// 問題 ///=====

・現状、#intro と #mainは別のクリックで動作しますが、これを一つのクリックイベントで処理したいと思います。

・#introに overflow-y:hidden; でスクロール禁止にしようと思いましたが、CSSが効きません。

=====/// 補足 ///=====

・SVGアニメーションはLazy Line Painter というJQUERYを使用しています。

どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

現状のコードではフェードアウトとフェードインの処理が「無名関数」で定義されています。
それを名前をつけて普通の関数として定義してください。
そうするとjQueryのonとoffで関数名を使ったイベント管理が行えるようになります。

jQueryを使われる場合、イベントはすべてjQueryで管理するのが良いです。
DOM操作によるメモリリークを防ぐこともできますし、イベントの制御も楽になります。

上記の言葉をコードとして記すと、以下のような流れになります。
(フェードイン・フェードアウトの処理は省略しています)

js

1function fadeout(){ 2 //フェードアウト処理(省略) 3 4 //フェードアウトイベントoffしてフェードインイベントon 5 $(window).off('click', fadeout).on('click', fadein); 6} 7function fadein(){ 8 //フェードイン処理(省略) 9 10 //フェードインイベントoffしてもう反応させない 11 $(window).off('click', fadein); 12} 13 14//DOMの準備ができたら 15$(document).ready(function(){ 16 //SVGアニメーションの設定 17 $('#logo').lazylinepainter({ 18 //SVG描画完了時にフェードアウトイベントを登録 19 onComplete: function(){ 20 $(window).on('click', fadeout); 21 } 22 }) 23 .lazylinepainter('paint'); //描画開始 24});

投稿2018/02/08 01:20

編集2018/02/08 01:21
so87

総合スコア764

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

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

precioushappy

2018/02/08 04:18

早々にありがとうございます! 至極、初歩的で基本的なことなのですね。 大変理解しやすいご説明をありがとうございました。 まだ希望する動作には至っていませんが、JSを少しずつ勉強してきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問