Tilt Grid Image Gallery With Parallax

by
Tilt Grid Image Gallery With Parallax
Code Snippet:Tilt Grid with Parallax
Author:
Published: March 4, 2024
Last Updated: March 4, 2024
Downloads: 494
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (6 KB)

The code creates a Tilt Grid Image Gallery with a parallax effect. It displays images in a grid layout. The parallax effect is triggered by scrolling, adding depth to the images. This is helpful for showcasing multiple images attractively with an engaging scroll-based animation.

You can use this code to create a cool image gallery on your website. It adds a parallax effect while scrolling, giving your gallery a dynamic and engaging look. This feature can enhance user interaction and make your website more visually appealing.

How to Create Tilt Grid Image Gallery With Parallax Effect

1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link href="https://api.fontshare.com/v2/css?f[]=clash-grotesk@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. After that, create the HTML structure of your webpage. Create a container for the image gallery and add individual elements for each image. Replace "image1.jpg", "image2.jpg", etc., with the actual image URLs you want to display. Adjust the data-speed attribute to control the parallax effect speed for each image.

<section class="hero p-x">
	<div class="container">
		<h1>Tilt Grid</h1>
		<p>Scroll to see the parallax effect</p>
	</div>
</section>
<section class="tiltgrid">
	<div class="tiltgrid__container">
		<div><img loading="lazy" src="https://picsum.photos/id/11/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/33/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/22/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/4/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/15/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/62/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/7/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/18/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/29/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/10/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/11/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/12/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/13/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/14/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/15/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/16/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/17/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/18/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/19/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/20/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/21/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/22/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/23/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/24/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/25/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/26/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/27/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/28/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/29/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/30/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/31/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/32/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/33/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/34/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/35/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/36/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/37/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/38/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/39/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/40/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/41/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/42/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/43/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/44/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/45/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/46/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/47/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/48/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/49/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/50/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/51/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/52/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/53/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/54/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/55/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/56/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/57/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/58/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/59/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/60/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/61/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/62/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/63/1280/720" alt=""></div>
		<div><img loading="lazy" src="https://picsum.photos/id/64/1280/720" alt=""></div>
	</div>
	
</section>
<section class="p-x bottom">
	<div class="container">
		This is some content after the Tilted Grid
	</div>
</section>

3. Define the styles to create the parallax effect and layout for the image gallery. Save these styles in a file named styles.css.

.tiltgrid {
  overflow: hidden;
}

@media screen and (min-width: 720px) {
  .tiltgrid {
    margin-inline: clamp(1rem, 0.5714285714285714rem + 1.9047619047619049vw, 2rem);
  }
}
.tiltgrid__container {
  --skew-y: calc(var(--scroll-tilt, -7) * 1deg) ;
  --easing: cubic-bezier(1,.45,.7,1.05);
  transform: skewY(var(--skew-y)) scale(1.05);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.25rem, -0.0714285714285714rem + 1.4285714285714286vw, 1rem);
  transition: gap 0.3s ease;
}
@media screen and (min-width: 720px) {
  .tiltgrid__container {
    grid-template-columns: repeat(4, 1fr);
  }
}
.tiltgrid__container:hover img {
  filter: saturate(0);
  transition: scale 0.8s, filter 1s;
}
.tiltgrid__container > div {
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
  opacity: 0;
  animation: tiltslide 1s forwards;
}
.tiltgrid__container > div:nth-child(1) {
  animation-delay: 0.05s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(2) {
  animation-delay: 0.1s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(3) {
  animation-delay: 0.15s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(4) {
  animation-delay: 0.2s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(5) {
  animation-delay: 0.25s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(6) {
  animation-delay: 0.3s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(7) {
  animation-delay: 0.35s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(8) {
  animation-delay: 0.4s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(9) {
  animation-delay: 0.45s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(10) {
  animation-delay: 0.5s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(11) {
  animation-delay: 0.55s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(12) {
  animation-delay: 0.6s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(13) {
  animation-delay: 0.65s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(14) {
  animation-delay: 0.7s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(15) {
  animation-delay: 0.75s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(16) {
  animation-delay: 0.8s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(17) {
  animation-delay: 0.85s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(18) {
  animation-delay: 0.9s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(19) {
  animation-delay: 0.95s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(20) {
  animation-delay: 1s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(21) {
  animation-delay: 1.05s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(22) {
  animation-delay: 1.1s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(23) {
  animation-delay: 1.15s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(24) {
  animation-delay: 1.2s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(25) {
  animation-delay: 1.25s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(26) {
  animation-delay: 1.3s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(27) {
  animation-delay: 1.35s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(28) {
  animation-delay: 1.4s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(29) {
  animation-delay: 1.45s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(30) {
  animation-delay: 1.5s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(31) {
  animation-delay: 1.55s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(32) {
  animation-delay: 1.6s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(33) {
  animation-delay: 1.65s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(34) {
  animation-delay: 1.7s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(35) {
  animation-delay: 1.75s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(36) {
  animation-delay: 1.8s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(37) {
  animation-delay: 1.85s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(38) {
  animation-delay: 1.9s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(39) {
  animation-delay: 1.95s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(40) {
  animation-delay: 2s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(41) {
  animation-delay: 2.05s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(42) {
  animation-delay: 2.1s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(43) {
  animation-delay: 2.15s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(44) {
  animation-delay: 2.2s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(45) {
  animation-delay: 2.25s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(46) {
  animation-delay: 2.3s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(47) {
  animation-delay: 2.35s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(48) {
  animation-delay: 2.4s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(49) {
  animation-delay: 2.45s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(50) {
  animation-delay: 2.5s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(51) {
  animation-delay: 2.55s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(52) {
  animation-delay: 2.6s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(53) {
  animation-delay: 2.65s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(54) {
  animation-delay: 2.7s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(55) {
  animation-delay: 2.75s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(56) {
  animation-delay: 2.8s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(57) {
  animation-delay: 2.85s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(58) {
  animation-delay: 2.9s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(59) {
  animation-delay: 2.95s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(60) {
  animation-delay: 3s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(61) {
  animation-delay: 3.05s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(62) {
  animation-delay: 3.1s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(63) {
  animation-delay: 3.15s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(64) {
  animation-delay: 3.2s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(65) {
  animation-delay: 3.25s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(66) {
  animation-delay: 3.3s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(67) {
  animation-delay: 3.35s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(68) {
  animation-delay: 3.4s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(69) {
  animation-delay: 3.45s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(70) {
  animation-delay: 3.5s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(71) {
  animation-delay: 3.55s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(72) {
  animation-delay: 3.6s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(73) {
  animation-delay: 3.65s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(74) {
  animation-delay: 3.7s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(75) {
  animation-delay: 3.75s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(76) {
  animation-delay: 3.8s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(77) {
  animation-delay: 3.85s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(78) {
  animation-delay: 3.9s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(79) {
  animation-delay: 3.95s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(80) {
  animation-delay: 4s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(81) {
  animation-delay: 4.05s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(82) {
  animation-delay: 4.1s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(83) {
  animation-delay: 4.15s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(84) {
  animation-delay: 4.2s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(85) {
  animation-delay: 4.25s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(86) {
  animation-delay: 4.3s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(87) {
  animation-delay: 4.35s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(88) {
  animation-delay: 4.4s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(89) {
  animation-delay: 4.45s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(90) {
  animation-delay: 4.5s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(91) {
  animation-delay: 4.55s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(92) {
  animation-delay: 4.6s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(93) {
  animation-delay: 4.65s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(94) {
  animation-delay: 4.7s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(95) {
  animation-delay: 4.75s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(96) {
  animation-delay: 4.8s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(97) {
  animation-delay: 4.85s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(98) {
  animation-delay: 4.9s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(99) {
  animation-delay: 4.95s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(100) {
  animation-delay: 5s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(101) {
  animation-delay: 5.05s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(102) {
  animation-delay: 5.1s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(103) {
  animation-delay: 5.15s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(104) {
  animation-delay: 5.2s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(105) {
  animation-delay: 5.25s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(106) {
  animation-delay: 5.3s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(107) {
  animation-delay: 5.35s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(108) {
  animation-delay: 5.4s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(109) {
  animation-delay: 5.45s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(110) {
  animation-delay: 5.5s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(111) {
  animation-delay: 5.55s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(112) {
  animation-delay: 5.6s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(113) {
  animation-delay: 5.65s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(114) {
  animation-delay: 5.7s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(115) {
  animation-delay: 5.75s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(116) {
  animation-delay: 5.8s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(117) {
  animation-delay: 5.85s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(118) {
  animation-delay: 5.9s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(119) {
  animation-delay: 5.95s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(120) {
  animation-delay: 6s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(121) {
  animation-delay: 6.05s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(122) {
  animation-delay: 6.1s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(123) {
  animation-delay: 6.15s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(124) {
  animation-delay: 6.2s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(125) {
  animation-delay: 6.25s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(126) {
  animation-delay: 6.3s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(127) {
  animation-delay: 6.35s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div:nth-child(128) {
  animation-delay: 6.4s;
  animation-duration: 0.7s;
}
.tiltgrid__container > div img {
  aspect-ratio: 16/9;
  min-width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  filter: saturate(1);
  transform: skewY(calc(var(--skew-y) * -1));
  scale: 1.4;
  transition: scale 0.8s, filter 0.6s;
}
.tiltgrid__container > div:hover img {
  scale: 1.5;
  filter: saturate(1);
  transition: scale 0.8s, filter 0.6s;
}

@keyframes tiltslide {
  from {
    opacity: 0;
    clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
    filter: saturate(0);
  }
  to {
    opacity: 1;
    clip-path: polygon(0 0, 100% 1%, 100% 100%, 0% 100%);
    filter: saturate(1);
  }
}
.p-x {
  padding-inline: 1.5em;
}

.hero {
  padding-top: clamp(6rem, 4.285714285714286rem + 7.6190476190476195vw, 10rem);
  padding-bottom: clamp(2rem, 1.1428571428571428rem + 3.8095238095238098vw, 4rem);
  position: sticky;
  top: 0;
  transform-origin: 50% 0%;
}
.hero .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.hero .container > * {
  margin: 0;
}
.hero .container h1 {
  font-size: clamp(1.5rem, 0.8571428571428572rem + 2.857142857142857vw, 3rem);
  line-height: 1.2;
}
.hero .container p {
  margin-top: 0.5em;
  font-size: clamp(0.875rem, 0.7142857142857143rem + 0.7142857142857143vw, 1.25rem);
  color: #666;
}

.bottom {
  min-height: 200vh;
  padding-block: clamp(2rem, 1.5714285714285714rem + 1.9047619047619049vw, 3rem);
}
.bottom .container {
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

body {
  overflow-x: hidden;
}

4. Finally, add the JavaScript functionality to enable the parallax effect. Save this code in a file named script.js.

document.addEventListener("DOMContentLoaded", function () {
	const heroGrid = document.querySelector(".tiltgrid");
	const hero = document.querySelector(".hero");
	const tiltDegree = 7;
	function isElementInViewport(element) {
		const rect = element.getBoundingClientRect();
		return (
			rect.bottom > 0 &&
			rect.right > 0 &&
			rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
			rect.top < (window.innerHeight || document.documentElement.clientHeight)
		);
	}
	function mapRange(value, inMin, inMax, outMin, outMax) {
		return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
	}
	function updateScrollPos() {
		const scrollPos = window.scrollY;
		const rect = heroGrid.getBoundingClientRect();
		const scrollPercent = (scrollPos * 100) / rect.height;

		let mappedValue = mapRange(scrollPercent, 0, 100, tiltDegree * -1, tiltDegree);
		heroGrid.style.setProperty("--scroll-tilt", `${mappedValue}`);
		let heroOpacity = mapRange(scrollPercent, 0, 10, 1, 0);
		let heroScale = mapRange(scrollPercent, 0, 10, 1, 0);
		let heroTransformY = mapRange(scrollPercent, 0, 10, 0, -100);
		let heroBlur = mapRange(scrollPercent, 0, 10, 0, 20);
		hero.style.opacity = heroOpacity;
		hero.style.filter = `blur(${heroBlur}px)`;
		hero.style.transform = `translateY(${heroTransformY}px)`;
	} 

	function handleScroll() {
		if (heroGrid && isElementInViewport(heroGrid)) {
			updateScrollPos();
		}
	}

	window.addEventListener("scroll", handleScroll);

	handleScroll();
});

That’s all! hopefully, you have successfully created a tilt grid image gallery on your website. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X