0

I’m looking to recreate something like the features section on the FitBit website where the user scrolls down the main page then gets to the section of fixed images that crossfade when scrolling and retain the navigable scrolling content position dots:

https://www.fitbit.com/uk/flex

I’ve been looking at this for a while now and have found multiple plugins but none of them are quite right. In particular I was wondering if anyone had seen any relevant plugins combinations I could use or initial ideas of how to go about doing the cross fade with navigation while scrolling?

Thanks!

Danielle Vautier
  • 41
  • 7

1 Answers1

0

Short Answer: There's no need for any special plugins, it can all be done with reasonably simple JQuery

Detail:

I doubt there's anything seriously complicated going on here. There's a question I saw recently Here that deals with triggering changes on scroll - that is to say, when the scroll height reaches a certain level (the next "page" you want the different background to appear on), you can trigger changes like changing the background image.

In order to make the backgrounds crossfade, just use JQuery.fadeIn() and .fadeOut() on your two images. I'm assuming you know how you make an image appear in the background by some method (e.g., z-index).

The other bits and pieces will obviously have their own requirements to set up. The fitbit site in general is far more complicated - it behaves differently at different stages on the page and again differently if you view it with a different window size (all this can be controlled using CSS @media tags and JQuery). Given that your question asks specifically about the crossfading section I haven't addressed any of these other aspects of the page. I'm assuming you already know how to do them or aren't interested in replicating them :)

Community
  • 1
  • 1
Ieuan Stanley
  • 1,248
  • 8
  • 20
  • Yer, I think I have the other bits covered thank you! It's mainly the crossfading and the navigating both ways through the multiple crossfades, I think I may be over complicating it :) I'll take a look at the other questions thank you! – Danielle Vautier Jan 05 '16 at 16:02
  • 1
    In case, if you need code snippet. here is jsfiddle https://jsfiddle.net/onwwLqmx/9/ – Sachin Kadam Jan 05 '16 at 18:50