<!--Check out the newer version I created using CSS transitions to improve performance! https://codepen.io/Develonaut/pen/kBbhu-->
<html>
<body>
<nav>
<li class="flex-item">THE DEVIL WEARS PRADA</li>
<li class="flex-item">ABOUT</li>
<li class="flex-item">NEWS</li>
<li class="flex-item">SUPPORT</li>
</nav>
<div class="main-screen">
<ul class="slideshow">
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
</ul>
</div>
<section>Put some lovely content here!</section>
<section>Put some lovely content here!</section>
<section>Put some lovely content here!</section>
</body>
</html>
<!--Check out the newer version I created using CSS transitions to improve performance! https://codepen.io/Develonaut/pen/kBbhu-->
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,900);
html, body {
margin: 0;
padding: 0;
height: 100%;
}
::-webkit-scrollbar {
display: none;
}
.main-screen {
z-index: 98;
padding: 0;
height: 100%;
width: 100%;
}
.slideshow {
display: block;
width: 100%;
padding: 0;
margin: 0;
z-index: 99;
list-style: none;
}
/*The image class in the CSS is a bit delicate, adding extra fluff to this section will create some performance issues on the scroll. Overflow:Hidden seems to smooth out some of the scrolling issues related. */
.image {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
display: block;
}
.image:nth-of-type(1) {
background: url('http://i62.tinypic.com/acfm0l.jpg') no-repeat center center;
background-size: cover;
}
.image:nth-of-type(2) {
background: url('http://i58.tinypic.com/33x8w2h.jpg') no-repeat center center;
background-size: cover;
}
.image:nth-of-type(3) {
background: url('http://i57.tinypic.com/dnmy5k.jpg') no-repeat center center;
background-size: cover;
}
.image.active {
z-index:2;
}
.image.last-active {
z-index:1;
}
nav {
z-index: 9999;
padding: 15px 0 0 0;
margin: 0;
top: 0;
left: 0;
color: white;
list-style: none;
position: relative;
overflow: hidden;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-items: stretch;
align-items: stretch;
}
.flex-item {
font-weight: bold;
font-size: .750rem;
text-align: center;
font-family: 'Roboto';
letter-spacing: .15em;
}
.flex-item:nth-of-type(2),
.flex-item:nth-of-type(3),
.flex-item:nth-of-type(4) {
padding-top: 8px;
}
.flex-item:nth-of-type(1) {
font-size: 1.5rem;
flex-grow: .75;
text-align: left;
padding-left: 60px;
}
.flex-item:nth-of-type(2) {
text-align: right;
flex-grow: 2;
padding-right: 20px;
}
.flex-item:nth-of-type(3) {
flex-grow: 2;
text-align: left;
padding-left: 20px;
}
.flex-item:nth-of-type(4) {
flex-grow: 1;
text-align: right;
padding-right: 60px;
padding-left: 15px;
}
.flex-item.follow {
padding: 0;
}
nav.follow {
position:fixed;
top: 0;
left: 0;
background: white;
color:black;
text-shadow:none;
width: 100%;
height: 47px;
overflow: hidden;
}
section {
margin: 100px auto 100px auto;
height: 500px;
width: 600px;
background: tomato;
text-align: center;
padding-top: 300px;
color: white;
font-size: 4em;
overflow: hidden;
}
function slideSwitch() {
var $active = $('.image.active');
if ( $active.length === 0 ) $active = $('.image:last');
var $next = $active.next().length ? $active.next()
: $('.image:first');
$active.addClass('last-active');
$next.css({opacity: 0})
.addClass('active')
.animate({opacity: 1}, 600, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 6000 );
});
/*JQUERY FOR NAV BAR STARTS HERE*/
if ($("nav").is('*')) {
var elem = $('nav');
var offset = elem.offset();
var topValue = offset.top + elem.height();
var width = elem.width();
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= topValue) {
if (!$('nav').hasClass('follow')){
$("nav").hide().addClass("follow").fadeIn(250);
}
} else {
$(".follow").removeClass("follow");
}
});
}
This Pen doesn't use any external CSS resources.