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
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.