<div class="embed-container">
<div class="panel-1">
<div class="america">
<span class="wrds-1 orange">America,</span>
<span class="wrds-2">we need</span>
<span class="wrds-3">to <span class="orange">talk.</span></span>
</div>
</div>
<div class="panel-2">
<div class="animation-contents">
<div class="separated-logo">
<div class="logo-top"><span class="point">POINT</span></div>
<div class="logo-bottom"><span class="taken">TAKEN</span></div>
<h2 class="tagline">We've Got Issues</h2>
</div>
</div>
</div>
<div id="static-intro">
<div class="air-info">
<p>Premieres<br>April 5, 2016 at 11/10C</p>
<p class="small">(check local listings)</p>
<span class="pbs-logo"></span>
</div>
<!-- <div class="branding">
<span class="pt-logo"></span>
</div> -->
</div>
<span class="down-arrow">
<span class="icon"></span>
</span>
</div>@mixin animation-fill($fill) {
animation-fill-mode: $fill;
animation-fill-mode: $fill;
animation-fill-mode: $fill;
animation-fill-mode: $fill;
animation-fill-mode: $fill;
}
@mixin animation($animate, $time) {
animation: $animate $time;
animation: $animate $time;
animation: $animate $time;
animation: $animate $time;
animation: $animate $time;
}
@mixin animation2($animate, $time, $animate2, $time2) {
animation: $animate $time, $animate2 $time2;
animation: $animate $time, $animate2 $time2;
animation: $animate $time, $animate2 $time2;
animation: $animate $time, $animate2 $time2;
animation: $animate $time, $animate2 $time2;
}
@mixin delay($delay) {
animation-delay: $delay;
animation-delay: $delay;
animation-delay: $delay;
animation-delay: $delay;
animation-delay: $delay;
}
@mixin slide($x, $y) {
transform: translate($x, $y);
transform: translate($x, $y);
transform: translate($x, $y);
transform: translate($x, $y);
transform: translate($x, $y);
}
@mixin rotateMove($deg,$x, $y) {
transform: rotate($deg) translate($x, $y);
transform: rotate($deg) translate($x, $y);
transform: rotate($deg) translate($x, $y);
transform: rotate($deg) translate($x, $y);
transform: rotate($deg) translate($x, $y);
}
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700|Strait);
// Typography
$base-font-size: 16px;
$base-font-family: 'PT Sans', sans-serif;
$base-font-weight: 400;
$base-line-height: $base-font-size * 2;
$more-line-height: 20px;
$heading-font-family: 'Strait', sans-serif;
$heading-font-weight: 700;
$small-font-size: $base-font-size * .75;
$purple: #64318D;
$bright-purple: #8038ba;
$orange: #ED502F;
$duration: .35s;
$bkp-small: 500px;
$bkp-medium: 800px;
$bkp-large: 1000px;
$bkp-extra-large: 1300px;
$rotate: 135deg;
.down-arrow{
opacity: 0;
display: table;
position: absolute;
bottom: 8%;
left:50%;
cursor: pointer;
.icon{
content:'';
height:40px;
width:40px;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
display: table;
/* position: absolute;
bottom: 8%;
left:50%;*/
transform: rotate($rotate); /* IE 9 */
transform: rotate($rotate); /* Chrome, Safari, Opera */
transform: rotate($rotate);
opacity: 0;
@media (min-width:$bkp-medium){
opacity: 1;
}
}
}
body{
font-smoothing:antialiased;
background: #ccc;
}
.embed-container{
overflow:hidden;
position:relative;
width:95%;
margin:0 auto;
display:block;
}
.panel-1, .panel-2{
opacity:0;
}
#static-intro{
opacity:0;
overflow: hidden;
display: block;
position: relative;
height: 400px;
// position:relative;
@media (min-width: $bkp-small) {
height: 580px;
}
.air-info{
font-family:$base-font-family;
color:white;
width: 100%;
float: none;
position: absolute;
bottom:0;
@media (min-width: $bkp-medium){
float: left;
width: 30%;
position:relative;
padding-top:30%;
}
p{
font-weight: 700;
font-size: 1.777em;
line-height: 1.25em;
padding: 0;
margin: 0 0 10px 0;
}
p.small{
font-weight: 400;
font-size: 1.333em;
line-height: 1.25em;
}
}
}
.panel-1, .panel-2{
opacity: 1;
position:absolute;
top:0;
/* position: relative;*/
width:100%;
height: 100%;
font-size:40px;
overflow: display;
@media (min-width: $bkp-small) {
font-size:60px;
}
@media (min-width: $bkp-large){
font-size:80px;
}
}
.separated-logo{
font-size:1.2em;
letter-spacing:.015em;
font-family: 'PT Sans', sans-serif;
font-weight:700;
/*font-size:.6em;*/
color: #fff;
font-weight:700;
margin:0 auto;
/*padding-right:1.2em;*/
display:table;
box-sizing:border-box;
.point, .taken{
font-size:.85em;
padding:.15em .1em;
display:block;
opacity:0;
@include animation(appear, $duration*.3);
@include animation-fill(forwards);
@include delay($duration*12);
}
.point{
display: table;
position: absolute;
right: -.3em;
z-index:200;
}
.taken{
display: table;
position: absolute;
left: -.3em;
z-index:200;
}
}
.logo-top{
height:1.3em;
background-color: $orange;
position:relative;
margin-top:1em;
margin-left:.2em;
opacity:0;
width:2.6em;
box-sizing:border-box;
&:after{
content:'';
position:absolute;
right:-3.4em;
bottom:0;
border-style:solid;
border-width: 1.8em 2em 0 1.6em;
border-color: transparent transparent transparent $orange;
box-sizing:border-box;
}
}
.logo-top{
@include animation2(appear, $duration, from-left-M, $duration*1.5);
@include animation-fill(forwards);
@include delay($duration*10);
}
.static .logo-top{
@include animation2(appear, $duration, from-left, $duration*1.5);
@include animation-fill(forwards);
@include delay($duration*10);
}
.logo-bottom{
height:1.3em;
background-color: $purple;
margin:.135em 0 0 1.6em;
position:relative;
opacity:0;
margin-right:.2em;
width:2.6em;
box-sizing:border-box;
&:before{
content:'';
position:absolute;
left:-3.4em;
top:0;
border-style:solid;
border-width: 0 1.6em 1.8em 2em;
border-color: transparent $purple transparent transparent;
box-sizing:border-box;
}
}
.logo-bottom{
@include animation2(appear, $duration, from-right-M, $duration*1.5);
@include animation-fill(forwards);
@include delay($duration*10);
}
.static .logo-bottom{
@include animation2(appear, $duration, from-right, $duration*1.5);
@include animation-fill(forwards);
@include delay($duration*10);
}
.tagline{
font-family: $heading-font-family;
font-size: .35em;
text-transform: uppercase;
font-weight: 200;
text-align: right;
margin: 1.3em -1.4em 1em 1em;
opacity: 0;
@media (min-width: $bkp-small){
font-size: .415em;
text-align: right;
margin: 1em -2.3em 0 0;
}
@media (min-width: $bkp-medium){
font-size: .415em;
text-align: right;
margin: 1em -2.3em 0 0;
}
}
.tagline{
@include animation(appear, $duration*3);
@include delay($duration*17);
@include animation-fill(forwards);
}
.panel-2 {
/*position: relative;*/
.big{
display:block;
position: absolute;
padding: 0;
left:42%;
/*bottom:7%;*/
margin:0 auto;
span{
position:relative;
font-family: 'PT Sans', sans-serif;
font-weight:700;
font-size: .625em;
margin:0;
padding:0;
display:block;
clear:both;
color: #fff;
opacity:0;
text-transform: uppercase;
}
.strike{
position: absolute;
top: .85em;
left: -.6em;
opacity: 0;
height:.3em;
width: 8.2em;
background-color:$orange;
/* animation: strike $duration*.6 steps(2);
animation-fill-mode: forwards;
animation-delay: $duration*31;*/
}
/* animation: disappear .5s;
animation-delay:$duration*40;
animation-fill-mode: forwards;*/
}
}
.panel-1 span{
font-family: 'PT Sans', sans-serif;
font-weight:700;
font-size: 1em;
margin:0;
padding:0;
display:inline-block;
color: $purple;
}
.america{
margin:120px auto 0 auto;
line-height: 1em;
letter-spacing: .0625em;
width:210px;
@media (min-width: $bkp-medium){
width:380px;
}
@include animation(disappear, .3s);
@include delay($duration*8);
@include animation-fill(forwards);
.wrds-1, .wrds-2, .wrds-3{
opacity:0;
display: block;
clear: both;
color:$bright-purple;
}
.orange, .dot{
color:$orange;
text-transform: uppercase;
}
.dot{
opacity:0;
display: inline-block;
}
.wrds-1{
@include animation(america, $duration*.5);
@include animation-fill(forwards);
}
.wrds-2{
@include animation(america2, $duration*.5);
@include animation-fill(forwards);
@include delay($duration*4.4);
}
.wrds-3{
@include animation(america, $duration*.5);
@include animation-fill(forwards);
@include delay($duration*5);
}
}
#static-intro, .down-arrow{
@include animation(appear, $duration*2);
@include animation-fill(forwards);
@include delay($duration*23);
}
// #intro .block-follow{
// @include animation(appear, $duration*2);
// @include animation-fill(forwards);
// @include delay($duration*23);
// }
.down-arrow .icon{
@include animation(down, $duration*4);
animation-iteration-count: infinite;
animation-iteration-count: infinite;
@include animation-fill(forwards);
}
/* DOWN ARROW */
@keyframes down {
0%,30% {@include rotateMove(135deg, .8em,-.8em); }
70% {@include rotateMove(135deg, 0em,0em); }
100%{@include rotateMove(135deg, .8em,-.8em); }
}
@-webkit-keyframes down {
0%,30% {@include rotateMove(135deg, .8em,-.8em); }
70% {@include rotateMove(135deg, 0em,0em); }
100%{@include rotateMove(135deg, .8em,-.8em); }
}
/* SLIDE IN "AMERICA" & "TO TALK" */
@keyframes america {
0%,5% {transform: translate(-5em,0em); opacity:0;}
100% {transform: translate(0em,0em); opacity:1;}
}
@-webkit-keyframes america {
0%,5% {transform: translate(-5em,0em); opacity:0;}
100% {transform: translate(0em,0em); opacity:1;}
}
/* SLIDE IN "WE NEED" */
@keyframes america2 {
from {transform: translate(5em,0em); opacity:1;}
to {transform: translate(0em,0em); opacity:1;}
}
@-webkit-keyframes america2 {
from {transform: translate(5em,0em); opacity:1;}
to {transform: translate(0em,0em); opacity:1;}
}
/* FADE IN */
@keyframes appear {
from{ opacity:0; }
to{ opacity:1; }
}
@-webkit-keyframes appear {
from{ opacity:0; }
to{ opacity:1; }
}
/* Cross Out */
@keyframes strike{
from{width:0;opacity:.8;}
to{width: 8.2em;opacity:.8;}
}
@-webkit-keyframes strike{
from{width:0;opacity:.8;}
to{width: 8.2em;opacity:.8;}
}
/* FADE OUT */
@keyframes disappear {
0%{ opacity:1; }
100%{ opacity:0; }
}
@-webkit-keyframes disappear {
0%{ opacity:1; }
100%{ opacity:0; }
}
/* GROW LOGO */
@keyframes grow {
from{font-size:60px;}
to{font-size:80px;}
}
@-webkit-keyframes grow {
from{font-size:60px;}
to{font-size:80px;}
}
/* Slide in from left */
@keyframes from-left {
from {@include slide(-5em,0em); width:8em;}
to {@include slide(0em,0em); width:2.6em;}
}
@-webkit-keyframes from-left {
from {@include slide(-5em,0em); width:8em;}
to {@include slide(0em,0em); width:2.6em;}
}
/* Slide in from right */
@keyframes from-right {
from {@include slide(5em,0em); width:8em;}
to {@include slide(0em,0em); width:2.6em;}
}
@-webkit-keyframes from-right {
from {@include slide(5em,0em); width:8em;}
to {@include slide(0em,0em); width:2.6em;}
}
/* MOBILE Slide in from left */
@keyframes from-left-M {
from {@include slide(-5em,0em);}
to {@include slide(0em,0em);}
}
@-webkit-keyframes from-left-M {
from {@include slide(-5em,0em);}
to {@include slide(0em,0em);}
}
/* MOBILE Slide in from right */
@keyframes from-right-M {
from {@include slide(5em,0em); }
to {@include slide(0em,0em);}
}
@-webkit-keyframes from-right-M {
from {@include slide(5em,0em); }
to {@include slide(0em,0em); }
}var windowheight = $(window).height();
var width = $(window).width();
function checkMobile(){
if (width < 800){
$('.separated-logo').removeClass('static');
}else if (width > 800){
$('.separated-logo').addClass('static');
}
}
var onresize = function(e) {
windowheight = "";
width = e.target.outerWidth;
windowheight = e.target.outerHeight;
checkMobile();
}
window.addEventListener("resize", onresize);
document.addEventListener("DOMContentLoaded", function(event) {
checkMobile();
});
External CSS
This Pen doesn't use any external CSS resources.