Simple Responsive Design

HTML <body>

<div class="cwrapper red">
  <div class="vcenter container">
    <p id="simple">Simple</p>
    <i id="star" class="fa fa-star"></i>
  </div>
  <div class="arrow bounce"><i class="fa fa-chevron-down"></i></div>
</div>

<div class="cwrapper white">
  <div class="vcenter container">
    <h1 class="cd-headline slide">
      <span>Lorem ipsum </span>
      <span class="cd-words-wrapper">
        <b class="is-visible">dolor.</b>
        <b>sit.</b>
        <b>amet.</b>
        <b>consectetur.</b>
        <b>adipiscing.</b>
        <b>elit.</b>
        <b>sed.</b>
        <b>eiusmod.</b>
        <b>tempor.</b>
        <b>incididunt.</b>
        <b>labore.</b>
        <b>magna.</b>
      </span>
    </h1>
  </div>
</div>

<div class="cwrapper blue">
  <div class="container css">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

<div class="cwrapper maroon">
  <div class="container vcenter">
    <p>Lorem ipsum dolor sit amet<br /><span>Consectetur?</span></p>
  </div>
</div>

CSS <style>

* {padding:0; margin:0;}
body {background-color:#FFF;}

.cwrapper {height:100vh;}
  .cwrapper.red {background-color:#ff6b6b;}
  .cwrapper.white {background-color:#f9f9f9;}
		.cwrapper.white div span {font-family:'Open Sans', sans-serif; font-size:2em; font-weight:600; letter-spacing:-1.5px; color:#4ECDC4;}
  .cwrapper.blue {background:#235378 url(http://www.unixstickers.com/image/data/stickers/css3/css3_unofficial_shaped.png) no-repeat center; background-size:25%;}
  .cwrapper.maroon {background-color:#c44d58;}
		.cwrapper.maroon p {font-family:'Lato', sans-serif; font-weight:400; color: #FFF; font-size:2em;}
			.cwrapper.maroon p span {font-family:'Alex Brush', cursive; font-size:3em;}

.container {width:100%; text-align:center;}
	.container.vcenter {position:relative; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);}
  .container.css {position:relative; top:25%; transform: translateY(-30%); -webkit-transform: translateY(-30%); -moz-transform: translateY(-30%); -ms-transform: translateY(-30%);}
  	.container.css p {font-family:'Open Sans', sans-serif; font-weight:600; font-size:1.6em; color:#FFF;}

#simple {text-align:center; color:#FFF; font-size:8em; font-family:'Alex Brush', cursive;}
#star {color:#FFF; font-size:3em; margin-top:-20px;}

/* arrow bounce */

.arrow {position:absolute; right:0; bottom:5px; left:0; margin:auto; width:32px; color:#FFF; font-size:2em; cursor:pointer;}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
      opacity: 1;
  }
  40% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
      opacity: .3;
  }
  60% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
      opacity: .3;
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@-moz-keyframes .bounce{
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  60% {
    -moz-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

.arrow.bounce {animation:bounce 2s infinite; -webkit-animation:bounce 2s infinite; -moz-animation:bounce 2s infinite;}

/* xslide styles */

.cd-headline {
  font-size: 1rem;
  line-height: 1.2;
}

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}
.no-js .cd-words-wrapper b {
  opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}

/* xslide animation */

.cd-headline.slide span {
  display: inline-block;
  padding: .2em 0;
}
.cd-headline.slide .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.slide b {
  opacity: 0;
  top: .2em;
}
.cd-headline.slide b.is-visible {
  top: 0;
  opacity: 1;
  -webkit-animation: slide-in 0.6s;
  -moz-animation: slide-in 0.6s;
  animation: slide-in 0.6s;
}
.cd-headline.slide b.is-hidden {
  -webkit-animation: slide-out 0.6s;
  -moz-animation: slide-out 0.6s;
  animation: slide-out 0.6s;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}
@-moz-keyframes slide-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}
@keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
    -moz-transform: translateY(120%);
    -ms-transform: translateY(120%);
    -o-transform: translateY(120%);
    transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

JS <script> (jQuery supported)

jQuery(document).ready(function($){
	//set animation timing
	var animationDelay = 2500,
		//loading bar effect
		barAnimationDelay = 3800,
		barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
		//letters effect
		lettersDelay = 50,
		//type effect
		typeLettersDelay = 150,
		selectionDuration = 500,
		typeAnimationDelay = selectionDuration + 800,
		//clip effect 
		revealDuration = 600,
		revealAnimationDelay = 1500;
	
	initHeadline();

function initHeadline() {
		//insert <i> element for each letter of a changing word
		singleLetters($('.cd-headline.letters').find('b'));
		//initialise headline animation
		animateHeadline($('.cd-headline'));
	}

//trigger animation
			setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
		});
	}

}  else if($word.parents('.cd-headline').hasClass('clip')) {
			$word.parents('.cd-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
				switchWord($word, nextWord);
				showWord(nextWord);
			});

} else if ($word.parents('.cd-headline').hasClass('loading-bar')){
			$word.parents('.cd-words-wrapper').removeClass('is-loading');
			switchWord($word, nextWord);
			setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
			setTimeout(function(){ $word.parents('.cd-words-wrapper').addClass('is-loading') }, barWaiting);

} else {
			switchWord($word, nextWord);
			setTimeout(function(){ hideWord(nextWord) }, animationDelay);
		}
	}

function showWord($word, $duration) {
		if($word.parents('.cd-headline').hasClass('type')) {
			showLetter($word.find('i').eq(0), $word, false, $duration);
			$word.addClass('is-visible').removeClass('is-hidden');

}  else if($word.parents('.cd-headline').hasClass('clip')) {
			$word.parents('.cd-words-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){ 
				setTimeout(function(){ hideWord($word) }, revealAnimationDelay); 
			});
		}
	}

if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
			var nextWord = takeNext($word);
			switchWord($word, nextWord);
		} 
	}

function takeNext($word) {
		return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
	}

function takePrev($word) {
		return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
	}

function switchWord($oldWord, $newWord) {
		$oldWord.removeClass('is-visible').addClass('is-hidden');
		$newWord.removeClass('is-hidden').addClass('is-visible');
	}
});

$(document).ready(function() {
  $('body').css('display', 'none');
  $('body').fadeIn(1000);

$('.link').click(function(event) {
    event.preventDefault();
    newLocation = this.href;
    $('body').fadeOut(1000, newpage);
  });

function newpage() {
    window.location = newLocation;
  }
});

$(".arrow.bounce").click(function() {
  $('html,body').animate({
    scrollTop: $(".cwrapper.white").offset().top},'slow');
});

Give us some feedback, any feedback, we just want feedback!

Simple Responsive Design

Branch Project