CODEWITHSUNDEEP
javascripthtmljquerycss
Maggie Mao
Maggie Mao

Reputation: 187

Javascript animation not showing up

So basically, I wanted to use something that seems to work on codepen. The link of the CodePen is here: https://codepen.io/anon/pen/JMOQzE

Main concern: Javascript was supposed to handle animation but was not showing up. Thanks comment section for the reminder

I basically copied all CSS and Javascript. Then my HMTL looks like this:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./style.css" >
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="./script.js"></script>
    </head>

    <body>

        <div class = "wrapper">
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
        </div>


    </body>
</html>

And the animation did not show up. As shown above, I made sure to link jQuery there. I tried control+click in VSCode and it linked to the correct files. No error message on console either. I'm lost. What could be the problem? Thanks

Upvotes: 1

Views: 1085

Answers (2)

Janak Prajapati
Janak Prajapati

Reputation: 886

This code works for me in chrome browser

Just call your create function at after declaring.

You can also use document ready function for same

function create(i) {

  var width = Math.random() * 8;
  var height = width * 0.4;
  var colourIdx = Math.ceil(Math.random() * 3);
  var colour = "red";
  switch (colourIdx) {
    case 1:
      colour = "yellow";
      break;
    case 2:
      colour = "blue";
      break;
    default:
      colour = "red";
  }
  $('<div class="confetti-' + i + ' ' + colour + '"></div>').css({
    "width": width + "px",
    "height": height + "px",
    "top": -Math.random() * 20 + "%",
    "left": Math.random() * 100 + "%",
    "opacity": Math.random() + 0.5,
    "transform": "rotate(" + Math.random() * 360 + "deg)"
  }).appendTo('.wrapper');

  drop(i);
}

function drop(x) {
  $('.confetti-' + x).animate({
    top: "100%",
    left: "+=" + Math.random() * 15 + "%"
  }, Math.random() * 3000 + 3000, function() {
    reset(x);
  });
}

function reset(x) {
  $('.confetti-' + x).animate({
    "top": -Math.random() * 20 + "%",
    "left": "-=" + Math.random() * 15 + "%"
  }, 0, function() {
    drop(x);
  });
}

for (var i = 0; i < 250; i++) {
  create(i);
}
body {
  margin: 0;
  overflow: hidden;
}

.wrapper {
  position: relative;
  min-height: 100vh;
  border: 1px solid red;
}

[class|="confetti"] {
  position: absolute;
}

.red {
  background-color: #E94A3F;
}

.yellow {
  background-color: #FAA040;
}

.blue {
  background-color: #5FC9F5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

Upvotes: 2

Rimander
Rimander

Reputation: 131

You probably need to execute your javascript code when you finish loading the HTML.

Enter your code here

$( document ).ready(function() {
    // HERE
});

More info: https://learn.jquery.com/using-jquery-core/document-ready/

Upvotes: 3

Related Questions