Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!doctype html>
<html lang="en">
<head>

	<meta charset="UTF-8">
	<title>scrollingBanner</title>
	<link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>

	<header class="header">

		<div class="container">
			
			<nav class="nav-main">

				<ul>

					<li class="first"><a href="#">Menu Item</a></li>
					<li><a href="#">Menu Item</a></li>
					<li class="last"><a href="#">Menu Item</a></li>

				</ul>

			</nav>

		</div> <!-- end container -->

	</header>
		
	<div class="banner">

		<div class="banner-text">
			
			<h3>Banner Text goes here</h3>
        <h4>Subline</h4>

		</div> <!-- end banner-text -->
		
	</div> <!-- end banner -->

	<div class="main">
	 
		 <div class="container">
		
			<div class="post">
				
				<h2>Heading</h2>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit, dolor, est, assumenda accusamus veritatis dolorem saepe placeat voluptatibus fugit reiciendis eaque at. Debitis, laudantium, quis nobis fugiat culpa facilis necessitatibus beatae ipsam eligendi placeat unde iste molestiae adipisci qui saepe provident distinctio sequi cupiditate sed odit quod quaerat amet aliquam quisquam ducimus hic autem eveniet aperiam vero nihil ullam excepturi sunt delectus voluptatibus dicta cum corrupti consequatur omnis vel esse itaque laborum repellendus libero quos harum minus voluptate impedit ad ratione a. Explicabo blanditiis quia neque eligendi doloremque. Adipisci culpa tenetur dolorem dolor error cumque odio in asperiores delectus.</p>
				
			</div> <!-- end post -->
		
			<article class="post">
			 
				<h3>Article Headline</h3>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat praesentium corporis architecto reiciendis facere beatae harum sed dolorum saepe cupiditate et velit accusamus temporibus commodi?</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dicta libero at harum aperiam eos nam similique ut saepe maiores consequuntur laudantium consequatur necessitatibus officiis incidunt animi fugiat dolorem aspernatur.</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat praesentium corporis architecto reiciendis facere beatae harum sed dolorum saepe cupiditate et velit accusamus temporibus commodi?</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dicta libero at harum aperiam eos nam similique ut saepe maiores consequuntur laudantium consequatur necessitatibus officiis incidunt animi fugiat dolorem aspernatur.</p>
				
			</article>
			
			<article class="post">
			 
				<h3>Article Headline</h3>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat praesentium corporis architecto reiciendis facere beatae harum sed dolorum saepe cupiditate et velit accusamus temporibus commodi?</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dicta libero at harum aperiam eos nam similique ut saepe maiores consequuntur laudantium consequatur necessitatibus officiis incidunt animi fugiat dolorem aspernatur.</p>
				
			</article>
			
			<article class="post">
			 
				<h3>Article Headline</h3>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat praesentium corporis architecto reiciendis facere beatae harum sed dolorum saepe cupiditate et velit accusamus temporibus commodi?</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dicta libero at harum aperiam eos nam similique ut saepe maiores consequuntur laudantium consequatur necessitatibus officiis incidunt animi fugiat dolorem aspernatur.</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat praesentium corporis architecto reiciendis facere beatae harum sed dolorum saepe cupiditate et velit accusamus temporibus commodi?</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dicta libero at harum aperiam eos nam similique ut saepe maiores consequuntur laudantium consequatur necessitatibus officiis incidunt animi fugiat dolorem aspernatur.</p>
				
			</article>

		</div> <!-- end container -->
		
	</div> <!-- end main -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/script.js"></script>
	
</body>
</html>
              
            
!

CSS

              
                /*---------- VARIABLES ----------*/

$font-family: 'Lato';
$font-family-fallback: sans-serif;
$font-size: 1em;
$font-weight: 300;

$line-height: 1.5em;

$amount: 10%;

$grid-container: 940px;

/*---------- COLORS ----------*/

$color: #5b5b5b;
$color-bg: #fff;

$color-link: #3498db;
$color-link-hover: darken($color-link, $amount);

/*---------- GENERAL ----------*/

body {
  background: $color-bg;
	color: $color;
  font: $font-weight #{$font-size}/#{$line-height} $font-family, $font-family-fallback;
	margin: 0;
}

a {
  color: #3498db;
  text-decoration: none;
  
  &:hover {
    color: $color-link-hover;
  }
  
}

article {
  display: block;
}

h2 {
  font-size: 2em;
  line-height: 1.25em;
  margin: 0 0 .25em 0;
}

h3 {
  font-size: 1.5em;
  line-height: 1.33em;
  margin: 0 0 .33em 0;
}

h4 {
  font-size: 1em;
  line-height: 1.5em;
  margin: 0 0 .5em 0;
}

p {
  margin: 0 0 .5em 0;
}

/*---------- UTILITIES ----------*/

.clearfix {
	*zoom: 1;

	&:before, &:after {
		content: ' ';
		display: table; 
	}

	&:after { clear: both; }

}

/*---------- GRID ----------*/

.container {
	@extend .clearfix;
	margin: 0 auto;
	width: $grid-container;
}

/*---------- HEADER ----------*/

.header {
	padding: 1em 0;
}

/*---------- MAIN ----------*/

.main {
  margin-top: 3em;
}

/*---------- NAVIGATIONS ----------*/

.nav-main {
  float: right;
  
  ul {
    @extend .clearfix;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    float: left;
    margin: 0 .5em;
    
    &.first {
      margin-left: 0;
    }
    
    &.last {
      margin-right: 0;
    }
    
  }
  
  a {
    color: $color;
    display: inline-block;
  }
  
}

/*---------- POSTS ----------*/

.post {
  margin-bottom: 2em;
}

/*---------- BANNER ----------*/

/* INFO
   Banner Graphic must be at least the height of .banner + height of parent element (in this case the header)
   e.g.  .banner { height: 22em }
         .header { height: 3.5em }
         22em + 3.5em = 25.5em
         25.5em * 16px = 408px
         => Banner Graphic must be at least 408px height!

Graphic: http://unsplash.com/post/81123587039/download-by-wojtek-witkowski
*/

.banner {
	background: url(https://i.imgur.com/1DRTAiD.jpg) no-repeat fixed 50% 0;
	height: 22em;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.banner-text {
  color: #fff;
  font-size: 1.25em;
  left: 0;
  position: absolute;
  top: 75%;
  text-align: center;
  text-shadow: 0 0px 2px rgba(0, 0, 0, .5);
  width: 100%; 
}
              
            
!

JS

              
                // scrollBanner

function scrollBanner(config) {

	scrollPos = $(this).scrollTop();

	config.bannerText.css({
		'margin-top' : -(scrollPos/3) + "px",
		'opacity' : 1-(scrollPos/300)
	});

	config.banner.css({
		'background-position': 'center ' + (-scrollPos/4) + "px"
	});

}

$(document).ready(function(){
	
	$(window).scroll(function() {

		scrollBanner({
			banner: $('.banner'),
			bannerText: $('.banner-text')
		});

	});

});
              
            
!
999px

Console