WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by slowlogic9
1971
slowlogic9
Open In Editor
Video
Publish Your Code
0
Recommended
4 December 2025
HTML Animated Button with SVG and Text
21 January 2026
Ping Pong Chaos Game: Unity Loader HTML Snippet
8 January 2025
dragon
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, });