Hipster date intro screen

Developer
Zach Saucier
Size
5,878 Kb
Views
32,384
  1. Hipster date intro screen Previews
  2. Hipster date intro screen HTML Codes
  3. Hipster date intro screen CSS Codes
  4. Hipster date intro screen JS Codes

How do I make an hipster date intro screen?

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. What is a hipster date intro screen? How do you make a hipster date intro screen? This script and codes were developed by Zach Saucier on 20 August 2022, Saturday.

Hipster date intro screen Previews
IQ Test

Hipster date intro screen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<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>

Hipster date intro screen - Script Codes CSS Codes

@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; }
}

Hipster date intro screen - Script Codes JS Codes

// For more check out zachsaucier.com
// Using vanilla JS FitText https://github.com/adactio/FitText.js
window.fitText(document.querySelector(".container"));
Hipster date intro screen - Script Codes
Hipster date intro screen - Script Codes
Home Page Home
Developer Zach Saucier
Username Zeaklous
Uploaded August 20, 2022
Rating 4.5
Size 5,878 Kb
Views 32,384
Do you need developer help for Hipster date intro screen?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zach Saucier (Zeaklous) Script Codes
Name
Simple p5.js music visualizer
Change transformation-origin mid animation
Reverse clip path with blend modes
Single Element gif Recreation
CSS-Only Full Page Slider
Business card
Changing a CSS Animation at its Current Values
Converting CSS Animations to Transitions
Building Images
CSS Callback Functions Using Iteration
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!