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を使用しています。
どうぞよろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/08 04:18