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!
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