Image is visible before Animate.css and wow.js load

Asked

Viewed 254 times

-2

I have some animations using animate.css and wow.js, I put some delay by wow, but once the site loads the images are already shown and then applies the animation, I don’t want them to appear before the animation, if you have a delay of 10s I want the image that this effect does not appear and only appear when doing the animation, I believe it would already have to be like this by wow, but how do I make a code so that the image gets opacity 0 and then with the animation it goes to 1, or something like that that solves this?

css animate.css wow.js

  • Can’t raise a fiddle?

  • I don’t know what this kkkk is, I’ll Google it

  • put the code here

  • @Lennons.Bueno are several animations the code is great, if you understand of Animate.css and wow.css know what I’m talking about, there is no way to put the codes of these libraries here. This is my logo that has the excitement <img class="img-responsive logo wow fadeIn" data-wow-delay="2s" src="imagens/logo.png"> Since you can see this one with a delay of 2s, but I don’t want the image to appear before those 2s, I want it to only appear with the fadein effect, but once the site loads it already appears and then it disappears and the fadein effect comes, I want it to be hidden until the effect appears.

  • Blz @Guilhermenascimento thanks for the help but I do not know and I researched and will complicate me even more, I will have to learn this to explain what I want. I only need a code in js that hides the element for 2s, this can be a class with display None or opacity 0, or that "hides" until the fadein class of Animate acts on the element. I’ll keep searching here to see how I do it. Thanks for the help.

  • That’s weird, I think or the class img-responsive or the class logo or another CSS is conflicting with Animate.css, if you can send a link might help. PS: answers something else, when you speak wow css Actually you mean to say WOW.js right? Because wow.css I don’t know.

  • Yes it’s wow.js the bootstrap img-Responsive class I’ve removed it and . so it’s the one I created, there’s nothing conflicting, see .logo {&#xA; position: absolute;&#xA; width: 100%;&#xA; height: auto;&#xA; top: 5%;&#xA; z-index: 3;&#xA;}

  • But by you I meant not to show the images before the animations take place? Even without I create code for it? Would the libraries Animate.css and wow.js already have this property? Why I researched it is this msm

  • mano I’m not talking about posting the library, but your JS and HTML code, when you enter the community is shown how to ask questions, if you skipped this part I strongly recommend starting again, help to be helped.

  • Already have a person who knows Animate.css and wow.js and knows that it is impossible to put the js here, it is helping me, thank you very much.

  • @Claytonfurlanetto I know you’re a beginner, but now observing our friend’s answer enter as little code as possible in the next questions, ah and the lib he added via Cdn..

  • I was able to identify the error and I’ve solved it.

Show 7 more comments

1 answer

1


Since you didn’t post the code there’s no way to know where you went wrong, so I’m risking you kicking a few hypotheses:

You forgot the new WOW(). init();

The new WOW().init(); should go at the bottom of the page, after everything preferably, see how it worked properly:

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>

<img 
 class="wow fadeIn"
 data-wow-duration="2s"
 data-wow-delay="2s"
 src="https://i.stack.imgur.com/YCSmc.jpg?s=328&g=1">

<script>
new WOW().init();
</script>

Conflict with other CSS like Bootstrap

It may be that the class .img-response or .logo is affecting the opacity: I can’t say, but anyway try temporarily removing them (this I mentioned as an example, it may be that even a CSS that is not a class is affecting)

Download time

It may be that for some reason that just by looking at your HTML to know, you have done CSS without there being rendering lock, what you can try to use to bypass this would simply use the tag style inside head with this:

<!DOCTYPE html>
<html>
<head>

...

<style>
.wow {
    opacity: 0;
}
</style>
</head>
<body>
...

The ... are just illustrative, to say that there is more code there

In this way all elements with the class wow will begin in a forced manner with opacity: 0

  • The classes are correct and the new WOW().init(); tbm is inserted in the correct place, the libraries are working, the effects are occurring, only that the images that should be "hidden" and only appear when the animation occurs, this is not working, and you said about the opacity: do not know what it is, since this is my doubt from the beginning, create a function with an opacity before the animation starts and one with opacity 1 when the animation occurs.

  • @Claytonfurlanetto you mean they are carrying or they are visible? Because it is one thing to "download" something else is transition effect. You want the image to only download when it enters the viewport (after the scroll)?

  • I put the effect to occur after 2s, then the site loads and already appears the image and after 2s the image disappears and enters with the Fadein effect. I don’t want her to appear when I upload the site, she just has to appear when I enter the fadein, some other effects are correct but there are some images that are like this, and I don’t see anything wrong, so I thought to create some function and js not to show the image before the fadein.

  • @Claytonfurlanetto try to add this inside HEAD <style>.wow { opacity:0; }</style>

  • Now putting that you said, all the elements that are with wow class did not appear when loading the site but appeared at the beginning of the animation and after animating disappeared, I don’t know if you know, but classo wow only controls the delay and duration and fadein fadeout effect class that controls animation. Now I’m leaving and I’ll see if tomorrow I discover this mystery kkk, qq thing I notice here. Thank you very much for helping vlw msm brother.

  • @Claytonfurlanetto understood, if you can send me the link of your website online via Internet on the face or via email to [email protected] I can look at this in more detail and get the source of the problem.

  • I’ll put the website on the air and send you the link in the face

Show 2 more comments

Browser other questions tagged css animate.css wow.js

You are not signed in. Login or sign up in order to post.