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