質問編集履歴

1 test.jsの中身を補記しました

lily0630

lily0630 score 19

2018/10/22 18:14  投稿

Lity.js 作動せず困っております。
### 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">
   <!-- wrap始まり -->
 <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>
何かヒントなどいただけますと幸いです。
よろしくお願いいたします。
よろしくお願いいたします。
【補記】
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;
   });
});
  • HTML

    23401 questions

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

  • jQuery

    13083 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る