Imagens by Unsplash
A Pen by Pedro de Sá on CodePen.
Imagens by Unsplash
A Pen by Pedro de Sá on CodePen.
<div class="main"> | |
<header> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">Shop</a></li> | |
<li><a href="#">Accessories</a></li> | |
<li><h1>Ecommerce</h1></li> | |
<li><a href="#">Collections</a></li> | |
<li><a href="#">Brands</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
</header> | |
<div class="cd-slider"> | |
<ul> | |
<li> | |
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1421809313281-48f03fa45e9f?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div> | |
<div class="content"> | |
<h2>Jackets Collection 2017</h2> | |
<a href="#">View Gallery</a> | |
</div> | |
</li> | |
<li> | |
<div class="image" style="background-image:url(https://images.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div> | |
<div class="content"> | |
<h2>Accessories</h2> | |
<a href="#">View Gallery</a> | |
</div> | |
</li> | |
<li> | |
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1416838375725-e834a83f62b7?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div> | |
<div class="content"> | |
<h2>Winter Shoes</h2> | |
<a href="#">View Gallery</a> | |
</div> | |
</li> | |
<li> | |
<div class="image" style="background-image:url(https://images.unsplash.com/35/JOd4DPGLThifgf38Lpgj_IMG.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div> | |
<div class="content"> | |
<h2>Winter Collection 2017</h2> | |
<a href="#">View Gallery</a> | |
</div> | |
</li> | |
<li> | |
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1453974336165-b5c58464f1ed?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div> | |
<div class="content"> | |
<h2>Summer Collection</h2> | |
<a href="#">View Gallery</a> | |
</div> | |
</li> | |
</ul> | |
</div> <!--/.cd-slider--> | |
<div class="text"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero qui error, nesciunt quam laborum nihil cupiditate delectus pariatur facilis odio suscipit provident blanditiis, quod. Blanditiis dolorem quo illum voluptatem maiores.</p> | |
<p>Nihil adipisci quo velit totam, voluptatum voluptas vero voluptatem odio sit ipsam quis quibusdam quasi voluptatibus dolorum fuga vel corrupti facere voluptates, unde officiis. Enim nobis ipsam veritatis qui a?</p> | |
<p>Esse in, architecto est eius. Quia dicta modi magni, non labore, iusto accusantium assumenda soluta ab quis suscipit vero doloremque quos. Dicta tempore aliquam saepe distinctio optio veritatis iure minima.</p> | |
<p>Sapiente impedit ea deserunt architecto ipsa qui modi, nemo iste adipisci, nihil quidem, non tenetur. Esse dolorem aperiam quaerat sequi, nostrum voluptate eveniet blanditiis voluptatum soluta error sapiente fugit! Quae.</p> | |
<p>Voluptate mollitia ipsum consequatur dolor eaque nesciunt. Provident eveniet ratione, alias ad aliquam totam! Illo cum nostrum, adipisci porro quisquam ipsum autem enim iusto eius, optio dolorem, voluptates iure voluptate.</p> | |
<p>Ducimus mollitia cumque quia, natus sint beatae impedit ad. Libero doloribus nostrum perspiciatis, officiis provident quidem, in ratione aut id enim necessitatibus sit modi. Quidem, tempora ipsum nulla dicta voluptatum?</p> | |
<p>Nisi recusandae rem culpa, doloribus est perspiciatis atque possimus explicabo, ipsum corrupti dolore officia eius vitae ipsam iste. Dignissimos quasi sunt dolor, at commodi nemo quae vitae? Hic, temporibus, amet?</p> | |
<p>Aspernatur a accusantium incidunt sit excepturi? Blanditiis ratione ex, repellendus? Repellat, eius officiis mollitia, ad quia, quam nihil voluptates aperiam rem sit modi voluptatum alias. Optio, at perferendis. Cumque, commodi!</p> | |
<p>Nostrum sit facere ad voluptate et a voluptates, ea, perspiciatis consequuntur, fugiat animi nesciunt eligendi quidem temporibus veritatis quis, dolore illo sunt excepturi pariatur tenetur. Quasi laboriosam similique explicabo voluptas!</p> | |
<p>Ducimus labore quas, quae non quaerat molestias excepturi fugiat cum obcaecati minima deserunt a, voluptates inventore error similique, molestiae rem placeat aliquid, distinctio dicta dolores. Aperiam, cupiditate, omnis! Ipsum, beatae.</p> | |
</div> | |
</div> |
(function() { | |
function init(item) { | |
var items = item.querySelectorAll('li'), | |
current = 0, | |
autoUpdate = true, | |
timeTrans = 4000; | |
//create nav | |
var nav = document.createElement('nav'); | |
nav.className = 'nav_arrows'; | |
//create button prev | |
var prevbtn = document.createElement('button'); | |
prevbtn.className = 'prev'; | |
prevbtn.setAttribute('aria-label', 'Prev'); | |
//create button next | |
var nextbtn = document.createElement('button'); | |
nextbtn.className = 'next'; | |
nextbtn.setAttribute('aria-label', 'Next'); | |
//create counter | |
var counter = document.createElement('div'); | |
counter.className = 'counter'; | |
counter.innerHTML = "<span>1</span><span>"+items.length+"</span>"; | |
if (items.length > 1) { | |
nav.appendChild(prevbtn); | |
nav.appendChild(counter); | |
nav.appendChild(nextbtn); | |
item.appendChild(nav); | |
} | |
items[current].className = "current"; | |
if (items.length > 1) items[items.length-1].className = "prev_slide"; | |
var navigate = function(dir) { | |
items[current].className = ""; | |
if (dir === 'right') { | |
current = current < items.length-1 ? current + 1 : 0; | |
} else { | |
current = current > 0 ? current - 1 : items.length-1; | |
} | |
var nextCurrent = current < items.length-1 ? current + 1 : 0, | |
prevCurrent = current > 0 ? current - 1 : items.length-1; | |
items[current].className = "current"; | |
items[prevCurrent].className = "prev_slide"; | |
items[nextCurrent].className = ""; | |
//update counter | |
counter.firstChild.textContent = current + 1; | |
} | |
item.addEventListener('mouseenter', function() { | |
autoUpdate = false; | |
}); | |
item.addEventListener('mouseleave', function() { | |
autoUpdate = true; | |
}); | |
setInterval(function() { | |
if (autoUpdate) navigate('right'); | |
},timeTrans); | |
prevbtn.addEventListener('click', function() { | |
navigate('left'); | |
}); | |
nextbtn.addEventListener('click', function() { | |
navigate('right'); | |
}); | |
//keyboard navigation | |
document.addEventListener('keydown', function(ev) { | |
var keyCode = ev.keyCode || ev.which; | |
switch (keyCode) { | |
case 37: | |
navigate('left'); | |
break; | |
case 39: | |
navigate('right'); | |
break; | |
} | |
}); | |
// swipe navigation | |
// from http://stackoverflow.com/a/23230280 | |
item.addEventListener('touchstart', handleTouchStart, false); | |
item.addEventListener('touchmove', handleTouchMove, false); | |
var xDown = null; | |
var yDown = null; | |
function handleTouchStart(evt) { | |
xDown = evt.touches[0].clientX; | |
yDown = evt.touches[0].clientY; | |
}; | |
function handleTouchMove(evt) { | |
if ( ! xDown || ! yDown ) { | |
return; | |
} | |
var xUp = evt.touches[0].clientX; | |
var yUp = evt.touches[0].clientY; | |
var xDiff = xDown - xUp; | |
var yDiff = yDown - yUp; | |
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ | |
if ( xDiff > 0 ) { | |
/* left swipe */ | |
navigate('right'); | |
} else { | |
navigate('left'); | |
} | |
} | |
/* reset values */ | |
xDown = null; | |
yDown = null; | |
}; | |
} | |
[].slice.call(document.querySelectorAll('.cd-slider')).forEach( function(item) { | |
init(item); | |
}); | |
})(); |
* { | |
box-sizing: border-box; | |
} | |
html { | |
font-size: -moz-calc(4px + 0.45vw); | |
font-size: -webkit-calc(4px + 0.45vw); | |
font-size: calc(4px + 0.45vw); | |
} | |
body { | |
font-family: 'Montserrat', sans-serif; | |
color: #000; | |
} | |
a { | |
text-decoration: none; | |
color: #000; | |
} | |
*:focus { | |
outline: 0; | |
} | |
/* Primary Style | |
--------------------------------*/ | |
.main { | |
max-width: 110rem; | |
margin: 0 auto; | |
padding: 0 2rem; | |
} | |
header { | |
line-height: 12rem; | |
height: 12rem; | |
} | |
header h1 { | |
font-size: 2.5rem; | |
font-family: 'Oswald', sans-serif; | |
} | |
header ul::after { | |
content: ''; | |
display: table; | |
clear: both; | |
} | |
header li { | |
float: left; | |
width: 12.5%; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
header li:nth-child(4) { | |
width: 25%; | |
} | |
header li a { | |
font-weight: 900; | |
font-size: 1.2rem; | |
letter-spacing: 2px; | |
} | |
.text { | |
font-size: 2rem; | |
padding: 2rem 0; | |
-moz-columns: 3; | |
-webkit-columns: 3; | |
columns: 3; | |
} | |
.text p { | |
margin-bottom: 2rem; | |
} | |
@media screen and (max-width: 800px) { | |
header ul li:not(:nth-child(4)) { | |
display: none; | |
} | |
header ul li:nth-child(4) { | |
width: 100%; | |
} | |
} | |
/* Slider Style | |
--------------------------------------*/ | |
.cd-slider { | |
position: relative; | |
width: 100%; | |
height: 50rem; | |
overflow: hidden; | |
margin-bottom: 8rem; | |
} | |
.cd-slider li { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
visibility: hidden; | |
transition: visibility 0s 1s; | |
will-change: visibility; | |
} | |
.image { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 70%; | |
height: 100%; | |
background-size: cover; | |
background-position: 50% 50%; | |
clip: rect(0, 80rem, 50rem, 80rem); | |
transition: clip .5s cubic-bezier(0.99, 0.01, 0.45, 0.9) .5s; | |
will-change: clip; | |
} | |
.content { | |
position: absolute; | |
top: 0; | |
right: 0; | |
width: 100%; | |
height: 100%; | |
padding: 2rem 0 0 2rem; | |
font-size: 9rem; | |
text-align: right; | |
} | |
.content h2 { | |
text-overflow: ellipsis; | |
overflow: hidden; | |
transform: translateY(-30%); | |
opacity: 0; | |
transition: transform .5s, opacity .5s; | |
will-change: transform, opacity; | |
} | |
.content a { | |
display: inline-block; | |
font-size: 2rem; | |
text-transform: lowercase; | |
padding: 1.5rem; | |
opacity: 0; | |
transform: translateY(-100%); | |
transition: transform .5s .1s, opacity .5s .1s; | |
will-change: transform, opacity; | |
} | |
/* Current Slide | |
-------------------------------------*/ | |
li.current { | |
visibility: visible; | |
transition-delay: 0s; | |
} | |
li.current .image { | |
clip: rect(0, 80rem, 50rem, 0); | |
} | |
li.current .content h2 { | |
transform: translateY(0); | |
opacity: 1; | |
transition-delay: 1s; | |
} | |
li.current .content a { | |
transform: translateY(0); | |
opacity: 1; | |
transition-delay: 1.1s; | |
} | |
/* Prev Slide | |
------------------------------------*/ | |
li.prev_slide .image { | |
clip: rect(0, 0, 50rem, 0); | |
} | |
nav { | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
background: #fff; | |
z-index: 2; | |
} | |
.prev, .next, .counter { | |
vertical-align: middle; | |
} | |
.prev, .next { | |
position: relative; | |
display: inline-block; | |
height: 5rem; | |
width: 5rem; | |
border: 0; | |
cursor: pointer; | |
background: transparent; | |
} | |
.prev::before, .next::before { | |
content: ''; | |
position: absolute; | |
top: 50%; | |
left: 0; | |
transform: translateY(-50%); | |
border: .8rem solid transparent; | |
border-right-width: 1rem; | |
border-right-color: #000; | |
border-left-width: 0; | |
width: 0; | |
height: 0; | |
} | |
.prev::after, .next::after { | |
content: ''; | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%) translateZ(0); | |
left: .5rem; | |
background: #000; | |
height: .1rem; | |
min-height: 1px; | |
width: 2.5rem; | |
transition: width .3s; | |
} | |
.next::before { | |
right: 0; | |
left: auto; | |
border-left-width: 1rem; | |
border-left-color: #000; | |
border-right-width: 0; | |
} | |
.next::after { | |
right: .5rem; | |
left: auto; | |
} | |
.counter { | |
display: inline-block; | |
font-size: 4rem; | |
font-family: serif; | |
font-style: italic; | |
} | |
.counter span:last-child::before { | |
content: '/'; | |
margin: 0 1rem; | |
} | |
.prev:hover::after, .next:hover::after { | |
width: 3.5rem; | |
} | |
@media screen and ( max-width: 550px ) { | |
.image { width: 100%; } | |
.content { padding-right: 2rem; } | |
nav { left: 0; right: auto; } | |
} |
<link href="https://fonts.googleapis.com/css?family=Oswald:700|Montserrat:700" rel="stylesheet" /> |