user2979961
user2979961

Reputation: 43

Scrolling effect - fixed, 'blocked' container changes when scrolling

I'd like to achieve effect of the fixed container that changes in the last phase of scrolling. I'm not sure how to call it professionally, so sorry for lack of appropriate words. Actually, how it should be called? :)

I mean sth like that: https://media.giphy.com/media/26gsscmNiRJW039XG/source.gif The effect can be seen live on the UX London page http://2016.uxlondon.com/

I'm not superexperienced with JS, but if you could share any tutorials or examples with similar effects it would be awesome.

Upvotes: 2

Views: 42

Answers (1)

Krystian Borysewicz
Krystian Borysewicz

Reputation: 779

I believe you might use this example for that purpose:

https://codepen.io/Funsella/pen/yLfAG

js: $( window ).ready(function() {

var wHeight = $(window).height();

$('.slide')
  .height(wHeight)
  .scrollie({
    scrollOffset : -50,
    scrollingInView : function(elem) {

      var bgColor = elem.data('background');

      $('body').css('background-color', bgColor);

    }
  });

});

Upvotes: 1

Related Questions