CODEWITHSUNDEEP
javascriptwow.js
NineCattoRules
NineCattoRules

Reputation: 2428

How to use a JavaScript animation effect inside a loop?

I'm trying to add a JavaScript animation effect using the wow.js so I initialize it:

<head>
  <link rel="stylesheet" href="css/animate.css">
  <script src="js/wow.min.js"></script>
  <script>
     new WOW().init();
  </script>
</head>

and I placed the class effect(wow slideInRight) inside my div:

<div class="row row-sm padder-lg ">

        <?php
        foreach ($top->tracks->track as $key => $value) 
        {
            if($key >= $this->config->item("items_top"))
                return false;
            $image = $value->image[3]->text;
                if($image == '')
            $image = $value->image[2]->text;
                if($image == '')
            $image = base_url()."assets/images/no-cover.png";
        ?>       
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <div class="item wow slideInRight">
                <img style="background:url('<?php echo $image; ?>')"/>  
            </div>
        </div>
        <?php
        }
        ?>
</div>

The problem is that instead of showing the effect for each single item, this JavaScript shows the effect at the same time for all the items. What's the right way to use this JavaScript on a loop?

Upvotes: 1

Views: 1205

Answers (1)

uraimo
uraimo

Reputation: 19821

WOW.js initialization should be put at the end of your <body> not in <head>, something like this:

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

Other than this, remember that wowjs starts animation when you reach the objects while scrolling, all your item are on the same row so at the same height, it's correct that the animations start all together.

If you need that they start in sequence (i.e. the left-most first and then the others going on until you reach the last one on the right) add a proper data-wow-delay="<number_of_seconds>s" to you divs, with and increasing number_of_seconds.

EDIT:

You can do something along these lines:

<div class="row row-sm padder-lg ">

        <?php

        $delay=0;

        foreach ($top->tracks->track as $key => $value) 
        {
            if($key >= $this->config->item("items_top"))
                return false;
            $image = $value->image[3]->text;
                if($image == '')
            $image = $value->image[2]->text;
                if($image == '')
            $image = base_url()."assets/images/no-cover.png";
        ?>       
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <div class="item wow slideInRight" data-wow-delay="<?php echo $delay; ?>s">
                <img style="background:url('<?php echo $image; ?>')"/>  
            </div>
        </div>
        <?php
            $delay+=0.5;
        }
        ?>
</div>

Is this what you needed?

Upvotes: 1

Related Questions