A Pen by nicolas barradeau on CodePen.
Working on the new nonatomic.co.uk website.
A Pen by Paul Stamp on CodePen.
Works in all major browsers including ios and android.
Easy to add/remove slides, just change the variables in css and js, copy & paste html and add new image in scss list.
Source of inspiration https://dribbble.com/shots/2976400-Restaurant-website-animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="header"> | |
<a href="/" class="name">pukka</a> | |
<a href="/contact" class="contact">contact</a> | |
</div> | |
<div class="hero" id="particles-js"> | |
<div class="w wave"></div> | |
<div class="w wave2"></div> | |
<div class="w wave3"></div> | |
<div class="w wave4"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.img-container | |
h2 Welcome! | |
h3 Insert Subtitle here | |
.preloader | |
.circle.circle1 | |
.circle.circle2 | |
.circle.circle3 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="hero"> | |
<div class="image-1 image-container"> | |
<div class="image"></div> | |
</div> | |
<div class="image-2 image-container"> | |
<div class="image"></div> | |
</div> | |
<h1><span class="demi">Demi</span><span class="hero">Hero</span></h1> | |
<a class="btn"> | |
Learn More |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="container"> | |
<section class="loadingPixel"> | |
<section class="border one"></section> | |
<section class="border two"></section> | |
<section class="border three"></section> | |
<section class="border four"></section> | |
<section id="center"></section> | |
</section> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="loadingPage" v-show='show' transition="fade"> | |
<div id="container"> | |
<div class="a1"> | |
<div class="mo-boy"></div> | |
<div class="mo-girl"></div> | |
<div class="mo-mo"></div> | |
<div class="mo-wheel2"></div> | |
<div class="mo-wheel1"></div> | |
</div> | |
<div class="motor_shadow"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<h1>Sennheiser presents</h1> | |
<h2>Momentum</h2> | |
</div> |