WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by slowlogic9
1967
slowlogic9
Open In Editor
Video
Publish Your Code
0
Recommended
25 August 2024
Exploring UI Animation Products
6 November 2025
Interactive World Map with React and D3
16 January 2025
A Code by mematixd3162
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, });