WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Curseur animé | Glisser JS
2501
Andev.web
Ouvrir dans l'éditeur
Video
Publiez votre code
2
Recommandé
28 January 2024
Code CSS pour cartes animées
28 April 2024
Bouton HTML animé
21 August 2024
Page de chargement animée
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, });