Amazon's scrolling Image - javascript

i would like to implement an effect that i saw at amazon and zalando. On top of the product info page is an image on the left side and a long description on the right side. If i scroll down, the image stays at the top of my screen, untill the right side reaches its end, than it stops scroling.
Examples:
https://www.zalando.de/levis-standard-crew-sweatshirt-caviar-le221j03m-q11.html
https://www.amazon.de/Bluetooth-Kopfh%C3%B6rer-Wasserdicht-Sportkopfh%C3%B6rer-Klangprofil-New-Model/dp/B08C7C29JK/ref=sr_1_5?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&crid=2CF2HKPS0ISI2&dchild=1&keywords=bluetooth%2Bkopfh%C3%B6rer%2Bmit%2Bmikrofon&qid=1624500497&sprefix=bluetooth%2Bkopfh%C3%B6rer%2Bmit%2Bmi%2Caps%2C167&sr=8-5&th=1
I checked the code but haven't found any trace of JS and no position:fixed on the outer div of the image box. Can someone give me an idea what i am supposed to search for to achieve the same result?

you can use position:sticky;for the image while the rest are in position relative. For position:sticky; be sure to use top:0px so it would stick to the topmost part of the screen. If you want to read more about position sticky you go to this link

Related

Improving scroll effect with one side scroll and the other change image based on scroll position

I created this scroll effect, where div is divided into left and right side - left side contains of images, that change based on scroll position and it's fixed and right side is scrolling content.
This is my idea:
https://codesandbox.io/s/scroll-effect-forked-ssi3x?file=/src/index.css
To describe the sandbox - you can see that my scroll effect works, but right div scrolls only when mouse is on that right div, what I need is that content of that right div will scroll down also when mouse is on left div
I tried to make the whole container's position fixed so it doesn't move, but it did not work. Is there a way how to achieve it?
Here is example of what I would like it to be like:
(starts with STEP 1)
https://honextmaterial.com/process/
To achieve your goal in React, you need a combination of some CSS and the JS scroll event. First, assign position: sticky to the element you need to be fixed when it's about to leave the viewport. Then, using a React ref, you access the scroll position of the scrollable div and use that logic to set your image source (you should avoid accessing the DOM directly with getElementById in React).
Here's a working codesandbox example
You could do this basically with only CSS. You could make the right (scrollable) side overlap the left side with position: absolute. Then the whole area is scrollable. After that you'd change the width of the inner element to 60% and you'd visually have the same output as before. I changed your codesandbox accordingly: https://codesandbox.io/s/scroll-effect-forked-55qsf
The only downside is, that the left side is not clickable, scrollable etc. anymore. If you want to keep HTML & CSS like before, you'd have to capture the scroll-event and run some JavaScript code.

How to stop image from moving downward when scrolling?

I have created a header image of about half a page. When user scroll down the images goes down with scrolling as well. I want the image to go up and hide and does not effect the content beneath it. I have checked many single page websites websites where images are on some place and when scrolling they goes up and down with scrolling and does not effect the other things.
I tried to use position:fixed but it didn't work, position:relative is also effecting the content beneath it.
Example of what i want : http://www.piedpiper.com/
Kindly tell me how to do this.
Set position:fixed for parent element of image.

Fade text out when scrolling

Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.

How can i have a div stuck on the left side of the page no matter how much i scroll horizontally?

This is kind of difficult to explain so ill link to a page that has the effect i need;
http://wpaoli.building58.com/wp-content/uploads/2009/08/feedback-panel.html
The feedback thing on the left side is what im trying to implement on my side,
instead of feedback im going to use it as a navigation menu that shows up when clicked on.
the things above is what i have right now.
my problem is when i scroll to the right ( my page is around 6000px wide )
i want it to stay on the left side,
is there a way to pull this off?
(this is to much for my brain to handle)..thanks!
Set the div to have a "position:fixed" style and then set "left:0px;top:0px". This makes the div stick to the top left of the browser instead of its relative position within the HTML flow.
Have a look at this example page, it has 2 fixed elements, one at the top left and the other at the bottom right:
Fixed example
You can use the exact same design, only use position:fixed on the feedback-panel.

How to implement a slide-out/drawer effect in JQuery?

I'm looking for a JQuery plug-in for a drawer-like effect. I found that plug-in which is quite similar to what I want but it slides from one side of the screen (top, bottom, left or right). In my case, I have an image as wide as the content div, and I want it to slide down when clicked to reveal the content, but not from the top of the screen, the image won't be located at the top of the screen. In other words, the effect I want is exactly like what that plug-in does but the only difference is that I don't want it to slide from the top side of the screen, it should slide from wherever the image is on the page.
Any suggestions would be really appreciated...
I think something like that would do it no?

Categories