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 lang="en">
<head>
  <meta charset="UTF-8">
  <title>Big Slide Test</title>
  <link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
</head>
<body>
​
<section class="slide pr">
  <h1>Meet our designs</h1>
</section>
<section class="slide cloud">
  <h1>It is simple as this</h1>
</section>
<section class="slide pr">
  <h1>Let's get started</h1>
</section>
<section class="slide cloud">
  <h1>No more bad mood</h1>
</section>
​
​
<script src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
 
section, h1, body { margin: 0; padding: 0 ;} 
​
/*= Slide Style
/////////////////////////////////////////////////////*/
.slide {
}
.slide.pr     { background-color: #3498db; color: #ecf0f1; }
.slide.cloud  { background-color: #ecf0f1; color: #3498db;}
.slide h1 {
  font-family: 'Maven Pro', Arial, serif;
  font-weight: normal;
  text-align: center;
  font-size: 4rem;
}
 
$(document).ready(function() {
  $(window).resize(function() {
    $('.slide').css('padding', ($(window).height()-$('.slide h1').height())/2+'px 0');
  });
  $('.slide').css('padding', ($(window).height()-$('.slide h1').height())/2+'px 0');
​
  function animSlideHeading() {
    $('.slide h1').animate({
      opacity: .6
    }, 500, 'swing', function() {
      $('.slide h1').animate({
        opacity: 1
      }, 500, 'swing', animSlideHeading);
    });
  }
  animSlideHeading();
});
Output

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

Dismiss x
public
Bin info
tjwudipro
0viewers