<div class="container">
<header class="c-header c-header--archive c-header--project-list">
<div class="c-mouse-vertical-carousel js-carousel u-media-wrapper u-media-wrapper--16-9">
<ul class="c-mouse-vertical-carousel__list js-carousel-list">
<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="0">
<a href="">
<p class="c-mouse-vertical-carousel__eyebrow u-b4">
<span>
01
</span> Nevada
</p>
<p class="c-mouse-vertical-carousel__title u-a5">
Carson City
</p>
</a>
</li>
<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="1">
<a href="">
<p class="c-mouse-vertical-carousel__eyebrow u-b4">
<span>
02
</span> New Hampshire
</p>
<p class="c-mouse-vertical-carousel__title u-a5">
Concord
</p>
</a>
</li>
<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="2">
<a href="">
<p class="c-mouse-vertical-carousel__eyebrow u-b4">
<span>
03
</span> New York
</p>
<p class="c-mouse-vertical-carousel__title u-a5">
Albany
</p>
</a>
</li>
<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="3">
<a href="">
<p class="c-mouse-vertical-carousel__eyebrow u-b4">
<span>
04
</span> Oklahoma
</p>
<p class="c-mouse-vertical-carousel__title u-a5">
Oklahoma City
</p>
</a>
</li>
<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="4">
<a href="">
<p class="c-mouse-vertical-carousel__eyebrow u-b4">
<span>
05
</span> North Carolina
</p>
<p class="c-mouse-vertical-carousel__title u-a5">
Raleigh
</p>
</a>
</li>
<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="5">
<a href="">
<p class="c-mouse-vertical-carousel__eyebrow u-b4">
<span>
06
</span> Utah
</p>
<p class="c-mouse-vertical-carousel__title u-a5">
Salt Lake City
</p>
</a>
</li>
<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="6">
<a href="">
<p class="c-mouse-vertical-carousel__eyebrow u-b4">
<span>
07
</span> Missouri
</p>
<p class="c-mouse-vertical-carousel__title u-a5">
Jefferson City
</p>
</a>
</li>
</ul>
<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://d39d4r6jmh1lz3.cloudfront.net/lass-id-original-1515801602-5a594c029dcd1.jpg')"></i>
<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.visittheusa.com/sites/default/files/styles/hero_m_1300x700/public/images/hero_media_image/2017-01/Getty_104106362_Brand_State_NewHampshire_Web72DPI.jpg?itok=-D2AFnPq')"></i>
<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg?sharp=10&vib=20&w=1200')"></i>
<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.gousa.in/sites/default/files/styles/hero_m_1300x700/public/images/hero_media_image/2017-03/f13bafc9dbcd2df659faac33a29cf4ae.jpeg?itok=rj0Zoh1b')"></i>
<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://psmag.com/.image/t_share/MTU4NzUzMjc3MDkyMDQ2NTUy/gettyimages-1031626122.jpg')"></i>
<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.history.com/.image/t_share/MTU3ODc5MDg1ODk1NDYwMTY5/natural-bridge-bryce-canyon-utah-usa.jpg')"></i>
<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.addictioncenter.com/app/uploads/2018/06/xMissouri.jpeg.pagespeed.ic.9qVaCJN2BK.jpg')"></i>
<i class="c-gradient-overlay"></i>
</div>
</header>
</div>* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #021417;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: stretch;
min-height: 100vh;
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.c-header {
display: block;
width: 100%;
}
.u-a5 {
font-family: Arial;
font-size: 37px;
line-height: 35px;
letter-spacing: 5px;
text-transform: uppercase;
font-weight: 700;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
color: #fff;
}
.u-b4 {
font-family: Arial;
font-size: 12px;
line-height: 17px;
letter-spacing: 0.3px;
font-weight: normal;
color: #fff;
}
a {
text-decoration: none;
}
//MEDIA WRAPPER
.u-media-wrapper {
position: relative;
width: 100%;
background-size: cover;
background-position: center;
height: 0;
&#{&}--16-9 {
padding-bottom: percentage(9/16);
}
}
// GRADIENT IMAGE OVERLAY
.c-gradient-overlay {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(
circle at 49% 50%,
rgba(2, 21, 25, 0.3),
rgba(2, 21, 25, 0.6)
);
}
.c-mouse-vertical-carousel {
position: relative;
overflow: hidden;
&__list {
width: 100%;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
&__list-item {
a {
display: block;
padding-bottom: 25px;
padding-top: 25px;
padding-left: percentage(13/24);
}
}
&__eyebrow {
position: relative;
padding-bottom: 12px;
span {
position: absolute;
left: -30px;
top: 2px;
}
}
&__title {
max-width: 450px;
}
&__bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
will-change: transform;
}
}
class VerticalMouseDrivenCarousel {
constructor(options = {}) {
const _defaults = {
carousel: ".js-carousel",
bgImg: ".js-carousel-bg-img",
list: ".js-carousel-list",
listItem: ".js-carousel-list-item"
};
this.posY = 0;
this.defaults = Object.assign({}, _defaults, options);
this.initCursor();
this.init();
this.bgImgController();
}
//region getters
getBgImgs() {
return document.querySelectorAll(this.defaults.bgImg);
}
getListItems() {
return document.querySelectorAll(this.defaults.listItem);
}
getList() {
return document.querySelector(this.defaults.list);
}
getCarousel() {
return document.querySelector(this.defaults.carousel);
}
init() {
TweenMax.set(this.getBgImgs(), {
autoAlpha: 0,
scale: 1.05
});
TweenMax.set(this.getBgImgs()[0], {
autoAlpha: 1,
scale: 1
});
this.listItems = this.getListItems().length - 1;
this.listOpacityController(0);
}
initCursor() {
const listHeight = this.getList().clientHeight;
const carouselHeight = this.getCarousel().clientHeight;
this.getCarousel().addEventListener(
"mousemove",
event => {
this.posY = event.pageY - this.getCarousel().offsetTop;
let offset = -this.posY / carouselHeight * listHeight;
TweenMax.to(this.getList(), 0.3, {
y: offset,
ease: Power4.easeOut
});
},
false
);
}
bgImgController() {
for (const link of this.getListItems()) {
link.addEventListener("mouseenter", ev => {
let currentId = ev.currentTarget.dataset.itemId;
this.listOpacityController(currentId);
TweenMax.to(ev.currentTarget, 0.3, {
autoAlpha: 1
});
TweenMax.to(".is-visible", 0.2, {
autoAlpha: 0,
scale: 1.05
});
if (!this.getBgImgs()[currentId].classList.contains("is-visible")) {
this.getBgImgs()[currentId].classList.add("is-visible");
}
TweenMax.to(this.getBgImgs()[currentId], 0.6, {
autoAlpha: 1,
scale: 1
});
});
}
}
listOpacityController(id) {
id = parseInt(id);
let aboveCurrent = this.listItems - id;
let belowCurrent = parseInt(id);
if (aboveCurrent > 0) {
for (let i = 1; i <= aboveCurrent; i++) {
let opacity = 0.5 / i;
let offset = 5 * i;
TweenMax.to(this.getListItems()[id + i], 0.5, {
autoAlpha: opacity,
x: offset,
ease: Power3.easeOut
});
}
}
if (belowCurrent > 0) {
for (let i = 0; i <= belowCurrent; i++) {
let opacity = 0.5 / i;
let offset = 5 * i;
TweenMax.to(this.getListItems()[id - i], 0.5, {
autoAlpha: opacity,
x: offset,
ease: Power3.easeOut
});
}
}
}
}
new VerticalMouseDrivenCarousel();
External CSS
This Pen doesn't use any external CSS resources.