Search code examples
javascriptjqueryscrollreveal.js

scrollReveal.js not working

I am using the exact code that THIS codepen uses, and my images still aren't fading in when they are in my viewport.

Im not getting any errors in the console so i dont know why it would work perfectly in codepen but not when i try to do it.

HTML 

<body>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>

<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.0.9/scrollreveal.min.js"></script>

</body>

js

$(document).ready(function() {
window.sr = ScrollReveal();
sr.reveal('.game');
});

There is also some basic css..

Solution

  • In CodePen, click on the lower-right 'Export' button to download a working non-CodePen version of this. You need to include the CSS in your head tag, which you haven't included in your question.

    Also you don't need the JQuery $(document).ready(), but if you insist on using it you'll also need to include JQuery as a script in your HTML.