Hipster date intro screen

In this example below you will see how to do a Hipster date intro screen with some HTML / CSS and Javascript

This is one version of the intro screen for an app I'm making. Yay for no jQuery!Partially inspired by the awesome work http://codepen.io/derekjp/pen/rfvlm by Derek Palladino

Thumbnail
This awesome code was written by Zeaklous, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Zeaklous ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Hipster date intro screen</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import "https://fonts.googleapis.com/css?family=Amatic+SC:400,700";
/* Not actually used currently... */
* {
  box-sizing: border-box;
}

html {
  font-family: 'Amatic SC', cursive;
  text-rendering: optimizeLegibility;
  background: #84596B;
  color: #fff;
  overflow-x: hidden;
}

body {
  font-size: 100%;
}

button {
  /* Remove default styling */
  background: none;
  border: none;
  outline: 0;
  font-family: inherit;
  /* Add my styles */
  background-color: #B58AA5;
  color: #fff;
  font-size: 0.7em;
  padding: 0.3em 0.5em;
  border-radius: 0.2em;
  cursor: pointer;
}

.container {
  width: 90%;
  max-width: 700px;
  min-width: 330px;
  margin: 0 auto;
  position: relative;
}

.absolute {
  position: absolute;
}

.center {
  left: 50%;
  transform: translateX(-50%);
}

.head {
  white-space: nowrap;
}
.head h2, .head h3 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.font-larger {
  font-size: 1.15em;
}

.font2 {
  font-size: 2em;
}

.font3 {
  font-size: 3em;
}

.text-center {
  text-align: center;
}

.main-text {
  top: 3em;
  overflow: hidden;
  padding-bottom: 0.5em;
}
.main-text h4 {
  margin: 0.5em 0 0 0;
  animation-delay: 1s;
}
.main-text p {
  font-size: .8em;
  margin-top: .3em;
  margin-bottom: 0;
}
.main-text .first {
  animation-delay: 2.5s;
}
.main-text .second {
  margin-top: 0.25em;
  animation-delay: 4s;
}

.call-to-action {
  animation-delay: 6s;
  margin: 0 auto;
}

/* Animations */
.hello {
  transform: translate3d(-3000px, 0, 0);
  animation: bounceInLeft .75s forwards;
}

.date-name {
  transform: translate3d(3000px, 0, 0);
  animation: bounceInRight .5s .4s forwards;
}

.flip-down {
  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  animation-name: flipInX;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.fade-in {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  animation-name: fadeInUp;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

/* From Animate.css https://github.com/daneden/animate.css/blob/master/animate.css */
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <!-- This is meant for a vertical layout -->
<div class="container">
  <div class="center absolute head">
      <h3 class="font2 hello">Hello,</h3>
      <h2 class="font3 date-name">Jane!</h2>
  </div>
  <div class="main-text absolute">
    <h4 class="font-larger text-center flip-down">Welcome to our date!</h4>
    <p class="first fade-in">It will be full of wondrous suprises - even I don't know what we'll do yet.</p>
    <p class="second fade-in">It's your time to choose! Let's get this thing started.</p>
    <div class="text-center"><button class="call-to-action flip-down">Let's go!</button></div>
  </div>  
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/adactio/FitText.js/master/fittext.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Zeaklous/hipster-date-intro-screen-GgXvXG */
@import "https://fonts.googleapis.com/css?family=Amatic+SC:400,700";
/* Not actually used currently... */
* {
  box-sizing: border-box;
}

html {
  font-family: 'Amatic SC', cursive;
  text-rendering: optimizeLegibility;
  background: #84596B;
  color: #fff;
  overflow-x: hidden;
}

body {
  font-size: 100%;
}

button {
  /* Remove default styling */
  background: none;
  border: none;
  outline: 0;
  font-family: inherit;
  /* Add my styles */
  background-color: #B58AA5;
  color: #fff;
  font-size: 0.7em;
  padding: 0.3em 0.5em;
  border-radius: 0.2em;
  cursor: pointer;
}

.container {
  width: 90%;
  max-width: 700px;
  min-width: 330px;
  margin: 0 auto;
  position: relative;
}

.absolute {
  position: absolute;
}

.center {
  left: 50%;
  transform: translateX(-50%);
}

.head {
  white-space: nowrap;
}
.head h2, .head h3 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.font-larger {
  font-size: 1.15em;
}

.font2 {
  font-size: 2em;
}

.font3 {
  font-size: 3em;
}

.text-center {
  text-align: center;
}

.main-text {
  top: 3em;
  overflow: hidden;
  padding-bottom: 0.5em;
}
.main-text h4 {
  margin: 0.5em 0 0 0;
  animation-delay: 1s;
}
.main-text p {
  font-size: .8em;
  margin-top: .3em;
  margin-bottom: 0;
}
.main-text .first {
  animation-delay: 2.5s;
}
.main-text .second {
  margin-top: 0.25em;
  animation-delay: 4s;
}

.call-to-action {
  animation-delay: 6s;
  margin: 0 auto;
}

/* Animations */
.hello {
  transform: translate3d(-3000px, 0, 0);
  animation: bounceInLeft .75s forwards;
}

.date-name {
  transform: translate3d(3000px, 0, 0);
  animation: bounceInRight .5s .4s forwards;
}

.flip-down {
  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  animation-name: flipInX;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.fade-in {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  animation-name: fadeInUp;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

/* From Animate.css https://github.com/daneden/animate.css/blob/master/animate.css */
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}


/*Downloaded from https://www.codeseek.co/Zeaklous/hipster-date-intro-screen-GgXvXG */
// For more check out zachsaucier.com

// Using vanilla JS FitText https://github.com/adactio/FitText.js
window.fitText(document.querySelector(".container"));

Comments