Webleb - fragmentos de código - Control deslizante de recorrido rotatorio

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,200&display=swap");

:root {
  --img-current: url(https://cdn.pixabay.com/photo/2021/11/26/17/26/dubai-desert-safari-6826298_1280.jpg);
  --img-next: url(https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_1280.jpg);
  --text-current-title: "Sahara";
  --text-next-title: "Maldives";
  --text-current-subtitle: "Marrakech";
  --text-next-subtitle: "Indian Ocean";
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

header,
footer {
  position: fixed;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

header > *,
footer > * {
  flex: 1 1 100%;
  padding: 2rem;
}

header {
  top: 0;
}

footer {
  bottom: 0;
}

header > *:nth-child(2),
footer > *:nth-child(2) {
  text-align: center;
}

header > *:nth-child(3),
footer > *:nth-child(3) {
  text-align: right;
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

h1,
h2 {
  display: block;
  text-wrap: nowrap;
  margin: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
h1::before,
h2::before {
  transition-delay: 0.5s;
  transform: translate(-50%, 0%);
}

h1 {
  font-family: "Literata";
  font-weight: 200;
  height: clamp(2rem, 8vw, 4rem);
  font-size: clamp(2rem, 8vw, 4rem);
  letter-spacing: clamp(0.5rem, 5vw, 10rem);
  margin-left: clamp(0.5rem, 5vw, 10rem);
}
h1::before,
h1::after {
  content: var(--text-current-title);
  position: absolute;
  line-height: 1;
}
h1::after {
  content: var(--text-next-title);
  transition-delay: 0.5s;
  transform: translate(-50%, 100%);
}

h2 {
  height: clamp(0.9rem, 2vw, 1.1rem);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  letter-spacing: clamp(0.5rem, 3vw, 5rem);
  margin-left: clamp(0.5rem, 3vw, 5rem);
  font-weight: 400;
}
h2::before,
h2::after {
  content: var(--text-current-subtitle);
  position: absolute;
  line-height: 1;
}
h2::after {
  content: var(--text-next-subtitle);
  transition-delay: 0.5s;
  transform: translate(-50%, -100%);
}

hr {
  opacity: 0.3;
  border: none;
  height: 2px;
  background: #fff;
}

.logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(180vw, 180vh);
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  filter: brightness(0.8);
}

.background::before,
.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: max(110vw, 110vh) max(110vw, 110vh);
  background-position: 50%;
  transition: all 1.5s;
  transition-timing-function: ease-in-out;
}

.background::before {
  background-image: var(--img-current);
}

.background::after {
  background-image: var(--img-next);
  opacity: 0;
}
.background--2::after {
  transition-delay: 0.2s;
}
.background--3::after {
  transition-delay: 0.4s;
}

.background--2::before,
.background--2::after {
  clip-path: circle(23%);
  filter: brightness(0.8);
}

.background--3::before,
.background--3::after {
  clip-path: circle(13%);
}

.body--animated .background::before,
.body--animated .background::after {
  animation: rotate ease-in-out 1s forwards;
  animation-delay: 0.4s;
  transition-delay: 0.4s;
}
.body--animated .background--2::before,
.body--animated .background--2::after {
  animation-delay: 0.2s;
  transition-delay: 0.2s;
}
.body--animated .background--3::before,
.body--animated .background--3::after {
  animation-delay: 0s;
  transition-delay: 0s;
}

.body--animated .background::after {
  opacity: 1;
}

.body--animated h1::before,
.body--animated h2::before,
.body--animated h1::after,
.body--animated h2::after {
  transition-delay: 0.5s;
  transition-duration: 0.5s;
}
.body--animated h1:before {
  transform: translate(-50%, -100%);
}
.body--animated h1:after {
  transform: translate(-50%, 0%);
}
.body--animated h2:before {
  transform: translate(-50%, 100%);
}
.body--animated h2:after {
  transform: translate(-50%, 0%);
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 95%;
  text-align: center;
  transform: translate(-50%, clamp(-2rem, -4vw, -1rem));
}

.content hr {
  max-width: 400px;
  margin: clamp(1rem, 5vw, 2.5rem) auto;
}

.randomize {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
}

.randomize hr {
  display: inline-block;
  width: 25px;
  margin: 0 1vw;
}

.randomize button {
  background: #cfd865;
  width: clamp(2rem, 4vw, 3rem);
  aspect-ratio: 1/1;
  border: none;
  border-radius: 50%;
  font-size: clamp(1rem, 2vw, 1.5rem);
  cursor: pointer;
}

/* animation */

@keyframes rotate {
  0% {
    transform: rotate(0) translateZ(0);
    background-size: max(110vw, 110vh) max(110vw, 110vh);
  }
  50% {
    background-size: max(160vw, 160vh) max(160vw, 160vh);
  }
  100% {
    transform: rotate(360deg) translateZ(0);
    background-size: max(110vw, 110vh) max(110vw, 110vh);
  }
}

/* sharethis */

footer #st-1.sharethis-inline-share-buttons {
  text-align: left;
}

footer #st-1.sharethis-inline-share-buttons .st-btn {
  border: none;
  background: rgba(0, 0, 0, 0);
}

footer #st-1.sharethis-inline-share-buttons .st-btn img {
  filter: brightness(5);
}

JS

const getRandomDestination = () => {
  const randomId = Math.floor(Math.random() * destinations.length);
  return destinations[randomId];
};

const displayNextContent = () => {
  if (bodyElement.classList.contains("body--animated")) {
    return;
  }

bodyElement.classList.add("body--animated");

setTimeout(() => {
    r.style.setProperty("--img-current", `url(${nextDestination.img})`);
    r.style.setProperty("--text-current-title", `"${nextDestination.name}"`);
    r.style.setProperty(
      "--text-current-subtitle",
      `"${nextDestination.location}"`
    );
    setTimeout(() => {
      bodyElement.classList.remove("body--animated");
      setTimeout(() => {
        nextDestination = getRandomDestination();
        r.style.setProperty("--img-next", `url(${nextDestination.img})`);
        r.style.setProperty("--text-next-title", `"${nextDestination.name}"`);
        r.style.setProperty(
          "--text-next-subtitle",
          `"${nextDestination.location}"`
        );
      }, 1000);
    }, 1000);
  }, 1000);
};

randomizeElement.addEventListener("click", displayNextContent);

// start on fist load only for CodePen Animation ;)
displayNextContent();

Control deslizante de recorrido rotatorio

Recomendado

Generador de contraseñas

Un código de alejandrokundrah

Formulario de inicio de sesión HTML CSS

HTML

CSS

JS

Recomendado

Generador de contraseñas

Un código de alejandrokundrah

Formulario de inicio de sesión HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS