Geek Answers Handbook

Image overlaps with pause - skrollr

Here you can see example (a close approach to what I want to achieve, but not complete)

This is an explanation of what I'm trying to achieve:

  • See image
  • Scroll down, but still see the image for a few seconds (maybe 2 seconds).
  • The user then sees an image that was below the overlap of the static image.
  • Again: see image> Scroll down and still see the image and after 2 seconds> Then the image that was lower overlaps the previous one.
  • Repeat etc.

I read the documentation, but I don’t understand it much. Any help?

This is the markup:

<div data-0="transform:translate(0,0%);" data-1200p="transform:translate(0,-100%);"> <div class="img-box"> <img class="fittobox" src="images/1.jpg" alt="1" width="1280" height="800"> </div> </div> <div data-0="transform:translate(0,100%);" data-100p="transform:translate(0,0%)" data-_box-100p="" data-_box-200p="transform:translate(0,-100%)"> <div class="img-box"> <img class="fittobox" src="images/1.jpg" alt="1" width="1280" height="800"> </div> </div> <div data-_box-100p="transform:translate(0,100%);" data-_box-200p="transform:translate(0,0%);"> <div class="img-box"> <img class="fittobox" src="images/1.jpg" alt="1" width="1280" height="800"> </div> </div>

I am using the skrollr plugin

+6
source share
3 answers

Sets the top offset using window.scrollTo(0, top) in dektop to update the internal state if the loop scrolls.

 skrollr.init({ easing: { //your code }, render: function(data) { //Loop back to top if(data.curTop === data.maxTop) { this.setScrollTop(0, true); //will return first image when you reached to last } } });

skrollr will move to a new position without any transition. By default, the global parameter smoothScrolling is used.

+2
source

Isn't your second slide behaving as you would like?

Look at a simple scroll scroll , this may help you better understand Skrollr.

Also see Skrollr.js infographics , this is a more visual way to see how various data attributes affect time and animation.

+1
source

This is a working demo:

http://dinhquangtrung.net/demo/skrollr/Pausing.htm

 <div data-100p="transform:translate(0,0%);" class="skrollable skrollable-between" style="-webkit-transform: translate(0px, 0%);"> <div class="img-box" style="position: absolute; overflow: hidden;"> <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;"> </div> </div> <div data-0="transform:translate(0,100%);" data-100p="transform:translate(0,100%);" data-200p="transform:translate(0,0%)" class="skrollable skrollable-between" style="-webkit-transform: translate(0px, 100%);"> <div class="img-box" style="position: absolute; overflow: hidden;"> <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;"> </div> </div> <div data-0="transform:translate(0,100%);" data-300p="transform:translate(0,100%);" data-400p="transform:translate(0,0%)" class="skrollable skrollable-before" style="-webkit-transform: translate(0px, 100%);"> <div class="img-box" style="position: absolute; overflow: hidden;"> <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;"> </div> </div> <div data-0="transform:translate(0,100%);" data-500p="transform:translate(0,100%);" data-600p="transform:translate(0,0%)" class="skrollable skrollable-before" style="-webkit-transform: translate(0px, 100%);"> <div class="img-box" style="position: absolute; overflow: hidden;"> <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;"> </div> </div>

I can explain this if you do not want to read the documentation:

 <div data-0="transform:translate(0,100%);" // when top = 0, translate the image position by 100% down. data-100p="transform:translate(0,100%);" // when top = 100, still in the position translated 100% down. data-200p="transform:translate(0,0%)" // when top = 200, move position to origin position.

The same with other images, only the first image is special, because it does not need to move anywhere.

+1
source

More articles:


All Articles