Advanced landing page scroll

Need help
1

Hi guys and gals,

I am trying to create a homepage similar to https://www.pinterest.co.uk/

I would like a home page that allows the user to scroll and automatically feed down to the next part without being stuck between the middle of two visuals/home pages.

Please take a look at the pintrest link and scroll to get where I am coming from (this is hard to put into words)

Any help would be much appreciated :slight_smile:

2

I have never done that but I see what you are talking about. I would imagine they have an event listener to detect when a scroll occurs on the page. At that time they probably use the preventDefault() method so they control the movement on the screen and use an animation to “scroll” from one section to the next. I think it would be pretty easy to do in bubble. You can use javascript on the page and possibly even the built in “animate element” actions or the “scroll to” action to handle the movements. Also create a custom state on the page to track which group or section is currently showing with the correct default value. Maybe add a 1X1 px group or just give two elements that can be used in a Bubble “Element is clicked” workflow ID attributes like “movedup” and “moveddown”. Then in those workflows you can say when Group Movedup is clicked “Scroll To `The Element Above’” and vice versa for when Group Moveddown is clicked.

On the Page is Loaded workflow you can use the Toolbox plugin “Run Javascript” action

let previousScrollPosition = window.scrollY;

window.addEventListener('scroll', function(event) {
  // get current scroll position
  const currentScrollPosition = window.scrollY;
  
  // compare current and previous scroll positions to determine scroll direction
  if (currentScrollPosition > previousScrollPosition) {
    if($('#movedup').length){
         $('#movedup').click()
    }
  } else {
    if($('#moveddown').length){
         $('#moveddown').click()
    }
  }
  
  // update previous scroll position
  previousScrollPosition = currentScrollPosition;
});
3

Thank you for your response. I am having trouble implementing this.

I have created a move down clickable element and said once clicked, scroll to the group below but nothing happens.

Also tried implementing the Java script and changed ‘moveddown’ ‘movedup’ to my element names but still nothing working.

Any ideas as to where I might be going wrong?

4

This topic was automatically closed after 70 days. New replies are no longer allowed.