Um código por slowlogic9

1854 slowlogic9

Abrir no Editor Video Publique Seu Código

Recomendado

3 June 2025

Um Código por alejandrokundrah

26 May 2025

Um Código de Liamgilles76

18 December 2025

Pedido de jogo Flash Ruffle: Mutilar uma boneca 2 HTML

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<body>
    <audio id="background-music" loop>
      <source
        src="https://github.com/ecemgo/mini-samples-great-tricks/raw/main/song-list/stranger-things-luxide-remix-no-copyright-music.mp3"
        type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
    <button id="play-pause-button">
      <ion-icon class="audio-icon" id="play-music" name="play"></ion-icon>
      <ion-icon
        class="audio-icon hidden"
        id="pause-music"
        name="pause"></ion-icon>
    </button>

<div class="container">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c91f906b-5881-47b1-89e4-e4a69c1961a7" />
            <p>Lucas</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5bc859f0-db4f-4ab4-8f5f-e55977c33eb1" />
            <p>Mike</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/d239a63a-a0f8-4213-82dc-bb8d3f0806db" />
            <p>Max</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9c0637aa-b440-4aef-93f3-ea20cf19f42c" />
            <p>Will</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/6a90b5ba-9f3e-4cb3-a8e2-3ae19b2aa443" />
            <p>Eleven</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/fe05145f-c9ab-457f-a91b-92a4c1bd633c" />
            <p>Dustin</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/1158c3d4-81d5-4dfc-bb42-863f357ecdb5" />
            <p>Eddie Munson</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c8ef23d2-37ee-4473-ad86-d9c9911be3bb" />
            <p>Steve</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/29eff421-1087-4b51-92a2-a7f204098187" />
            <p>Robin</p>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </body>
  <script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js'></script>
<script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js'></script>
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@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

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;

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,
});

Recomendado

Um Código por alejandrokundrah

Um Código de Liamgilles76

Pedido de jogo Flash Ruffle: Mutilar uma boneca 2 HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS