Kevin Powell - Community•15mo ago

How do I recreate this parallax?

I'm not sure how to explain it but I want to recreate the "effect" of the image below, basically it's an image container with a parallax. So, if the image is on the top you can see the top part of it, if it's on the bottom you can see the bottom part of it. I tried recreating that by following some tutorials but it didn't work out

4 Replies

lkoOP•15mo ago

This was my attempt:

<section class="p-12 h-[300vh] pt-96">
<div class="w-24 h-24 overflow-hidden outline relative">
  <img src="https://unsplash.it/500/500" alt="" class="w-full h-96 object-cover">
</div>
</div>

<section class="p-12 h-[300vh] pt-96">
<div class="w-24 h-24 overflow-hidden outline relative">
  <img src="https://unsplash.it/500/500" alt="" class="w-full h-96 object-cover">
</div>
</div>

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  body {
    @apply bg-neutral-900
  }
}
div {
  perspective: 200px;
}

section, div {
  transform-style: preserve-3d;
}
div {
  position: relative;
}
img {
  transform: translateZ(-200px) scale(2);
}

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  body {
    @apply bg-neutral-900
  }
}
div {
  perspective: 200px;
}

section, div {
  transform-style: preserve-3d;
}
div {
  position: relative;
}
img {
  transform: translateZ(-200px) scale(2);
}

Choo♚𝕂𝕚𝕟𝕘•15mo ago

https://codepen.io/chooking/pen/vYveeab

ChooKing

CodePen

Slide reveal

...

lkoOP•15mo ago

no, I dont want it to move, it should stay in the same place and when the user scrolls the page the image inside the container (but not the container) moves, like in a parallax effect

Choo♚𝕂𝕚𝕟𝕘•15mo ago

I made it move to demonstrate that it works. I wasn't giving you code to copy and paste. I was giving you code to show the technique.

Gaming

Programming

How do I recreate this parallax?