Our intro transitions are the more complex and unique scrolling transitions, each with highly specialized animations.
Horizontal Halves
There are a couple of classes that you need to add to make this component work well.
View Demo| Class | Description |
|---|---|
| right-side | This anchors the white content element to the right. |
| active | You should add the active class to the first horizontal-half-wrapper if it is at the very top of the page. |
<div class="header full-height horizontal-half-transition">
<div class="background">
<img src="images/trees.jpg" alt="">
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container active" style="background-image:url(images/poly5.jpg)"></div>
<div class="image-container" style="background-image:url(images/poly3.jpg)"></div>
<div class="image-container" style="background-image:url(images/poly2.jpg)"></div>
</div>
<div class="horizontal-half-wrapper right-side active">
<div class="header-background"></div>
<div class="header-wrapper row valign-wrapper">
<div class="col s8 offset-s2 valign">
<h1>Startup!</h1>
<span class="tagline">Show off your business in a whole new way.</span>
<button class="read-more"><i class="icon-caret-down"></i></button>
</div>
</div>
</div>
<!-- Can Repeat with horizontal-half-wrapper -->
</div>You can chain together multiple wrappers to create a long string of halves. The main demo has 3 wrappers chained together. They should alternate left and right sides.
<div class="horizontal-half-wrapper">
<div class="header-background"></div>
<div class="header-wrapper row valign-wrapper">
<div class="col s8 offset-s2 valign">
<h1>Startup!</h1>
<span class="tagline">Show off your business in a whole new way.</span>
<button class="read-more"><i class="icon-caret-down"></i></button>
</div>
</div>
</div>Zoom Out Laptop
Make sure the image you use as the background is high resolution because it will be fullscreen and slightly scaled up. This transition was inspired by the macOS sierra website.
View Demo
<div id="zoom-out-intro" class="header full-height">
<div class="header-wrapper row valign-wrapper">
<div class="col s8 offset-s2 valign">
<h1>Startup!</h1>
<span class="tagline">Show off your business in a whole new way.</span>
<button class="read-more"><i class="icon-caret-down"></i></button>
</div>
</div>
<div class="laptop-preview-sizer">
<div class="laptop-preview"></div>
<div class="image-container default" style="background-image:url(images/poly5.jpg)"></div>
</div>
</div>Circle Reveal
If you want to have uniformly sized cards, you can use our premade size classes. Just add the size class in addition to the card class.
View Demo
<div class="circle-reveal-intro full-height">
<div class="fixed-wrapper">
<!-- circle-reveal-wrapper -->
<div class="circle-reveal-wrapper header">
<div class="circle-background white"></div>
<div class="header-wrapper row valign-wrapper">
<div class="col s8 offset-s2">
<h1>FIRST!</h1>
<span class="tagline">Show off your business in a whole new way.</span>
<button class="read-more"><i class="icon-caret-down"></i></button>
</div>
</div>
</div>
<!-- circle-reveal-wrapper is chainable -->
<div class="circle-reveal-wrapper header">
<!-- ... -->
</div>
</div>
<!-- Last layer that is behind and static -->
<div class="background-layer">
<!-- Content -->
</div>
</div>Phone Wall
The phone wall is comprised of 7 columns of 3 phones. You can alter the amount of columns.
View Demo
<div class="phone-wall-intro header white full-height">
<div class="header-background"></div>
<div class="header-wrapper row">
<div class="col s12 m10 offset-m1 valign-wrapper">
<div class="valign">
<h1>Startup!</h1>
<span class="tagline">Show off your business in a whole new way.</span>
<button class="read-more"><i class="icon-caret-down"></i></button>
</div>
</div>
<div class="col s12 m10 offset-m1 column-wrapper">
<div class="column-two">
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly1.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly2.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly3.jpg)"></div>
</div>
</div>
<div class="column-one">
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly1.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly2.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly3.jpg)"></div>
</div>
</div>
<div class="column-two">
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly1.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly2.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly3.jpg)"></div>
</div>
</div>
<div class="column-one">
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly1.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly2.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly3.jpg)"></div>
</div>
</div>
<div class="column-two">
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly1.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly2.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly3.jpg)"></div>
</div>
</div>
<div class="column-one">
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly1.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly2.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly3.jpg)"></div>
</div>
</div>
<div class="column-two">
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly1.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly2.jpg)"></div>
</div>
<div class="phone-preview-sizer">
<div class="phone-preview"></div>
<div class="image-container default" style="background-image:url(images/poly3.jpg)"></div>
</div>
</div>
</div>
</div>
</div>