Streaming live at 10am (PST)

Fixed image just in one section


#1

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!


#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


#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.