-1

I have seen many websites introduce a nice feature when you're scrolling down the website and suddenly during a certain part of the website scroll, lets say during 40% to 70% of the screen full page an image will appear from either left or right side and sit in the middle of the screen until the user will scroll up/down far enough to which the image will slide outwards.

How could I implement such a feature?

J.Doe
  • 51
  • 6
  • 2
    what have you tried so far? – Dacre Denny Dec 23 '18 at 02:07
  • @DacreDenny Despite having an understanding of HTML/CSS/JS, I have no idea how I could implement such a feature and so far have not done anythin :/. – J.Doe Dec 23 '18 at 02:09
  • 1
    Ok - you'll usually want to provide something to give your question a little more traction with the community, be that some HTML/CSS relevant to your required page structure, or a bit of javascript to show that you've given this some thought. – Dacre Denny Dec 23 '18 at 02:13
  • You could do it, by define an interval (min-height and max-height) which will have to listen the scroll event, and slide in or off the image you want in that interval of heights. Sounds a very interesting challenge for learning. But there must be a library to do that. – Yoarthur Dec 23 '18 at 02:43
  • @Yoarthur I've read a bit about KeyFrames and web-kit for animating the image to appear from left->right. However I cannot think of a way to make this occur during a certain level of scrolling. – J.Doe Dec 23 '18 at 03:11
  • Possible duplicate of [jQuery load more data on scroll](https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll) – Intsab Haider Dec 23 '18 at 06:12

1 Answers1

0

Well, here are some pointers:

  • detect and handle the scroll event: window.addEventListener("scroll", function(event){ ... });

  • get current scroll position: window.scrollY || document.documentElement.scrollTop (you will probably compare it with another value):

    window.addEventListener("scroll", function(event){

    var position = window.scrollY || document.documentElement.scrollTop;

    if(position > ...)
        ...
    ...
});

  • may be you want to use a library, look for "scroll animation (js, library)", there's many

YakovL
  • 7,557
  • 12
  • 62
  • 102