Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta name="description" content="Keyframe animation for header and name on page load" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class='displacement'></div>
  <header>This is the header</header>
  <div class='header'>
    <div class='background'>
      <h1>Justin Hathaway</h1>
    </div>
  </div>
</body>
</html>
 
@-webkit-keyframes fade-in {
    0% {
        -webkit-transform: translateY(-100px);
        opacity:0;
        text-shadow:none;
    }
  
    50% {
        -webkit-transform: translateY(0);
        opacity:1;
        text-shadow:none;
    }
  
    75% {
      text-shadow: 0 0 30px white;
    }
  
    100% {
      text-shadow:0 0 15px white;
    }
}
​
h1 {
  -webkit-animation: fade-in 2.5s ease;
  -moz-animation: fade-in 2.5s ease;
  -o-animation: fade-in 2.5s ease;
  animation: fade-in 2.5s ease;
  margin:0;
  text-shadow:0 0 15px white; 
  font-size:84px;
  color:white;
  font-weight:100;
  text-align:center;
  font-family:sans-serif;
  padding-top:100px;
  opacity:1;
  transition:all 1s ease;
}
​
​
@-webkit-keyframes background-pan {
  from {
    transform:translatey(-25%);
  }
  to {
    transform:translatey(0);
  }
}
  
  html, body {
  margin:0;
  padding:0;
}
​
.background {
    height:150%;
    width:100%;
    -o-animation:background-pan 2.25s ease;
    -moz-animation:background-pan 2.25s ease;
    animation:background-pan 2.25s ease;
    -webkit-animation:background-pan 2.25s ease;
    background-image:url('http://images3.alphacoders.com/424/42485.jpg');
    background-size:cover;
}
​
.header {
  overflow:hidden;
  width:100%;
  height:550px;
  position:fixed;
  top:0;
}
​
.displacement {
  width:100%;
}
​
header {
  margin:0;
  width:100%;
  padding:20px;
  background:deepskyblue;
}
​
​
 
var height = $('header').height();
​
$('.displacement').css('height',height);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jhath16pro
0viewers