Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/demo-animation.html

Last active August 29, 2015 14:11
Show Gist options
  • Save tomhodgins/4420bedaeb4f9f96ef6f to your computer and use it in GitHub Desktop.
Save tomhodgins/4420bedaeb4f9f96ef6f to your computer and use it in GitHub Desktop.
Download ZIP
Demo Animation With Element Queries
Raw
demo-animation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Animation with Element Queries</title>
<link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" type="text/css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-kerning: auto;
}
html {
margin: 0;
padding: 0;
font-size: 12pt;
line-height: 1.4;
font-family: "Open Sans", sans-serif;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
background: #eee;
}
#animation {
position: relative;
display: block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: default;
width: 100%;
}
#images {
display: block;
width: 100%;
height: auto;
position: relative;
}
#images img {
display: block;
width: 100%;
display: block;
margin: 0;
width: 100%;
max-width: 100%;
}
#foreground {
position: absolute;
top: 0;
left: 0;
}
#headline {
position: absolute;
width: 100%;
top: 50%;
margin-top: -6%;
text-align: center;
z-index: 1000;
}
#headline h1,
#headline h2 {
position: relative;
display: block;
width: 100%;
margin: 0 auto;
padding: 0 .25em;
line-height: 1.1;
letter-spacing: -.05em;
text-align: center;
transition: all .1s ease-in-out;
}
h1 {
400%;
}
h2 {
150%;
color: #005;
font-weight: 400;
}
.delay-onefifty {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.delay-two {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.delay-three {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
</style>
</head>
<body>
<section id="animation">
<div id="images">
<img src="//placehold.it/3000x1000/fff&amp;text=%20" id="background">
<img src="//placehold.it/3000x1000/999/c0f&amp;text=%20" id="foreground" class="animated fadeInUp delay-three">
</div>
<div id="headline">
<h1 class="animated zoomInRight delay-onefifty">Headline</h1>
<h2 class="animated zoomInLeft delay-two">Second line of Headline</h2>
</div>
</section>
<!--[if lt IE 9]><script src="//elementqueries.com/EQCSS-polyfills.js"></script><![endif]-->
<script src="//elementqueries.com/EQCSS.js"></script>
<script type="text/eqcss">
@element "#animation" and (min-width: 479px) {
#headline {
font-size: 10pt;
margin-top: -5%;
}
}
@element "#animation" and (min-width: 480px) {
#headline {
font-size: 14pt;
margin-top: -6%;
}
}
@element "#animation" and (min-width: 650px) {
#headline {
font-size: 18pt;
}
}
@element "#animation" and (min-width: 768px) {
#headline {
font-size: 24pt;
}
}
@element "#animation" and (min-width: 960px) {
#headline {
font-size: 36pt;
}
}
@element "#headline h1" and (min-characters: 15) {
#headline h1 {
font-size: 250%;
}
}
@element "#headline h1" and (min-characters: 30) {
#headline h1 {
font-size: 200%;
}
}
@element "#headline h1" and (min-characters: 45) {
#headline h1 {
font-size: 150%;
}
}
@element "#headline h2" and (min-characters: 15) {
#headline h2 {
font-size: 100%;
}
@element "#headline h2" and (min-characters: 30) {
#headline h2 {
font-size: 75%;
}
}
@element "#headline h2" and (min-characters: 45) {
#headline h2 {
font-size: 50%;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment