cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

Code Indentation

     

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.

            
              nav
  .logo
  ul
    li
      a(href="#") Item 1
    li
      a(href="#") Item 2
    li
      a(href="#") Item 3
    li
      a(href="#") Item 4
header
  .headline
    .inner
      h1 Hello
      p Scroll down the page
section
  h2 Lorem ipsum
  p Sed lectus mi, eleifend quis congue non, lacinia id quam. Cras porta pellentesque nulla, ac auctor ligula scelerisque non. In vel placerat lacus. Nam pretium vitae purus et laoreet. Aliquam erat volutpat. Pellentesque id volutpat sem, et condimentum nisl. Donec bibendum congue mauris, ac commodo tortor volutpat ac. Donec lobortis lorem nisi, sit amet bibendum lacus vestibulum interdum. Donec mollis ligula at semper iaculis.
  p Duis et vestibulum turpis. Duis non ultrices quam. Sed volutpat imperdiet sollicitudin. Aliquam erat volutpat. Donec at adipiscing purus. Duis varius metus vitae mattis pellentesque. Etiam tempor urna sed congue vulputate. Nulla neque metus, vulputate a dui ut, suscipit fringilla risus. Suspendisse posuere dignissim vestibulum. Praesent congue vestibulum dolor, quis lobortis libero egestas ac. Sed venenatis bibendum interdum. Curabitur rhoncus urna quis viverra varius. Cras posuere non tortor at volutpat. Suspendisse porta, turpis at ullamcorper imperdiet, felis lacus eleifend sapien, pulvinar elementum ipsum lacus ut elit. Sed ipsum erat, porttitor non malesuada at, interdum at nibh. Mauris ut ornare purus.

  h2 Nulla vitae lacus
  p Praesent commodo elit vel massa gravida lacinia. Maecenas auctor dignissim porttitor. Donec tincidunt mi eget semper bibendum. Morbi quis sagittis sapien. Fusce ut ligula purus. Nulla tristique augue nec lectus lacinia congue. Nunc tempus eros quam, ac sollicitudin mauris vehicula ac. Vivamus pulvinar elit ac risus placerat rutrum.
  p Magna indoctum erroribus no his, alii fabellas eum an. Et tota clita eleifend eum, pri ne euismod eloquentiam, sea ei quas tibique. Ipsum tamquam cum id, tota clita congue ad usu. Ex eos admodum nominati. Eam ei summo dictas nostrum, vim harum graeco apeirian te. Sensibus persequeris nam an, cu legere oblique tincidunt eos, et soleat vivendum indoctum eos.
  p Donec lobortis porta ipsum a tristique. Integer sit amet ipsum porta, bibendum mauris vitae, ultricies lectus.
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  color: #333;
}

header {
  background: #111;
}

.headline {
  position: relative;
  height: 400px;
  color: #fff;
  text-align: center;
  background: url('https://farm9.staticflickr.com/8088/8363737128_b76782c7a2_b.jpg') no-repeat center center;
  background-size: cover;
  &:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(#111, 0.5);
  }
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 10;
  transform: translateX(-50%) translateY(-50%);
  animation: fade-in 0.75s 0.25s ease-in forwards;
  h1 {
    margin: 0;
    font-size: 4em;
    line-height: 1.2em;
  }
  p {
    margin: 0;
    font-size: 1.4em;
    font-style: italic;
    font-family: serif;
  }
}

nav {
  position: fixed;
  width: 100%;
  z-index: 10;
  &.scrolled {
    background: rgba(#111, 0.9);
  }
  ul {
    float: right;
    list-style: none;
    padding: 25px;
    margin: 0;
  }
  li {
    float: left;
  }
  a {
    font-size: 0.9em;
    color: #fff;
    text-decoration: none;
    margin: 5px 0 0 20px;
    display: block;
    &:hover {
      color: darken(#fff, 7%);
    }
  }
}

.logo {
  height: 75px;
  float: left;
  &:before, &:after {
    position: absolute;
    font-size: 7em;
    font-weight: 300;
    line-height: 0;
    color: #fff;
    top: 25px;
  }
  &:before {
    content: '\00BB';
    left: 20px;
  }
  &:after {
    content: '\00AB';
    left: 34px;
  }
}

section {
  width: 100%;
  margin: 25px auto;
  padding: 20px;
  max-width: 800px;
  font-size: 1.2em;
  line-height: 1.6em;
  box-sizing: border-box;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
            
          
!
            
              var $headline = $('.headline'),
    $inner = $('.inner'),
    $nav = $('nav'),
    navHeight = 75;

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop(),
      headlineHeight = $headline.outerHeight() - navHeight,
      navOffset = $nav.offset().top;

  $headline.css({
    'opacity': (1 - scrollTop / headlineHeight)
  });
  $inner.children().css({
    'transform': 'translateY('+ scrollTop * 0.4 +'px)'
  });
  if (navOffset > headlineHeight) {
    $nav.addClass('scrolled');
  } else {
    $nav.removeClass('scrolled');
  }
});
            
          
!
999px
Loading ..................

Console