### Lity.jsが作動せず、作動させたいです。
ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
HTMLでホームページを作っています。
Lity.jsを後から導入したところ、作動せず困っております。
コードを入れ替えたりしていますが、うまく作動しません。
発生している問題・エラーメッセージ
下記コードです。(ヘッダー、フッターは省略、改変しております。)
<!DOCTYPE html> <html> <head> <title>テスト</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="script/lity.min.css"> <link rel="stylesheet" type="text/css" href="script/style.css"> </head> <body id="photograph"><div id="wrap" class="clearfix"> <div class="content"> <section id="movie-page"> <div id="linksaki1"></div> <h2 class="top_title2">Movie</p></h2><br /> <a href="https://vimeo.com/sample/" data-lity="data-lity"><img src="img/movie01.png" class="page_img3" alt="2018" /><p class="midashi-movie">2018</p></a> </section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script> <script type="text/jacascript" src="script/lity.min.js"></script> <script type="text/javascript" src="script/test.js"></script> </body> </html><!-- wrap始まり -->
何かヒントなどいただけますと幸いです。
よろしくお願いいたします。
【補記】
test.jsの中身は下記になります。
$(window).on('load', function(){
$('body').removeClass('fadeout');
});
$(function() {
// ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
$('a:not([href^="#"]):not([target])').on('click', function(e){
e.preventDefault(); // ナビゲートをキャンセル
url = $(this).attr('href'); // 遷移先のURLを取得
if (url !== '') {
$('body').addClass('fadeout'); // bodyに class="fadeout"を挿入
setTimeout(function(){
window.location = url; // 0.8秒後に取得したURLに遷移
}, 800);
}
return false;
});
});
//フェードイン効果を入れていきます
$('head').append(
'<style>body{display:none;}'
);
$(window).on("load", function() {
$('body').delay(300).fadeIn("slow");
});
//スクロールしたときに1回だけ作動する
$( window ).scroll( function() {
var scrollTop = $( window ).scrollTop();
$( '.hoge:not(.fire)' ).each( function() {
var top = $( this ).offset().top;
if ( scrollTop > top ) {
console.log( 'once!' );
$( this ).addClass( 'fire' );
}
} );
} ); //
//するするっと戻る//
$(function () {
var topBtn = $('.hajime');
topBtn.hide();
//スクロールが500に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スルスルっとスクロールでトップへもどる
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
回答1件
あなたの回答
tips
プレビュー