WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código por slowlogic9
1472
slowlogic9
Abrir no Editor
Publique Seu Código
Recomendado
23 May 2025
Um Código de Skyrreum
27 June 2025
Um código de Mete
1 June 2025
Um código de kevekıbhack
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, });