2016-06-21 18 views
-2

すごいslideInUpは動作しません。私がslideInDown、slideInLeftなどを試してみると、これはうまくいきます。私はレスポンシブルウェブデザインのためにブートストラップを使用しています。 "github.com/matthieua/WOW" のウェブアニメーション:私は、私のWebページをアニメーション化しようとしているwow.jsプラグインを使用して、残念ながら、私が使用したいだけアニメーションが私の場合には動作しないようですよ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
<meta charset="utf-8"/> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no"/> 
 
    <title>Bootstrap 101 Template</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>> 
 
    <link rel="stylesheet" href="bootstrap/css/animate.css"> 
 
    <link rel="stylesheet" href="bootstrap/css/site.css"> 
 
    </head> 
 
    <body> 
 
<div class="organic container"> 
 
     <div class="row"> 
 
     <div class="col-xs-7 col-xs-offset-4 col-sm-7 col-sm-offset-4 col-md-7 col-md-offset-4 col-lg-7 col-lg-offset-4"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/></div> 
 
     <h2 class="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2 wow slideInUp" data-wow-offset="10" data-wow-duration="5s"> ORGANIC</h2> 
 
     <p class="col-xs-5 col-xs-offset-2 col-sm-5 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 wow slideInUp" data-wow-offset="10" data-wow-duration="5s" data-wow-iteration="20"> Nos infusions en tige offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels.</p> 
 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
 
    <script src="bootstrap/js/wow.min.js"></script> 
 
    <script> 
 
     wow = new WOW(
 
     { 
 
      animateClass: 'animated', 
 
      offset:  100, 
 
      callback:  function(box) { 
 
      console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") 
 
      } 
 
     } 
 
    ); 
 
     wow.init(); 
 
    </script> 
 
    </body> 
 
</html>

+0

リンクパーツが正しく実行されていることを確認してください。私は確信していませんが、私はあなたが正しく参照を行っていないので、このエラーがあると思います。確認し、参照してください – Bhugy

+0

ああ、大丈夫いい点!私が逃したかもしれない参照についてあなたは正確に何ができましたか?私のためにすべてがうまく見えるので。 –

+0

あなたのフォルダ構造を表示できますか?それは助けるかもしれない。 – Bhugy

答えて

0

animate.cssは "github.com/daneden/animate.css" のanimate.cssを参照してください。

WOWで、私はanimate.cssslideUpの定義を見つけることができません。

しかし、私はdaneden/animate.cssslideUpの定義を見つけることができます。

WOWのanimate.cssは最新バージョンではありません。

あなたはそれがうまく動作させるために更新して、古いanimate.cssを置き換えることができます。

+0

はい、bounceIn Upはうまくいきます!実際には私がしなければならないレンダリングではありません。私は少しスライドアップをする必要があります。約20px –

+0

'https:// github.com/daneden/animate.css'を使うことをお勧めします。答えが更新されました。 – langyu

+0

しかし、私が正しいならば、私はWow.jsはすでにanimate.cssを使用していることを確信しているので...それは私がすでに「https://github.com/matthieua/WOWの –

0

私は最新のanimate.cssに変更しましたが、それでもうまくいきませんでした。理由は分かりませんが、slideInUpクラスの名前をslideUpInのような別の名前に変更すると、

希望すると助かります!

関連する問題

 関連する問題