scrolling to produce an accumulated image

[bwana]

I don’t know if there is a term to better describe this effect. I would like a scrolling webpage like this one:
http://stefangeorge.github.io/parallax-test-2/
with the added feature that each ‘slide’ deposit a specific drawing/text/small image at a specific location in the viewport.

For example, as the user scrolls the website, I’d like multiple images of a little armadillo deposited along a track at the bottom of the viewport.

Also, is there a way to make each slide ‘click into place’ so that when i flick the screen it stops at the next slide?

[Paulie_D]

Yes…using Javascript / Jquery.

As each point is reached (using whatever JS you want and there are many) a function does something.

ScrollMagic for one..http://janpaepke.github.io/ScrollMagic/

Some of the transitions etc can be handled by CSS but you need JS to detect the scroll position and fire the function.

[bwana]

Thank you for moving my thing to the javascript section. I did not realize that it was fundamentally a javascript issue.

Your comment about using scroll magic is interesting. But I am seeing a weird effect where the object has to scroll past where it gets pinned and then it jumps down to the pinned spot.

I made an example without scroll magic that is smoother.
Here is an example with plain code:
http://codepen.io/anon/pen/vnFGg

but interestingly when I post it to the net and view it directly in safari there is a subtle difference:
http://stefangeorge.github.io/scrollandpin/

Navbar2 scrolls up BEHIND navbar one and then pops on top.
I wonder why?

Also, I am sure I should refactor my javascript-and that would be necessary if I am piling 10 images on top of each other on the page.

[Paulie_D]

Also, I am sure I should refactor my javascript-and that would be necessary if I am piling 10 images on top of each other on the page.

Thing is…if you have 10 images that you want to stack…it probably makes more sense to have 10 images each of which represents a stage in the sequence and swap them out.

Lighter in page weight too I imagine….although that’s a guess.

[bwana]

it probably makes more sense to have 10 images each of which represents a stage in the sequence and swap them out.

Do you have a favorite example of the swapping thing?

Also, how can i best describe the thing that happens when Navbar2 scrolls up BEHIND navbar one and then pops on top.? Icant seem to find an explanation.

[Paulie_D]

Do you have a favorite example of the swapping thing?

Not really…just trying to think logically.

That said, it sounds like an excellent opportunity for using SVG. Depends on the actual effect you are going for.

describe the thing that happens when Navbar2 scrolls up BEHIND navbar one and then pops on top.? I cant seem to find an explanation.

It sounds like a z-index issue caused by amending positioning context(s) on your class change changing the stacking order.

[Author]

Posts