Efecto de desplazamiento de GSAP

1632 Andev.web

Abrir en el editor Publica tu código

Recomendado

23 March 2025

Un código de solosimbaa86

18 May 2024

Formulario de inicio de sesión borroso

10 December 2025

Inspirado por el fuego: Portafolio de desarrollador web (Tailwind CSS)

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'><link rel="stylesheet" href="./style.css">

</head>
<body>
<section class="cards__wrapper">
	<figure class="card">
		<div class="card__image--wrapper">
			<div class="card__image--outer">
				<img src="https://t.ly/xgCIZ" alt="Portrait" class="card__image" />
			</div>
		</div>
		<div class="card__text">
			<span class="card__text--inner" data-splitting>STYLE</span>
		</div>
	</figure>

<figure class="card">
		<div class="card__image--wrapper">
			<div class="card__image--outer">
				<img src="https://t.ly/GsIR4" alt="Portrait" class="card__image" />
			</div>
		</div>
		<div class="card__text">
			<span class="card__text--inner" data-splitting>PRAISE</span>
		</div>
	</figure>

<figure class="card">
		<div class="card__image--wrapper">
			<div class="card__image--outer">
				<img src="https://t.ly/RfNBf" alt="Portrait" class="card__image" />
			</div>
		</div>
		<div class="card__text">
			<span class="card__text--inner" data-splitting>FASHION</span>
		</div>
	</figure>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script>
<script src='https://unpkg.com/splitting/dist/splitting.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@400;700&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #121013;
  display: grid;
  place-items: center;
}

.cards__wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}
.cards__wrapper .card {
  position: relative;
  width: 340px;
  height: 400px;
  margin: 3rem 5rem;
  pointer-events: none;
}
.cards__wrapper .card__image--wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: grayscale(0);
  transition: filter 0.5s ease;
}
.cards__wrapper .card__image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 0.5s ease, opacity 0.35s ease;
}
.cards__wrapper .card__image--outer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cards__wrapper .card__text {
  position: absolute;
  left: 0;
  bottom: 25%;
  transform: translateX(-8rem);
  pointer-events: none;
  user-select: none;
  mix-blend-mode: difference;
}
.cards__wrapper .card__text--inner {
  display: inline-block;
  color: #fff;
  font-size: 5rem;
  font-family: "Red Rose", Roboto;
  font-weight: 700;
  overflow: hidden;
}
.cards__wrapper .card__text--inner .word {
  white-space: nowrap;
}
.cards__wrapper .card__text--inner .char {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 20ms);
}
.cards__wrapper .card:hover .card__image {
  transform: scale(1);
}
.cards__wrapper .card:hover .card__text--inner .char {
  transform: translateY(0%);
}
.cards__wrapper:hover > .card:not(:hover) .card__image--wrapper {
  filter: grayscale(1);
}
.cards__wrapper:hover > .card:not(:hover) .card__image {
  opacity: 0.8;
}

.support {
  position: fixed;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}
.support a {
  margin: 0 10px;
  color: #fff;
  font-size: 1.8rem;
  backface-visibility: hidden;
  transition: all 150ms ease;
}
.support a:hover {
  transform: scale(1.1);
}

Recomendado

Un código de solosimbaa86

Formulario de inicio de sesión borroso

Inspirado por el fuego: Portafolio de desarrollador web (Tailwind CSS)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS