Webanimationen mit Jquery-Plugins: wow slideInUp funktioniert nicht

-2

Ich versuche meine Webseite zu animieren, indem ich das wow.js-Plugin benutze, aber leider funktioniert die einzige Animation, die ich benutzen möchte, in meinem Fall nicht. Wenn ich slideInDown, slideInLeft und andere versuche, funktioniert das gut. Ich verwende Bootstrap für mein responsives Webdesign.Webanimationen mit Jquery-Plugins: wow slideInUp funktioniert nicht

<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>

Quelle

2016-06-21 Yanis Ismail

Überprüfen Sie, ob Sie den Linking-Teil korrekt ausgeführt haben. Ich bin mir nicht sicher, aber ich denke, dieser Fehler liegt daran, dass Sie die Referenzierung nicht korrekt durchgeführt haben. Überprüfen und sehen Sie – Bhugy

Oh, okay, guter Punkt! Könnten Sie mir bitte genau sagen, was mit der Referenzierung wahrscheinlich passiert ist? Denn alles sieht gut für mich aus .. –

Könnten Sie Ihre Ordnerstruktur zeigen? das könnte helfen. – Bhugy

Die animate.css von "github.com/matthieua/WOW" der animate.css von "github.com/daneden/animate.css" beziehen.

In WOW kann ich die Definition von slideUp in animate.css nicht finden.

Aber ich kann die Definition von slideUp in daneden/animate.css finden.

Die animate.css von WOW ist nicht die neueste Version.

Sie können das alte animate.css durch das Update ersetzen, damit es gut funktioniert.

Quelle

2016-06-21 08:06:26 langyu

Ja, bounceIn Up funktioniert gut! aber nicht wirklich Rendering, dass ich tun muss .. Ich brauche ein wenig slideUp, diskret, etwa 20px –

Ich schlage vor, Sie verwenden https: // github.com/daneden/animate.css, das wird gut für Ihre Anforderung .die Antwort wurde aktualisiert. – langyu

Aber, wenn ich recht habe, bin ich mir sicher, dass Wow.js bereits animate.css verwendet. Das ist, was ich bereits mache –

Ich habe die CSS auf die neueste animate.css geändert, aber es hat immer noch nicht funktioniert, ich habe keine Ahnung warum, aber wenn ich die "slideInUp" Klasse der CSS zu einem anderen wie slideUpIn umbenenne, funktioniert es für mich!

Hoffe es hilft!

Quelle

2017-03-03 15:10:48 Puchi

Webanimationen mit Jquery-Plugins: wow slideInUp funktioniert nicht

Antwort

Verwandte Themen