Gee_BK
November 28, 2023, 4:50pm
1
Question: https://codepen.io/aybukeceylan/pen/RwrRPoO .
Any help would be deeply appreciated and feel free to use the code if it works ! TY
Product: What are you trying to achieve: https://codepen.io/aybukeceylan/pen/RwrRPoO
What have you already tried: Additional information:
1 Like
No need to REPLICATE!
Just add it into your HTML-Component and use it, like it is…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap">
<link rel="stylesheet" href="styles.css">
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 10px;
font-family: 'DM Sans', sans-serif;
transition: background .4s ease-in;
background-color: #c394f8;
}
body.blue {
background-color: #428aa6;
}
input[type=radio] {
display: none;
}
.card {
position: absolute;
width: 60%;
height: 100%;
left: 0;
right: 0;
margin: auto;
transition: transform .4s ease;
cursor: pointer;
}
.container {
width: 100%;
max-width: 800px;
max-height: 800px;
height: 100%;
transform-style: preserve-3d;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.cards {
position: relative;
width: 100%;
height: 100%;
margin-bottom: 20px;
}
img {
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: contain;
}
#item-1:checked ~ .cards #song-3,
#item-2:checked ~ .cards #song-1,
#item-3:checked ~ .cards #song-2 {
transform: translateX(-40%) scale(0.8);
opacity: 0.4;
z-index: 0;
}
#item-1:checked ~ .cards #song-2,
#item-2:checked ~ .cards #song-3,
#item-3:checked ~ .cards #song-1 {
transform: translateX(40%) scale(0.8);
opacity: 0.4;
z-index: 0;
}
#item-1:checked ~ .cards #song-1,
#item-2:checked ~ .cards #song-2,
#item-3:checked ~ .cards #song-3 {
transform: translateX(0) scale(1);
opacity: 1;
z-index: 1;
img {
box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
}
.player {
background-color: #fff;
border-radius: 8px;
min-width: 320px;
padding: 16px 10px;
}
.upper-part {
position: relative;
display: flex;
align-items: center;
margin-bottom: 12px;
height: 36px;
overflow: hidden;
}
.play-icon {
margin-right: 10px;
}
.song-info {
width: calc(100% - 32px);
display: block;
}
.song-info .title {
color: #403d40;
font-size: 14px;
line-height: 24px;
}
.sub-line {
display: flex;
justify-content: space-between;
width: 100%;
}
.subtitle,
.time {
font-size: 12px;
line-height: 16px;
color: #c6c5c6;
}
.time {
font-size: 12px;
line-height: 16px;
color: #a5a5a5;
font-weight: 500;
margin-left: auto;
}
.progress-bar {
height: 3px;
width: 100%;
background-color: #e9efff;
border-radius: 2px;
overflow: hidden;
}
.progress {
display: block;
position: relative;
width: 60%;
height: 100%;
background-color: #2992dc;
border-radius: 6px;
}
.info-area {
width: 100%;
position: absolute;
top: 0;
left: 30px;
transition: transform .4s ease-in;
}
#item-2:checked ~ .player #test {
transform: translateY(0);
}
#item-2:checked ~ .player #test {
transform: translateY(-40px);
}
#item-3:checked ~ .player #test {
transform: translateY(-80px);
}
</style>
</head>
<body>
<div class="container">
<input type="radio" name="slider" id="item-1" checked>
<input type="radio" name="slider" id="item-2">
<input type="radio" name="slider" id="item-3">
<div class="cards">
<label class="card" for="item-1" id="song-1">
<img src="https://media.istockphoto.com/id/94567758/de/foto/baby-sumatra-orang-utan-h%C3%A4ngen-am-seil-vor-wei%C3%9Fem-hintergrund.jpg?s=612x612&w=0&k=20&c=Gf8Jr-AyN7dzEgrd0zDEAf9uZ1iVKXn-iyCVbht_gFU=" alt="song">
</label>
<label class="card" for="item-2" id="song-2">
<img src="https://ih1.redbubble.net/image.4851383623.0949/fposter,medium,wall_texture,product,750x1000.jpg" alt="song">
</label>
<label class="card" for="item-3" id="song-3">
<img src="https://i.pinimg.com/564x/05/93/3c/05933c1c40000a80aaae0893b8c32012.jpg" alt="song">
</label>
</div>
<div class="player">
<div class="upper-part">
<div class="play-icon">
<svg width="20" height="20" fill="#2992dc" stroke="#2992dc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-play" viewBox="0 0 24 24">
<defs/>
<path d="M5 3l14 9-14 9V3z"/>
</svg>
</div>
<div class="info-area" id="test">
<label class="song-info" id="song-info-1">
<div class="title">Bunker</div>
<div class="sub-line">
<div class="subtitle">Balthazar</div>
<div class="time">4.05</div>
</div>
</label>
<label class="song-info" id="song-info-2">
<div class="title">Words Remain</div>
<div class="sub-line">
<div class="subtitle">Moderator</div>
<div class="time">4.05</div>
</div>
</label>
<label class="song-info" id="song-info-3">
<div class="title">Falling Out</div>
<div class="sub-line">
<div class="subtitle">Otzeki</div>
<div class="time">4.05</div>
</div>
</label>
</div>
</div>
<div class="progress-bar">
<span class="progress"></span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
<script>
$('input').on('change', function() {
$('body').toggleClass('blue');
});
</script>
</body>
</html>
Connect it to your wix-site by adding some more CODE and control it directly from your wix-page.
Any idea on hot to make this on JavaScript? HTML put my website too slow
How it comes, that it gets slow? Maybe you want to open your own new topic and describe your issue in more detail?
the loading time of the website increased too much with an html code.
Then use the Gallaries provided by WIX.
doesn’t support vectorized files (like sVG)