LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Here's a great

tagline to read

Oh look, another phrase

to stand out

Finally, this is the

last slide

CSS
/* Variable definition */
/* Pen's SCSS */
body {
  background: white url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86637/sky.jpeg) no-repeat center 0%/cover;
  -webkit-transition: background-position .3s ease-in-out;
  transition: background-position .3s ease-in-out;
}
body.fp-viewing-0 {
  background-position: center 0%;
}
body.fp-viewing-1 {
  background-position: center 50%;
}
body.fp-viewing-2 {
  background-position: center 100%;
}

.one,
.three {
  background: -webkit-linear-gradient(135deg, transparent 25%, white 25%, white 75%, transparent 75%, transparent 100%);
  background: linear-gradient(-45deg, transparent 25%, white 25%, white 75%, transparent 75%, transparent 100%);
}

.two {
  background: -webkit-linear-gradient(45deg, transparent 25%, white 25%, white 75%, transparent 75%, transparent 100%);
  background: linear-gradient(45deg, transparent 25%, white 25%, white 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;
  -webkit-transition: line-height 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  transition: line-height 0.85s cubic-bezier(0.77, 0, 0.175, 1);
}

h1 {
  font-weight: 100;
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

h2 {
  margin-top: -6px;
  font-weight: 300;
  -webkit-transition-delay: .8s;
          transition-delay: .8s;
}

.section.active h1,
.section.active h2 {
  line-height: 1;
}
JS
(function() {
  $('#fullpage').fullpage();
})();
Host Instantly Drag and Drop Website Builder

 

Description

Uber-like text transitions going from slide to slide.
Term
Mon, 11/27/2017 - 22:07

Related Codes

Pen ID
Pen ID
Pen ID