<!-- Inspired by: https://3dtransforms.desandro.com/carousel -->
<div class="header">
<div class="title">All-Time Top 100 Songs</div>
<div class="subtitle">(Source: <a href="https://www.billboard.com/articles/news/hot-100-turns-60/8468142/hot-100-all-time-biggest-hits-songs-list" target="_blank">www.billboard.com</a>)</div>
</div>
<div class="carousel">
<div class="carousel__scene">
<ol class="carousel__list">
<!-- Source: https://www.billboard.com/articles/news/hot-100-turns-60/8468142/hot-100-all-time-biggest-hits-songs-list -->
<li class="carousel__cell"><span class="song__title">The Twist</span><span class="song__year">1960</span><span class="song__artist">Chubby Checker</span></li>
<li class="carousel__cell"><span class="song__title">Smooth</span><span class="song__year">1999</span><span class="song__artist">Santana Feat. Rob Thomas</span></li>
<li class="carousel__cell"><span class="song__title">Mack the Knife</span><span class="song__year">1959</span><span class="song__artist">Bobby Darin</span></li>
<li class="carousel__cell"><span class="song__title">Uptown Funk!</span><span class="song__year">2015</span><span class="song__artist">Mark Ronson Feat. Bruno Mars</span></li>
<li class="carousel__cell"><span class="song__title">How Do I Live</span><span class="song__year">1997</span><span class="song__artist">Leann Rimes</span></li>
<li class="carousel__cell"><span class="song__title">Party Rock Anthem</span><span class="song__year">2011</span><span class="song__artist">LMFAO Feat. Lauren Bennett & GoonRock</span></li>
<li class="carousel__cell"><span class="song__title">I Gotta Feeling</span><span class="song__year">2009</span><span class="song__artist">The Black Eyed Peas</span></li>
<li class="carousel__cell"><span class="song__title">Macarena (Bayside Boys Mix)</span><span class="song__year">1996</span><span class="song__artist">Los Del Rio</span></li>
<li class="carousel__cell"><span class="song__title">Shape of You</span><span class="song__year">2017</span><span class="song__artist">Ed Sheeran</span></li>
<li class="carousel__cell"><span class="song__title">Physical</span><span class="song__year">1981</span><span class="song__artist">Olivia Newton-John</span></li>
<li class="carousel__cell"><span class="song__title">You Light Up My Life</span><span class="song__year">1977</span><span class="song__artist">Debby Boone</span></li>
<li class="carousel__cell"><span class="song__title">Hey Jude</span><span class="song__year">1968</span><span class="song__artist">The Beatles</span></li>
<li class="carousel__cell"><span class="song__title">Closer</span><span class="song__year">2016</span><span class="song__artist">The Chainsmokers Feat. Halsey</span></li>
<li class="carousel__cell"><span class="song__title">We Belong Together</span><span class="song__year">2005</span><span class="song__artist">Mariah Carey</span></li>
<li class="carousel__cell"><span class="song__title">Un-Break My Heart</span><span class="song__year">1996</span><span class="song__artist">Toni Braxton</span></li>
<li class="carousel__cell"><span class="song__title">Yeah!</span><span class="song__year">2004</span><span class="song__artist">Usher Feat. Lil Jon & Ludacris</span></li>
<li class="carousel__cell"><span class="song__title">Bette Davis Eyes</span><span class="song__year">1981</span><span class="song__artist">Kim Carnes</span></li>
<li class="carousel__cell"><span class="song__title">Endless Love</span><span class="song__year">1981</span><span class="song__artist">Diana Ross & Lionel Richie</span></li>
<li class="carousel__cell"><span class="song__title">Tonight’s the Night (Gonna Be Alright)</span><span class="song__year">1976</span><span class="song__artist">Rod Stewart</span></li>
<li class="carousel__cell"><span class="song__title">You Were Meant for Me/Foolish Games</span><span class="song__year">1997</span><span class="song__artist">Jewel</span></li>
<li class="carousel__cell"><span class="song__title">(Everything I Do) I Do It for You</span><span class="song__year">1991</span><span class="song__artist">Bryan Adams</span></li>
<li class="carousel__cell"><span class="song__title">I’ll Make Love to You</span><span class="song__year">1994</span><span class="song__artist">Boyz II Men</span></li>
<li class="carousel__cell"><span class="song__title">The Theme From “A Summer Place”</span><span class="song__year">1960</span><span class="song__artist">Percy Faith & His Orchestra</span></li>
<li class="carousel__cell"><span class="song__title">Le Freak</span><span class="song__year">1978</span><span class="song__artist">Chic</span></li>
<li class="carousel__cell"><span class="song__title">How Deep Is Your Love</span><span class="song__year">1977</span><span class="song__artist">Bee Gees</span></li>
<li class="carousel__cell"><span class="song__title">Eye of the Tiger</span><span class="song__year">1982</span><span class="song__artist">Survivor</span></li>
<li class="carousel__cell"><span class="song__title">We Found Love</span><span class="song__year">2011</span><span class="song__artist">Rihanna Feat. Calvin Harris</span></li>
<li class="carousel__cell"><span class="song__title">Low</span><span class="song__year">2008</span><span class="song__artist">Flo Rida Feat. T-Pain</span></li>
<li class="carousel__cell"><span class="song__title">Just Want to Be Your Everything</span><span class="song__year">1977</span><span class="song__artist">Andy Gibb</span></li>
<li class="carousel__cell"><span class="song__title">Too Close</span><span class="song__year">1998</span><span class="song__artist">Next</span></li>
<li class="carousel__cell"><span class="song__title">Every Breath You Take</span><span class="song__year">1983</span><span class="song__artist">The Police</span></li>
<li class="carousel__cell"><span class="song__title">Somebody That I Used to Know</span><span class="song__year">2012</span><span class="song__artist">Gotye Feat. Kimbra</span></li>
<li class="carousel__cell"><span class="song__title">Despacito</span><span class="song__year">2017</span><span class="song__artist">Luis Fonsi & Daddy Yankee Feat. Justin Bieber</span></li>
<li class="carousel__cell"><span class="song__title">Flashdance … What a Feeling</span><span class="song__year">1983</span><span class="song__artist">Irene Cara</span></li>
<li class="carousel__cell"><span class="song__title">Rolling in the Deep</span><span class="song__year">2011</span><span class="song__artist">Adele</span></li>
<li class="carousel__cell"><span class="song__title">Tossin’ and Turnin’</span><span class="song__year">1961</span><span class="song__artist">Bobby Lewis</span></li>
<li class="carousel__cell"><span class="song__title">The Battle of New Orleans</span><span class="song__year">1959</span><span class="song__artist">Johnny Horton</span></li>
<li class="carousel__cell"><span class="song__title">One Sweet Day</span><span class="song__year">1995</span><span class="song__artist">Mariah Carey & Boyz II Men</span></li>
<li class="carousel__cell"><span class="song__title">Truly Madly Deeply</span><span class="song__year">1998</span><span class="song__artist">Savage Garden</span></li>
<li class="carousel__cell"><span class="song__title">Silly Love Songs</span><span class="song__year">1976</span><span class="song__artist">Wings</span></li>
<li class="carousel__cell"><span class="song__title">Let’s Get It On</span><span class="song__year">1973</span><span class="song__artist">Marvin Gaye</span></li>
<li class="carousel__cell"><span class="song__title">Night Fever</span><span class="song__year">1978</span><span class="song__artist">Bee Gees</span></li>
<li class="carousel__cell"><span class="song__title">Another One Bites the Dust</span><span class="song__year">1980</span><span class="song__artist">Queen</span></li>
<li class="carousel__cell"><span class="song__title">Say Say Say</span><span class="song__year">1983</span><span class="song__artist">Paul McCartney & Michael Jackson</span></li>
<li class="carousel__cell"><span class="song__title">How You Remind Me</span><span class="song__year">2001</span><span class="song__artist">Nickelback</span></li>
<li class="carousel__cell"><span class="song__title">Tie a Yellow Ribbon Round the Ole Oak Tree</span><span class="song__year">1973</span><span class="song__artist">Dawn Feat. Tony Orlando</span></li>
<li class="carousel__cell"><span class="song__title">It's All in the Game</span><span class="song__year">1958</span><span class="song__artist">Tommy Edwards</span></li>
<li class="carousel__cell"><span class="song__title">I Want to Hold Your Hand</span><span class="song__year">1964</span><span class="song__artist">The Beatles</span></li>
<li class="carousel__cell"><span class="song__title">Shadow Dancing</span><span class="song__year">1978</span><span class="song__artist">Andy Gibb</span></li>
<li class="carousel__cell"><span class="song__title">Call Me Maybe</span><span class="song__year">2012</span><span class="song__artist">Carly Rae Jepsen</span></li>
<li class="carousel__cell"><span class="song__title">Blurred Lines</span><span class="song__year">2013</span><span class="song__artist">Robin Thicke Feat. T.I. + Pharrell</span></li>
<li class="carousel__cell"><span class="song__title">Candle in the Wind</span><span class="song__year">1997</span><span class="song__artist">Elton John</span></li>
<li class="carousel__cell"><span class="song__title">No One</span><span class="song__year">2007</span><span class="song__artist">Alicia Keys</span></li>
<li class="carousel__cell"><span class="song__title">I Will Always Love You</span><span class="song__year">1992</span><span class="song__artist">Whitney Houston</span></li>
<li class="carousel__cell"><span class="song__title">End of the Road</span><span class="song__year">1992</span><span class="song__artist">Boyz II Men</span></li>
<li class="carousel__cell"><span class="song__title">Boom Boom Pow</span><span class="song__year">2009</span><span class="song__artist">The Black Eyed Peas</span></li>
<li class="carousel__cell"><span class="song__title">Call Me</span><span class="song__year">1980</span><span class="song__artist">Blondie</span></li>
<li class="carousel__cell"><span class="song__title">Let Me Love You</span><span class="song__year">2005</span><span class="song__artist">Mario</span></li>
<li class="carousel__cell"><span class="song__title">Stayin’ Alive</span><span class="song__year">1978</span><span class="song__artist">Bee Gees</span></li>
<li class="carousel__cell"><span class="song__title">Lady</span><span class="song__year">1980</span><span class="song__artist">Kenny Rogers</span></li>
<li class="carousel__cell"><span class="song__title">TiK ToK</span><span class="song__year">2010</span><span class="song__artist">KeSha</span></li>
<li class="carousel__cell"><span class="song__title">I’m a Believer</span><span class="song__year">1966</span><span class="song__artist">The Monkees</span></li>
<li class="carousel__cell"><span class="song__title">Gold Digger</span><span class="song__year">2005</span><span class="song__artist">Kanye West Feat. Jamie Foxx</span></li>
<li class="carousel__cell"><span class="song__title">Apologize</span><span class="song__year">2007</span><span class="song__artist">Timbaland Feat. OneRepublic</span></li>
<li class="carousel__cell"><span class="song__title">The Sign</span><span class="song__year">1994</span><span class="song__artist">Ace Of Base</span></li>
<li class="carousel__cell"><span class="song__title">Centerfold</span><span class="song__year">1982</span><span class="song__artist">The J. Geils Band</span></li>
<li class="carousel__cell"><span class="song__title">All About That Bass</span><span class="song__year">2014</span><span class="song__artist">Meghan Trainor</span></li>
<li class="carousel__cell"><span class="song__title">(Just Like) Starting Over</span><span class="song__year">1980</span><span class="song__artist">John Lennon</span></li>
<li class="carousel__cell"><span class="song__title">Royals</span><span class="song__year">2013</span><span class="song__artist">Lorde</span></li>
<li class="carousel__cell"><span class="song__title">The Boy Is Mine</span><span class="song__year">1998</span><span class="song__artist">Brandy & Monica</span></li>
<li class="carousel__cell"><span class="song__title">Because I Love You (The Postman Song)</span><span class="song__year">1990</span><span class="song__artist">Stevie B</span></li>
<li class="carousel__cell"><span class="song__title">I Love Rock ’N Rolln</span><span class="song__year">1982</span><span class="song__artist">Joan Jett & the Blackhearts</span></li>
<li class="carousel__cell"><span class="song__title">Aquarius/Let the Sunshine In</span><span class="song__year">1969</span><span class="song__artist">The 5th Dimension</span></li>
<li class="carousel__cell"><span class="song__title">Whoomp! (There It Is)</span><span class="song__year">1993</span><span class="song__artist">Tag Team</span></li>
<li class="carousel__cell"><span class="song__title">Moves Like Jagger</span><span class="song__year">2011</span><span class="song__artist">Maroon 5 Feat. Christina Aguilera</span></li>
<li class="carousel__cell"><span class="song__title">Ebony and Ivory</span><span class="song__year">1982</span><span class="song__artist">Paul McCartney & Stevie Wonder</span></li>
<li class="carousel__cell"><span class="song__title">Rush Rush</span><span class="song__year">1991</span><span class="song__artist">Paula Abdul</span></li>
<li class="carousel__cell"><span class="song__title">That’s What Friends Are For</span><span class="song__year">1986</span><span class="song__artist">Dionne & Friends</span></li>
<li class="carousel__cell"><span class="song__title">Happy</span><span class="song__year">2014</span><span class="song__artist">Pharrell Williams</span></li>
<li class="carousel__cell"><span class="song__title">Upside Down</span><span class="song__year">1980</span><span class="song__artist">Diana Ross</span></li>
<li class="carousel__cell"><span class="song__title">Sugar, Sugar</span><span class="song__year">1969</span><span class="song__artist">The Archies</span></li>
<li class="carousel__cell"><span class="song__title">Just the Way You Are</span><span class="song__year">2010</span><span class="song__artist">Bruno Mars</span></li>
<li class="carousel__cell"><span class="song__title">Dilemma</span><span class="song__year">2002</span><span class="song__artist">Nelly Feat. Kelly Rowland</span></li>
<li class="carousel__cell"><span class="song__title">I Heard It Through the Grapevine</span><span class="song__year">1968</span><span class="song__artist">Marvin Gaye</span></li>
<li class="carousel__cell"><span class="song__title">You’re Still the One</span><span class="song__year">1998</span><span class="song__artist">Shania Twain</span></li>
<li class="carousel__cell"><span class="song__title">Billie Jean</span><span class="song__year">1983</span><span class="song__artist">Michael Jackson</span></li>
<li class="carousel__cell"><span class="song__title">Hot Stuff</span><span class="song__year">1979</span><span class="song__artist">Donna Summer</span></li>
<li class="carousel__cell"><span class="song__title">Rockstar</span><span class="song__year">2017</span><span class="song__artist">Post Malone Feat. 21 Savage</span></li>
<li class="carousel__cell"><span class="song__title">Gangsta’s Paradise</span><span class="song__year">1995</span><span class="song__artist">Coolio Feat. L.V.</span></li>
<li class="carousel__cell"><span class="song__title">Abracadabra</span><span class="song__year">1982</span><span class="song__artist">The Steve Miller Band</span></li>
<li class="carousel__cell"><span class="song__title">Perfect</span><span class="song__year">2017</span><span class="song__artist">Ed Sheeran</span></li>
<li class="carousel__cell"><span class="song__title">You’re So Vain</span><span class="song__year">1973</span><span class="song__artist">Carly Simon</span></li>
<li class="carousel__cell"><span class="song__title">Play That Funky Music</span><span class="song__year">1976</span><span class="song__artist">Wild Cherry</span></li>
<li class="carousel__cell"><span class="song__title">Say You, Say Me</span><span class="song__year">1985</span><span class="song__artist">Lionel Richie</span></li>
<li class="carousel__cell"><span class="song__title">My Sharona</span><span class="song__year">1979</span><span class="song__artist">The Knack</span></li>
<li class="carousel__cell"><span class="song__title">All Night Long (All Night)</span><span class="song__year">1983</span><span class="song__artist">Lionel Richie</span></li>
<li class="carousel__cell"><span class="song__title">Nothing Compares 2 U</span><span class="song__year">1990</span><span class="song__artist">SinÉad O’Connor</span></li>
<li class="carousel__cell"><span class="song__title">I Swear</span><span class="song__year">1994</span><span class="song__artist">All-4-One</span></li>
<li class="carousel__cell"><span class="song__title">Family Affair</span><span class="song__year">2001</span><span class="song__artist">Mary J. Blige</span></li>
<li class="carousel__cell"><span class="song__title">Waiting for a Girl Like You</span><span class="song__year">1981</span><span class="song__artist">Foreigner</span></li>
</ol>
</div>
<div class="carousel__controls">
<button class="previous-button">👆🏻</button>
<button class="next-button">👇🏻</button>
</div>
</div>
<div class="footer">Created with 💖 by <a href="https://codepen.io/agalliat" target="_blank">Angela Galliat</a></div>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
background-color: #444;
}
a, a:visited, a:active {
color: inherit;
}
.header {
margin: 0.67em 0;
color: goldenrod;
background-color: #444444DD;
border: 3px solid goldenrod;
border-radius: 10px;
padding: 10px;
width: 550px;
max-width: 95vw;
z-index: 2;
}
.footer {
color: goldenrod;
height: 50px;
line-height: 50px;
}
.title {
font-size: 2em;
font-weight: bold;
}
.subtitle {
font-size: 0.83em;
font-weight: bold;
}
.song__title, .song__year, .song__artist {
display: block;
}
.carousel {
display: flex;
align-items: center;
position: relative;
padding: 130px 0;
}
.carousel__scene {
position: relative;
width: 510px;
height: 460px;
max-width: 95vw;
padding-top: 150px;
perspective: 100px;
/*overflow: hidden;*/
}
.carousel__controls {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
position: absolute;
right: 15px;
}
.previous-button, .next-button {
margin: 5px 0;
padding: 5px;
width: 50px;
height: 50px;
font-family: monospace;
font-weight: bold;
font-size: 2rem;
border: 3px solid goldenrod;
border-radius: 10px;
background-color: #444;
}
.previous-button:focus, .next-button:focus {
outline: none;
box-shadow: 0 0 6px 3px goldenrod;
}
.carousel__list {
width: 100%;
height: 160px;
margin: 0;
padding: 0;
position: absolute;
transform: translateZ(-288px);
transform-style: preserve-3d;
transition: transform 1s;
list-style: none;
counter-reset: list-counter;
}
.carousel__cell {
position: absolute;
width: 490px;
height: 140px;
max-width: calc(95vw - 20px);
left: 10px;
top: 10px;
border: 2px solid white;
border-radius: 10px;
font-size: 20px;
font-weight: bold;
color: white;
text-align: center;
transition: transform 1s, opacity 1s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
counter-increment: list-counter;
background-color: rgba(128, 128, 128, 0.75);
/*filter: blur(2px);*/
}
.carousel__cell::before {
content: counter(list-counter);
color: white;
text-shadow: 2px 2px black;
width: 40px;
height: 40px;
line-height: 40px;
}
.carousel__cell.selected {
color: goldenrod;
border-color: goldenrod;
border-width: 5px;
/*filter: none;*/
}
.carousel__cell.selected::before {
color: goldenrod;
}
.carousel__cell:nth-child(1) { transform: rotateX( 0deg) translateZ(288px); }
.carousel__cell:nth-child(2) { transform: rotateX( 40deg) translateZ(288px); }
.carousel__cell:nth-child(3) { transform: rotateX( 80deg) translateZ(288px); }
.carousel__cell:nth-child(4) { transform: rotateX(120deg) translateZ(288px); }
.carousel__cell:nth-child(5) { transform: rotateX(160deg) translateZ(288px); }
.carousel__cell:nth-child(6) { transform: rotateX(200deg) translateZ(288px); }
.carousel__cell:nth-child(7) { transform: rotateX(240deg) translateZ(288px); }
.carousel__cell:nth-child(8) { transform: rotateX(280deg) translateZ(288px); }
.carousel__cell:nth-child(9) { transform: rotateX(320deg) translateZ(288px); }
const carousel = document.querySelector('.carousel__list');
const cells = carousel.querySelectorAll('.carousel__cell');
const cellWidth = carousel.offsetWidth;
const cellHeight = carousel.offsetHeight;
const cellSize = cellHeight;
const cellCount = 100;
const radius = Math.round((cellSize / 2) / Math.tan(Math.PI / cellCount));
const theta = 360 / cellCount;
var selectedIndex = 0;
function rotateCarousel() {
const angle = theta * selectedIndex * -1;
carousel.style.transform = 'translateZ(' + -radius + 'px) ' + 'rotateX(' + -angle + 'deg)';
const cellIndex = selectedIndex < 0 ? (cellCount - ((selectedIndex * -1) % cellCount)) : (selectedIndex % cellCount);
const cells = document.querySelectorAll('.carousel__cell');
cells.forEach((cell, index) => {
if(cellIndex === index) {
if(!cell.classList.contains('selected'))
cell.classList.add('selected');
}
else {
if(cell.classList.contains('selected')) {
cell.classList.remove('selected');
}
}
});
}
function selectPrev() {
selectedIndex--;
rotateCarousel();
}
function selectNext() {
selectedIndex++;
rotateCarousel();
}
var prevButton = document.querySelector('.previous-button');
prevButton.addEventListener('click', selectPrev);
var nextButton = document.querySelector('.next-button');
nextButton.addEventListener('click', selectNext);
function initCarousel() {
for(let i = 0; i < cells.length; i++) {
const cell = cells[i];
const cellAngle = theta * i;
cell.style.transform = 'rotateX(' + -cellAngle + 'deg) translateZ(' + radius + 'px)';
}
rotateCarousel();
}
initCarousel();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.