I was trying to create a scrolling effect similar to this website: https://cacoo.com/ under "A million and one uses" . The image on left is fixed until scrolled to another section and the text on the right side is scrolling up. Must be very simple solution but I couldn't figure it out. Any help will be appreciated. Thanks!
Fixed image just in one section
Hi @Anup_Dhakal,
There is a bit complicated but interesting structure
BIG WRAP SECTION (position:relative)
__ Div "section body" (position: auto)
--__ div with header "A million and one uses" (position: absolute)
__ Section for user info (position: relative, height: 100vh)
--__Div "section body" (position: relative)
- - - __div with text content (float: right)
--__Div "image container" (position: absolute, h, aligh top: 0px, z-index: 6)
- - - __div with background image (position: absolute, height: 100vh, aligh top: 0px)
- - - __div for user photo (position: relative, height: 100%)
- - - _ _ _ user photo (position: absolute)
__ Section for user info (position: relative, height: 100vh)
--__Div "section body" (position: relative)
- - - __div with text content (float: right)
--__Div "image container" (position: absolute, h, aligh top: 0px, z-index: 5)
- - - __div with background image (position: absolute, height: 100vh, aligh top: 0px)
- - - __div for user photo (position: relative, height: 100%)
- - - _ _ _ user photo (position: absolute)
Try to re-create this structure and play around with it. I am not sure if there is also some jquery plugin or not.
Hope it helps.
Cheers,
Anna
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.