Parralax Test

by Marcel Ferdinand

HTML

<body>
  <section id='cardiac-rhythm'>
    <div class='arrest'></div>
    <h1>
      cardiac
      <em></em>
    </h1>
  </section>
  <section id='minor-parallax'>
    <div class='bg bg0'>
      minor
      <strong>parallax</strong>
    </div>
    <div class='bg bg1'></div>
    <div class='bg bg2'></div>
    <div class='bg bg3'></div>
    <div class='bg bg4'></div>
    <div class='bg bg5'></div>
    <div class='bg bg6'></div>
    <div class='bg bg7'></div>
  </section>
  <section id='basic-flex-grid'>
    <div class='grid_row'>
      <div class='grid_item title'>
        basic
        <strong>flex</strong>
        grid
      </div>
    </div>
    <div class='grid_row'>
      <div class='grid_item'></div>
      <div class='grid_item'></div>
    </div>
    <div class='grid_row'>
      <div class='grid_item'></div>
      <div class='grid_item'></div>
      <div class='grid_item'></div>
    </div>
  </section>
  <section id='slide-n-search'>
    <div class='result'>
      Sorry,
      <span>0 results</span>
      were found for
      <span>keyword</span>
    </div>
    <input>
    <div class='title'>
      slide
      <strong>n</strong>
      search
    </div>
  </section>
  <section id='sneaky-placeholders'>
    <form action='#'>
      <label>
        <input placeholder='Placeholder' type='text'>
        <span>Placeholder</span>
      </label>
      <div class='title'>
        sneaky
        <strong>placeholder</strong>
      </div>
    </form>
  </section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</body>

CSS

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:700,300);
* {
  font-family: "Raleway", sans-serif;
  color: #ff7c53;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -17px;
  overflow: auto;
}

section {
  float: left;
  position: relative;
  width: 33.33333%;
  height: 22vw;
  background: #fff;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
section:nth-child(2n+1) {
  background: #eee;
}

/* Section: Cardiac Rhythm */
#cardiac-rhythm {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #2D112B;
  -webkit-animation: rhythm-bg 3s infinite;
          animation: rhythm-bg 3s infinite;
  cursor: pointer;
}
#cardiac-rhythm:hover, #cardiac-rhythm:hover * {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
  color: #fedfcd;
}
#cardiac-rhythm:hover .arrest, #cardiac-rhythm:hover * .arrest {
  display: block;
}
#cardiac-rhythm:hover em:after, #cardiac-rhythm:hover * em:after {
  content: "đź’€arrest_";
}
#cardiac-rhythm .arrest {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(http://i.imgur.com/eCj8vPL.gif);
  opacity: 0.1;
}
#cardiac-rhythm h1 {
  line-height: 22vw;
  font-size: 2vw;
  text-align: center;
  -webkit-animation: rhythm 3s infinite;
          animation: rhythm 3s infinite;
  -webkit-font-smoothing: antialiased;
}
#cardiac-rhythm h1 em {
  font-weight: 300;
  margin-left: -.25em;
  font-style: normal;
}
#cardiac-rhythm h1 em:after {
  content: "❤rhythm";
}
@-webkit-keyframes rhythm {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  5% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  7% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  15% {
    -webkit-transform: scale(1.2);
            transform:...

JavaScript

/* Imgur hosting fix */

if(window.location.protocol != "https:") {
  window.location.protocol = "https:";
}

/* Section: Minor Parallax */

var bg0 = $('#minor-parallax .bg0').offset().top;
$('#minor-parallax').mousemove(function(e){
  var scrolled = (e.pageY - $(window).scrollTop())/5;
  $('#minor-parallax .bg0').css('top',(bg0-scrolled*0.9)+'px');
  $('#minor-parallax .bg1').css('top',-(scrolled*0.9)+'px');
  $('#minor-parallax .bg2').css('top',-(scrolled*0.7)+'px');
  $('#minor-parallax .bg3').css('top',-(scrolled*0.5)+'px');
  $('#minor-parallax .bg4').css('top',-(scrolled*0.3)+'px');
  $('#minor-parallax .bg5').css('top',-(scrolled*0.2)+'px');
  $('#minor-parallax .bg6').css('top',-(scrolled*0.1)+'px');
  $('#minor-parallax .bg7').css('top',-(scrolled*0.1)+'px');
});

/* Section: Slide 'n Search */

$("#slide-n-search input").keyup(function(e) {
  if (e.keyCode == 13) {
    if($.trim($(this).val())){
      $(".result span:nth-child(2)").html($.trim($(this).val().replace(/<[^>]+>/ig,"")));
      $(this).fadeOut("slow", function(){
        $(".result").fadeIn();
        $("#slide-n-search input").val("");
        setTimeout(function(){
           $(".result").fadeOut("slow", function(){
             $("#slide-n-search input").fadeIn().focus();
           });
        }, 2000);
      });
    }
  }
});

/* Section: Sneaky Placeholders */

$('#sneaky-placeholders input').on('change', function() {
  var input = $(this);  
  if (input.val().length) {
    input.addClass('populated');
  } else {
    input.removeClass('populated');
  }
});