Skip to content

Instantly share code, notes, and snippets.

@jesteracer

jesteracer/test.html

Last active April 18, 2016 08:45
Show Gist options
  • Save jesteracer/2a2a308c04c827c24450a1a889f273d9 to your computer and use it in GitHub Desktop.
Save jesteracer/2a2a308c04c827c24450a1a889f273d9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.html
<html>
<head>
<meta charset="utf-8" />
<style>
body, html{
margin: 0px;
padding: 0px;
}
.bg{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-image: url("https://meduza.io/image/attachments/images/000/026/394/large/mmH-WDvnMJzIePj5MsciMg.jpg");
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
#wrapper{
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
}
.header-wrapper{
}
.header{
display: inline-block;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #fff;
margin: 0.4em;
margin-top: .1em;
margin-left: 0.4em;
font-size: 8em;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 0.5em,
rgba(0,0,0,0) 0.5em,
rgba(0,0,0,0) 1em
);
}
.spacer{
display: block;
}
.bounceIn {
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.caption{
position: absolute;
bottom: 10%;
color: #fff;
font-weight: bold;
font-size: 7em;
margin-left: 0.4em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="fadeIn bg"></div>
<div id="wrapper">
<h1 class="bounceInDown header">Привет, я</h1>
<span class="spacer"></span>
<h1 class="bounceInDown header">шапито апп</h1>
<h2 class="bounceIn caption">И ей не стоило этого делать</h2>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment