WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by slowlogic9
1476
slowlogic9
Open In Editor
Publish Your Code
Recommended
2 September 2025
CSS Fragment Animation Example
16 October 2025
CSS Loading Animation with Fragment Effects
17 July 2025
Error 404 Page HTML Template
HTML
Copy
Andev Web
Your browser does not support the audio element.
Lucas
Mike
Max
Will
Eleven
Dustin
Eddie Munson
Steve
Robin
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { position: relative; font-family: "Poppins", sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; background: #111113; background-image: radial-gradient( circle at top left, #950923 10%, #111113 30% ); } .particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; } .container { width: 80%; } .swiper { width: 100%; padding: 50px 0; } .swiper-slide { position: relative; width: 200px; height: 500px; border-radius: 12px; overflow: hidden; transition: 1s; user-select: none; } .swiper-slide::after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient( 120deg, rgba(130, 13, 13, 0.8), rgba(39, 8, 92, 0.8) ); mix-blend-mode: multiply; z-index: 1; } .swiper-slide img { width: 100%; height: 100%; object-fit: cover; transition: 1s; } .swiper-slide p { position: absolute; left: 20px; bottom: 10px; color: #fff; font-size: 1.3rem; font-weight: 600; font-style: italic; letter-spacing: 2px; z-index: 2; opacity: 0; transform: rotate(360deg) scale(0); transition: 0.8s; } .swiper-slide-active { position: relative; width: 350px; transition: 1s; } .swiper-slide-active::after { background: rgba(123, 123, 123, 0.4); } .swiper-slide-active img { transform: scale(1.3); object-position: 50% 0%; } .swiper-slide-active p { transform: rotate(0deg) scale(1); opacity: 1; } .swiper-pagination-bullet { width: 16px; height: 16px; background-color: #fff; border-radius: 50%; transition: all 0.6s ease-in-out; } .swiper-pagination-bullet-active { width: 32px; background-color: #6f1223; border-radius: 14px; } .audio-icon { font-size: 2rem; color: #fff; } #play-pause-button { position: fixed; display: flex; align-items: center; justify-content: center; left: 3%; bottom: 5%; background-color: transparent; background-image: radial-gradient( 50% 115% at 50% -5%, rgba(255, 255, 255, 0.11) 0%, transparent 100% ); box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.14), inset 0px 5px 10px 0px rgba(255, 255, 255, 0.11), inset 0px 2px 5px 0px rgba(255, 255, 255, 0.4), inset 0px 3px 20px 0px rgba(0, 0, 0, 0.25); z-index: 10; border: 0; border-radius: 50%; outline: 0; padding: 12px; cursor: pointer; transition: all 0.2s ease-in-out; } #play-pause-button:hover { background-color: rgba(255, 255, 255, 0.05); } #play-pause-button:active { transform: scale(0.95); } .hidden { display: none; }
JS
Copy
const audio = document.getElementById("background-music"); const playPauseButton = document.getElementById("play-pause-button"); const playIcon = document.getElementById("play-music"); const pauseIcon = document.getElementById("pause-music"); let isPlaying = false; function togglePlayPause() { console.log("Toggle function called"); if (isPlaying) { audio.pause(); playIcon.classList.remove("hidden"); pauseIcon.classList.add("hidden"); } else { audio.play(); playIcon.classList.add("hidden"); pauseIcon.classList.remove("hidden"); } isPlaying = !isPlaying; } playPauseButton.addEventListener("click", togglePlayPause); audio.addEventListener("ended", function () { audio.currentTime = 0; audio.play(); }); var swiper = new Swiper(".swiper", { grabCursor: true, initialSlide: 4, centeredSlides: true, slidesPerView: "auto", spaceBetween: 10, speed: 1000, freeMode: false, mousewheel: { thresholdDelta: 30, }, pagination: { el: ".swiper-pagination", }, on: { click(event) { swiper.slideTo(this.clickedIndex); }, }, }); particlesJS("particles-js", { particles: { number: { value: 180, density: { enable: true, value_area: 800, }, }, color: { value: "#fff", }, shape: { type: "circle", }, opacity: { value: 0.3, random: false, anim: { enable: false, speed: 4, opacity_min: 0.1, sync: false, }, }, size: { value: 4, random: true, anim: { enable: true, speed: 2, size_min: 0.1, sync: false, }, }, line_linked: { enable: false, }, move: { enable: true, speed: 0.4, direction: "right", random: true, straight: false, out_mode: "none", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200, }, }, }, retina_detect: true, });