CODEWITHSUNDEEP
htmlcssanimationpreload
coloroid
coloroid

Reputation: 11

How to start Bootstrap animation after preloader is finished?

I'm using some css animations on the startup of my website, but I want them to only start after the preloader. When I load the page, the preloader takes a few seconds to complete and the animations don't play because they were already played on load which could not be seen because the preloader was being shown.

So after the suggestions, this is what it looks like:

<head>
<html class="full" lang="en">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" >
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">

 <script type="text/javascript" charset="UTF-8">
    $(document).ready(function() {
        $("#logg").addClass("animated rollIn");
    });
</script>
</head>

<body>
<div id="preloader">
<div id="status"> <img src="assets/img/preloader.gif" height="64" width="64" alt=""> </div>
</div>
<div class="coming-soon">
<div class="container">
<div class="row">
  <div class="span12">
     <div class="logo">
    <img id="logg" src="assets/img/logo6.png" alt="logo" style="max-width: 260px; height:auto; display:inline-block;">
</div>

The code above doesn't play the animation, and I downloaded the animation from here

Thanks in advance!

Upvotes: 1

Views: 3155

Answers (1)

cvsguimaraes
cvsguimaraes

Reputation: 13240

Use the load event instead. The load event is fired when all resources are ready. In other hand, ready is fired when the DOM structure is ready and generally that's the first thing that is loaded.

Also make sure that all your resources are inside your <head> element and you <img> is either an inline-block or block element.

All that I've said is something like this:

<html>
<head>
    <link rel="stylesheet" href="animate.min.css">
    <script type="text/javascript" charset="UTF-8">
        $(document).ready(function() {
            $("#logg").addClass("animated rollIn");
        });
    </script>
</head>
<body>
    <div class="logo">
        <img id="logg" src="assets/img/logo6.png" alt="logo" style="max-width: 260px; height:auto; display:inline-block;">
    </div>
</body>
</html>

EDIT

Now that the OP provided the link for the page was quite easy to spot the error. You're trying to use jQuery's $ alias before including jQuery itself. The order matters, so put all those jQuery scripts that are the bottom of the source code in the beginning of your <head> tag :)

// Put those at the top of your <head>
<script src="assets/js/jquery-1.10.2.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
<script src="assets/js/jquery.countdown.js"></script> 
<script src="assets/js/custom.js"></script>

Upvotes: 1

Related Questions