CODEWITHSUNDEEP
javascriptjqueryhtmlcss
KinG Swisser
KinG Swisser

Reputation: 51

How to animate my header to slide in horizontally from left to page view on load?

I'm trying to use JavaScript to animate my <header></header> to where it is off the page (on load), then slides into page position like a moving banner. Is it possible for this to be done, and if so how can I achieve this effect. I only want it to be done once, and that is when the page is loaded/refreshed. Any help would be appreciated!

HTML Snippet:

    <!DOCTYPE html>
<html>
    <head>        
        <link rel= "stylesheet" href= "BoxModel3.css">
        <title>Indie-GO! Home</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>$(document).ready(function () {
    $("#fade").fadeIn(5000);
});</script>
    </head> 

    <body>        
        <div id="wrapper">
            <header>Home                
               <div id="fade">
                <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;">Indie-GO!</h1>
                </div>
                <div class="img">
                    <img src="118_832586-W.jpg"/>
                </div>
            </header>

CSS Snippet:

header, nav, section, footer, #fade
{
    display: block;
}
*
{    
    margin: 0px;
    padding: 0px;
    border: 0px;
}

html
{
    background-color: slategrey;

}

header
{
    border: 25px solid indigo; 
    font-family: Arial Black;
    font-size: 25px;
    padding 30px;    
    background-color: indigo;
    text-shadow: 5px 4px 3px darkgrey;
    color: beige;
}

Upvotes: 0

Views: 1181

Answers (4)

digglemister
digglemister

Reputation: 1487

EDIT TO YOUR CSS:

header
{
    position: relative; //make the position of the header relative
    left: -100%; // set left to -100%

    border: 25px solid indigo; 
    font-family: Arial Black;
    font-size: 25px;
    padding 30px;    
    background-color: indigo;
    text-shadow: 5px 4px 3px darkgrey;
    color: beige;
}

ADDED JS:

$(document).ready(function() {

    $("header").animate({"left": 0}, 3000) //3000 is the number of milliseconds for the slide in, which you can change.

})

Upvotes: 1

user5039044
user5039044

Reputation:

Do you need this right ? 

$(document).ready(function () {
  //  $("#fade").hide(); // you must hide first
  //  $("#fade").fadeIn(3000); // and slow fade to show
  // or // but i like this :)
    $("#fade").hide();
    $('#fade').show('slide', {direction: 'left'}, 1000);
});
header, nav, section, footer, #fade
{
    display: block;
}
*
{    
    margin: 0px;
    padding: 0px;
    border: 0px;
}

html
{
    background-color: slategrey;

}

header
{
    border: 25px solid indigo; 
    font-family: Arial Black;
    font-size: 25px;
    padding 30px;    
    background-color: indigo;
    text-shadow: 5px 4px 3px darkgrey;
    color: beige;
}
<!DOCTYPE html>
<html>
    <head>        
        <link rel= "stylesheet" href= "BoxModel3.css">
        <title>Indie-GO! Home</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    </head> 

    <body>        
        <div id="wrapper">
            <header>Home                
               <div id="fade">
                <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;">Indie-GO!</h1>
                </div>
                <div class="img">
                    <img src="118_832586-W.jpg"/>
                </div>
            </header>

Upvotes: 2

JGCW
JGCW

Reputation: 1529

What you are looking for is something like wow.js

  1. Use the wow.js plugin (Click here for documentation)
  2. Add the css <link rel="stylesheet" href="css/animate.css">

  3. Add the script and activate the script. 

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

    `

  4. Add the class class="wow rollIn or whatever you like

and. your welcome ;)

Upvotes: 2

Jinu Kurian
Jinu Kurian

Reputation: 9416

Try this :) 

$(document).ready(function() {
  //$("#fade").fadeIn(5000);
  var b = $("#fade").position();
  $("#fade").css("left", "-80%");
  $("#fade").animate({
    left: "+" + b.left
  }, 5000);
});
header,
nav,
section,
footer,
#fade {
  display: block;
}
* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
html {
  background-color: slategrey;
}
header {
  border: 25px solid indigo;
  font-family: Arial Black;
  font-size: 25px;
  padding 30px;
  background-color: indigo;
  text-shadow: 5px 4px 3px darkgrey;
  color: beige;
}
#fade {
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body>
  <div id="wrapper">
    <header>Home
      <div id="fade">
        <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;">Indie-GO!</h1>
      </div>
      <div class="img">
        <img src="http://www.bobsballoons.com/Photos/BalloonsInField.jpg" />
      </div>
    </header>
  </div>
</body>

Upvotes: 2

Related Questions