This video. Probably jump to the minute 17:18

How can I apply this to an image?

First of all, I’m sorry if I’m imagining something that is not possible or that the way I’m requesting this is not correct, I’m starting to learn more things about CSS and I’m right now starting a project.

What I’m trying to do is to make an image bigger inside a rectangular div (245x245px) so that when I scroll the image inside gets pushed down a little like in the video but not the div.

Because the image would be bigger than the div, maybe a 640x640px, the image would be coming down but we would not see any white space increasing!

This idea would look like this:

Post image

But first… Is this even possible? 🙁

And when scrolled down:

Post image

Something like this, the idea is that the rectangular div won’t be scrolling too and leaving a white space.

White spice like this:

Post image

This is what happens when I apply the method showed in the video.

This is the best parallax tutorial I’ve watched since I started to make that effect like 3-4 hours ago.

Also, the mentioned image is small, all the tutorials show always an image that covers the entire width of the page or something like that. My image is just on the left side of a paragraph. The size of the div parent is 245x245px. Some examples of that effect are seen on the Soundcloud app where the covers have a parallax effect.

Post image

This is the card I’m designing. That’s the image I want to have that effect.

Of course, any other methods are accepted, this is just my beginner proposition that might not be the best one.

If you can help me, I would really really appreciate it, like, man, I would love you for the rest of my life. Thank you!



Source link

Write A Comment