Search code examples
javascriptjqueryhtmlcssscrollreveal.js

Random color for div tag generated by jquery is not permanent

My goal is to each div with a class of "random-color" to have a random background color.that generates the random color using jquery is also working properly . Only problem is after 2 seconds it disappears. Here's my code: I have the Script here from the post Random Div Color.Please fix the problem.

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];
$(document).ready(function() {
    $(".random-color").each(function() {
        $(this).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
    });
});

window.sr = new scrollReveal();
div {
  height: 40px;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
#d1 {
  background-color: #00A388;
}
#d2 {
  background-color: #FFFF9D;
}
#d3 {
  background-color: #BEEB9F;
}
#d4 {
  background-color: #79BD8F;
}
<script src="http://scrollrevealjs.org/js/scrollReveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <p data-sr>Scroll Reveal-Default</p>


  <!--Enter Properties The enter keyword controls the vector origin (direction) of your animation.-->
  <!-- Reveal with a downward motion -->
  <div class="random-color" data-sr='enter top'>enter top</div>
  <br>

  <!-- The other accepted values... -->
  <div class="random-color" data-sr='enter left'>enter lef</div>
  <br>
  <div class="random-color" data-sr='enter right'>enter right</div>
  <br>
  <div class="random-color" data-sr='enter bottom'>enter bottom</div>
  <br>
  <!--Enter Properties Ends-->

  <!--Move Properties The move keyword controls the distance (in pixels) traveled during animation.-->
  <div class="random-color" data-sr='move 24px'>move 24px</div>
  <!--Enter Properties Ends-->
  Over The over keyword sets the duration (in seconds) of your animation.

  <div class="random-color" data-sr='over 0.6s'>over 0.6s</div>
  <div class="random-color" data-sr='over 1.3s'>over 1.3s</div>
  Flip The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).

  <div class="d1" data-sr="enter left, hustle 20px">enter left, hustle 20px</div>
  <div class="d2" data-sr="wait 2.5s, ease-in-out 100px">wait 2.5s, ease-in-out 100px</div>
  <div class="d3" data-sr="move 16px scale up 20%, over 2s">move 16px scale up 20%, over 2s</div>
  <div class="d4" data-sr="enter bottom, roll 45deg, over 2s">enter bottom, roll 45deg, over 2s</div>


</body>

</html>

Solution

  • The library you're using ScrollReveal is replacing your css with its own. Cleaning up your code snippet, and removing the library makes your code work fine - ie, there was nothing in particular wrong with the jQuery you had written to assign random background colours to elements on your page

    var colors = ['red', 'green', 'blue', 'orange', 'yellow'];
$(document).ready(function() {
    $(".random-color").each(function() {
        $(this).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
    });
});
    div {
  height: 40px;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
#d1 {
  background-color: #00A388;
}
#d2 {
  background-color: #FFFF9D;
}
#d3 {
  background-color: #BEEB9F;
}
#d4 {
  background-color: #79BD8F;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <p data-sr>Scroll Reveal-Default</p>


  <!--Enter Properties The enter keyword controls the vector origin (direction) of your animation.-->
  <!-- Reveal with a downward motion -->
  <div class="random-color" data-sr='enter top'>enter top</div>
  <br>

  <!-- The other accepted values... -->
  <div class="random-color" data-sr='enter left'>enter lef</div>
  <br>
  <div class="random-color" data-sr='enter right'>enter right</div>
  <br>
  <div class="random-color" data-sr='enter bottom'>enter bottom</div>
  <br>
  <!--Enter Properties Ends-->

  <!--Move Properties The move keyword controls the distance (in pixels) traveled during animation.-->
  <div class="random-color" data-sr='move 24px'>move 24px</div>
  <!--Enter Properties Ends-->
  Over The over keyword sets the duration (in seconds) of your animation.

  <div class="random-color" data-sr='over 0.6s'>over 0.6s</div>
  <div class="random-color" data-sr='over 1.3s'>over 1.3s</div>
  Flip The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).

  <div class="d1" data-sr="enter left, hustle 20px">enter left, hustle 20px</div>
  <div class="d2" data-sr="wait 2.5s, ease-in-out 100px">wait 2.5s, ease-in-out 100px</div>
  <div class="d3" data-sr="move 16px scale up 20%, over 2s">move 16px scale up 20%, over 2s</div>
  <div class="d4" data-sr="enter bottom, roll 45deg, over 2s">enter bottom, roll 45deg, over 2s</div>


</body>

</html>

    If you look at the documentation for your library, it has an event fired when an animation finishes - at this point you could apply your own css without it being replaced.

    var colors = ['red', 'green', 'blue', 'orange', 'yellow'];
$(document).ready(function() {
   
  
window.sr = new scrollReveal({
  complete:function(el){
        var $this = $(el);
        if($this.hasClass('random-color')){
          $this.css('background-color', colors[Math.floor(Math.random() * colors.length)])
        }
    }
  });
});
    div {
  height: 40px;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
#d1 {
  background-color: #00A388;
}
#d2 {
  background-color: #FFFF9D;
}
#d3 {
  background-color: #BEEB9F;
}
#d4 {
  background-color: #79BD8F;
}
    <script src="http://scrollrevealjs.org/js/scrollReveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <p data-sr>Scroll Reveal-Default</p>


  <!--Enter Properties The enter keyword controls the vector origin (direction) of your animation.-->
  <!-- Reveal with a downward motion -->
  <div class="random-color" data-sr='enter top'>enter top</div>
  <br>

  <!-- The other accepted values... -->
  <div class="random-color" data-sr='enter left'>enter lef</div>
  <br>
  <div class="random-color" data-sr='enter right'>enter right</div>
  <br>
  <div class="random-color" data-sr='enter bottom'>enter bottom</div>
  <br>
  <!--Enter Properties Ends-->

  <!--Move Properties The move keyword controls the distance (in pixels) traveled during animation.-->
  <div class="random-color" data-sr='move 24px'>move 24px</div>
  <!--Enter Properties Ends-->
  Over The over keyword sets the duration (in seconds) of your animation.

  <div class="random-color" data-sr='over 0.6s'>over 0.6s</div>
  <div class="random-color" data-sr='over 1.3s'>over 1.3s</div>
  Flip The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).

  <div class="d1" data-sr="enter left, hustle 20px">enter left, hustle 20px</div>
  <div class="d2" data-sr="wait 2.5s, ease-in-out 100px">wait 2.5s, ease-in-out 100px</div>
  <div class="d3" data-sr="move 16px scale up 20%, over 2s">move 16px scale up 20%, over 2s</div>
  <div class="d4 random-color" data-sr="enter bottom, roll 45deg, over 2s">enter bottom, roll 45deg, over 2s</div>


</body>

</html>