<div class="carousel">
<div class="progress-bar progress-bar--primary hide-on-desktop">
<div class="progress-bar__fill"></div>
</div>
<header class="main-post-wrapper">
<div class="slides">
<article class="main-post main-post--active">
<div class="main-post__image">
<img src="https://www.formula1.com/content/dam/fom-website/manual/Misc/2019-Races/Monaco2019/McLarenMonaco19.jpg.transform/9col/image.jpg" alt="New McLaren wind tunnel 'critical' to future performance, says Tech Director Key" loading="lazy" />
</div>
<div class="main-post__content">
<div class="main-post__tag-wrapper">
<span class="main-post__tag">News</span>
</div>
<h1 class="main-post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h1>
<a class="main-post__link" href="#">
<span class="main-post__link-text">find out more</span>
<svg
class="main-post__link-icon main-post__link-icon--arrow"
width="37"
height="12"
viewBox="0 0 37 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
stroke="white"
/>
</svg>
</a>
</div>
</article>
<article class="main-post main-post--not-active">
<div class="main-post__image">
<img src="https://www.formula1.com/content/dam/fom-website/sutton/2019/Hungary/Saturday/1017645792-LAT-20190803-_2ST5188.jpg.transform/9col-retina/image.jpg" alt="What To Watch For in the 2019 Hungarian Grand Prix" loading="lazy" />
</div>
<div class="main-post__content">
<div class="main-post__tag-wrapper">
<span class="main-post__tag">Video</span>
</div>
<h1 class="main-post__title">What To Watch For in the 2019 Hungarian Grand Prix</h1>
<a class="main-post__link" href="#">
<svg
class="main-post__link-icon main-post__link-icon--play-btn"
width="30"
height="30"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="10"
cy="10"
r="9"
stroke="#C20000"
stroke-width="2"
/>
<path d="M14 10L8 6V14L14 10Z" fill="white" />
</svg>
<span class="main-post__link-text">play video</span>
</a>
</div>
</article>
<article class="main-post main-post--not-active">
<div class="main-post__image">
<img src="https://www.formula1.com/content/dam/fom-website/manual/Misc/2019-Races/Austria-2019/Top3Austria2019.jpg.transform/9col-retina/image.jpg" alt="Hamilton wants harder championship fight from Leclerc and
Verstappen" loading="lazy" />
</div>
<div class="main-post__content">
<div class="main-post__tag-wrapper">
<span class="main-post__tag">News</span>
</div>
<h1 class="main-post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
</h1>
<a class="main-post__link" href="#">
<span class="main-post__link-text">find out more</span>
<svg
class="main-post__link-icon main-post__link-icon--arrow"
width="37"
height="12"
viewBox="0 0 37 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
stroke="white"
/>
</svg>
</a>
</div>
</article>
</div>
</header>
<div class="posts-wrapper hide-on-mobile">
<article class="post post--active">
<div class="progress-bar">
<div class="progress-bar__fill"></div>
</div>
<header class="post__header">
<span class="post__tag">News</span>
<p class="post__published">16 August 2019</p>
</header>
<h2 class="post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h2>
</article>
<article class="post">
<div class="progress-bar">
<div class="progress-bar__fill"></div>
</div>
<header class="post__header">
<span class="post__tag">Video</span>
<p class="post__published">12 August 2019</p>
</header>
<h2 class="post__title">What To Watch For in the 2019 Hungarian Grand Prix</h2>
</article>
<article class="post">
<div class="progress-bar">
<div class="progress-bar__fill"></div>
</div>
<header class="post__header">
<span class="post__tag">News</span>
<p class="post__published">08 August 2019</p>
</header>
<h2 class="post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
</h2>
</article>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Titillium Web", sans-serif;
}
.carousel {
min-height: 100vh;
position: relative;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 100%;
&__fill {
width: 0;
height: inherit;
background: #c20000;
transition: all 0.16s;
}
&--primary {
z-index: 2;
}
}
.main-post-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
.slides {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.main-post {
position: absolute;
top: 100%;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
&__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(#0e0d0e, 0.5);
}
}
&__content {
position: absolute;
top: 40%;
left: 4%;
transform: translateY(-40%);
color: #fff;
width: 90%;
}
&__tag-wrapper {
margin: 0;
display: inline-flex;
overflow: hidden;
}
&__tag {
font-size: 0.95em;
background: #c20000;
padding: 6px 18px;
}
&__title {
font-weight: 700;
font-size: 1.95em;
line-height: 1.25;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
&__link {
text-decoration: none;
color: #fff;
text-transform: uppercase;
letter-spacing: 1.5px;
display: inline-flex;
align-items: center;
}
&__link-text {
font-size: 0.9em;
}
&__link-icon {
&--arrow {
margin-left: 12px;
}
&--play-btn {
margin-right: 12px;
}
}
}
.main-post__link:hover .main-post__link-text,
.main-post__link:hover .main-post__link-icon--arrow path {
color: #c20000;
stroke: #c20000;
}
.main-post--active {
top: 0;
z-index: 1;
transition: top 0.9s 0.4s ease-out;
}
.main-post--not-active {
top: 100%;
z-index: 0;
transition: top 0.75s 2s;
}
.main-post.main-post--active .main-post__tag-wrapper {
width: 25%;
transition: all 0.98s 1.9s;
}
.main-post.main-post--not-active .main-post__tag-wrapper {
width: 0;
transition: width 0.3s 0.2s;
}
.main-post.main-post--active .main-post__title {
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s 1.42s, transform 0.5s 1.4s;
}
.main-post.main-post--not-active .main-post__title {
transform: translateY(40px);
opacity: 0;
transition: transform 0.2s 0.35s, opacity 0.5s 0.2s;
}
.main-post.main-post--active .main-post__link {
opacity: 1;
transition: opacity 0.9s 2.2s;
}
.main-post.main-post--not-active .main-post__link {
opacity: 0;
transition: opacity 0.5s 0.2s;
}
.posts-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 14px;
position: absolute;
bottom: 0;
max-width: 95%;
margin: auto;
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 1;
}
.post {
background: rgba(#0e0d0e, 0.6);
opacity: 0.3;
color: #fff;
position: relative;
padding: 16px 20px;
transition: opacity 0.2s linear;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8em;
}
&__tag {
color: #80837e;
}
&__title {
font-weight: 400;
font-size: 0.95em;
line-height: 1.5;
}
&--active {
opacity: 1;
background: rgba(#0e0d0e, 0.75);
pointer-events: none;
}
&--disabled {
pointer-events: none;
}
&:hover {
cursor: pointer;
opacity: 1;
}
}
.hide-on-mobile {
display: none;
}
@media screen and (min-width: 768px) {
.main-post__title {
font-size: 2.9em;
}
}
@media screen and (min-width: 1024px) {
.hide-on-mobile {
display: grid;
}
.hide-on-desktop {
display: none;
}
}
@media screen and (min-width: 1440px) {
.main-post__content {
width: 45%;
}
.posts-wrapper {
left: 80%;
transform: translatex(-80%);
max-width: 70%;
}
}
View Compiled
const mainProgressBar = document.querySelector(
".progress-bar--primary .progress-bar__fill"
);
const mainPosts = document.querySelectorAll(".main-post");
const posts = document.querySelectorAll(".post");
let i = 0;
let postIndex = 0;
let currentPost = posts[postIndex];
let currentMainPost = mainPosts[postIndex];
let progressInterval = setInterval(progress, 100);
function progress() {
if (i === 100) {
i = -5;
// reset progress bar
currentPost.querySelector(".progress-bar__fill").style.width = 0;
mainProgressBar.style.width = 0;
currentPost.classList.remove("post--active");
postIndex++;
currentMainPost.classList.add("main-post--not-active");
currentMainPost.classList.remove("main-post--active");
// reset postIndex to loop over the slides again
if (postIndex === posts.length) {
postIndex = 0;
}
currentPost = posts[postIndex];
currentMainPost = mainPosts[postIndex];
} else {
i++;
currentPost.querySelector(".progress-bar__fill").style.width = `${i}%`;
mainProgressBar.style.width = `${i}%`;
currentPost.classList.add("post--active");
currentMainPost.classList.add("main-post--active");
currentMainPost.classList.remove("main-post--not-active");
}
}
posts.forEach((post, index) => {
post.addEventListener("click", () => {
disablePostsTemporarily();
i = 0; // Reset the progress bar
postIndex = index;
updatePosts();
});
});
function disablePostsTemporarily() {
// Disable pointer events on all posts
posts.forEach((post) => {
post.classList.add("post--disabled");
});
// Re-enable pointer events after 2 1/2 seconds
setTimeout(() => {
posts.forEach((post) => {
post.classList.remove("post--disabled");
});
}, 2500);
}
function updatePosts() {
// Reset all progress bars and classes
posts.forEach((post) => {
post.querySelector(".progress-bar__fill").style.width = 0;
post.classList.remove("post--active");
});
mainPosts.forEach((mainPost) => {
mainPost.classList.add("main-post--not-active");
mainPost.classList.remove("main-post--active");
});
// Update the current post and main post
currentPost = posts[postIndex];
currentMainPost = mainPosts[postIndex];
currentPost.querySelector(".progress-bar__fill").style.width = `${i}%`;
mainProgressBar.style.width = `${i}%`;
currentPost.classList.add("post--active");
currentMainPost.classList.add("main-post--active");
currentMainPost.classList.remove("main-post--not-active");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.