Uber-like text transitions going from slide to slide.
A Pen by Nicolás J Engler on CodePen.
#fullpage | |
.section.one | |
h1 Here's a great | |
h2 tagline to read | |
.section.two | |
h1 Oh look, another phrase | |
h2 to stand out | |
.section.three | |
h1 Finally, this is the | |
h2 last slide |
(function() { | |
$('#fullpage').fullpage(); | |
})(); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script> |
/* Variable definition */ | |
$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000); | |
/* Pen's SCSS */ | |
body { | |
// font-family: ; | |
background: white url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86637/sky.jpeg) no-repeat center 0% / cover; | |
transition: background-position .3s ease-in-out; | |
&.fp-viewing-0 { | |
background-position: center 0%; | |
} | |
&.fp-viewing-1 { | |
background-position: center 50%; | |
} | |
&.fp-viewing-2 { | |
background-position: center 100%; | |
} | |
} | |
.one, | |
.three { | |
background: linear-gradient(-45deg, transparent 25%, #F15152 25%, #F15152 75%, transparent 75%, transparent 100%); | |
} | |
.two { | |
background: linear-gradient(45deg, transparent 25%, #F15152 25%, #F15152 75%, transparent 75%, transparent 100%); | |
text-align: right; | |
} | |
h1, | |
h2 { | |
font-family: 'Roboto', sans-serif; | |
font-size: 58px; | |
max-width: 830px; | |
padding: 0 15px; | |
margin: 0 auto; | |
height: 64px; | |
overflow: hidden; | |
line-height: 3.5; | |
transition: line-height .85s $easeInOutQuart; | |
} | |
h1 { | |
font-weight: 100; | |
transition-delay: .3s; | |
} | |
h2 { | |
margin-top: -6px; | |
font-weight: 300; | |
transition-delay: .8s; | |
} | |
.section.active { | |
h1, | |
h2 { | |
line-height: 1; | |
} | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.css" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=Roboto:300,100" rel="stylesheet" /> |
Uber-like text transitions going from slide to slide.
A Pen by Nicolás J Engler on CodePen.