Sérieusement perplexe avec WOW.js et l'intégration avec les animer.css

Je suis en train de travailler sur la mise sur pied d'un site portfolio. Ça se passe bien, mais j'ai frappé une vraie peluche.

Je suis sur une page, et d'en avoir fait quatre divs donc loin de briser mon travail. Je vais avoir de la conception graphique des pièces en provenance d'un côté ou de l'autre en tant que l'utilisateur fait défiler.

Maintenant, j'ai trouvé WOW.js qui est censé faire exactement ce que je veux, c'est à dire. faire un graphique de la mine apparaissent uniquement lorsque l'utilisateur fait défiler vers le bas pour elle. MAIS pour la vie de moi, je ne peux pas le faire fonctionner, et que c'est censé être simple, doge de style. Ces surprendre!

Le graphique en question est un cœur, et de les animer.css a un grand "pouls" peu de CSS que je veux utiliser. WOW.js est censé être fabuleusement avec les animer.css. Mais je suis complètement perdu. Mon JS compétences sont encore très basique, donc s'il vous plaît être patient.

Que l'WOW.js les docs de l'état, je suis lié à elle avec:

<link rel="stylesheet" href="css/animate.css">

(mon CSS dossier nommé public, mais je ne vois pas que faire une différence...?)

Ce qui se passe au bas de ma page index:

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

J'ai ajouté de la classe CSS à un élément HTML comme ceci:

<div class="wow">  Content to Reveal Here  </div >

Ensuite, vous êtes censé ajouter l'animer.de style css de l'élément:

<div class="wow pulse">  Content to Reveal Here  </div >

Mais il me manque quelque chose, parce que rien ne fonctionne. J'ai googlé et je ne suis pas la seule personne qui a eu des problèmes avec WOW.js mais j'ai tout essayé, et maintenant je me tourne vers vous.

Sous le personnaliser les paramètres sur les docs, il suggère des paramètres avancés:

wow = new WOW(
    {
    boxClass:     'wow',      //default
    animateClass: 'animated', //default
    offset:       0          //default
   }
)
wow.init();

Je pense car ce n'est pas de les ÉTONNER à tous, il doit bien y avoir une autre façon pour moi de le faire, mais encore être en mesure d'utiliser un CSS animation.

DERNIÈRE question: comment dois-je prendre le pouls de l'animation continuer? Le pouls à quelques reprises, puis s'arrête, mais je veux continuer encore et encore. Des Suggestions?

Le href balise doit pointer vers le fichier CSS. Vous dites que vous avez dans un dossier nommé "public", il devrait donc être href="public/animate.css", pas href="css/animate.css"
C'était mon erreur. Mon code ne l'avez correctement tapé comme href="public/animer.css"
Avez-vous des erreurs dans la console?
J'ai complètement oublié de vérifier console! Ok, j'ai deux ERR_FILE_NOT_FOUND messages. L'un est javascript/index.js. Je suis sûr que j'ai supprimé ce fichier, comme je le pensais je n'ai plus besoin d'elle. Mais c'est probablement la pas le cas. La deuxième erreur est vraiment déroutant pour moi, comme c'est la recherche d'un fichier sous mon github.io dossier appelé js/wow.min.js. Je n'ai aucune idée de ce que c'est. Enfin, la dernière erreur dit "WOW non défini". Cela fait sens, mais je ne suis pas sûr de ce que/comment je doit le définir.

OriginalL'auteur patski | 2014-10-06

10

Viens de mettre ce code dans votre index:
```
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script><script>new WOW().init();</script>
```
pas besoin d'appeler pour
```
<script src="wow.js"></script>
```
J'avais vu votre réponse il ya une heure Gary. J'ai utilisé votre code, et légèrement version mise à jour et il a fixé mon problème immédiatement. <script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script><script>nouveau WOW().init();</script>

OriginalL'auteur Gary Riger
0

couple de choses se passent ici:

</div > n'est pas une bonne fermeture d'une balise html.

si WOW n'est pas défini, alors vous avez probablement ne comprend pas wow.js - assurez-vous d'avoir le bon fichier (voir ce qui est à l'intérieur) et le chemin d'accès correct. Lorsque vous êtes coincé - se débarrasser de TOUTES les erreurs de la console et de faire un minimum, bare bone solution qui devrait fonctionner - c'est plus simple et plus facile à trouver ce qui est à l'origine des troubles.

comme pour la répétition de l'impulsion de l'animation - n'ont tout simplement pas. Dans les vieux jours, il y avait ceux <blink> et <marquee> balises et ils sont partis pour une raison - vous ne devriez pas l'utiliser. En va de même pour Comic Sans à moins que votre site est sur le doge.

maintenant, l'exemple suivant a fonctionné pour moi:
```
<html>
<head>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<script src="wow.js"></script>
<script>
  new WOW().init();
</script>
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" /><br>

<div class="wow  bounceInUp">
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>

<div class="wow pulse">
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>

</body>
</html>
```
Grâce Maciej. Je vais vous laisser savoir comment cela progresse. En outre, le code que j'ai posté est directement copier-coller depuis le site du développeur, c'est donc là que la fermeture </div> vient.

OriginalL'auteur Maciej Jankowski

Vous devez vous connecter pour publier un commentaire.