I'm making a tricky portfolio website and have some issues as the UX/UI design is complex.
Here's the staging: http://staging.dbd.paris/
- Diagonal scroll: there are two divs container that contain each a diagonal feed of images/video
- Infinite scroll loop : the two feeds must be infinite, so I need to make an infinite loop scrolling
- Synchronize scroll: I need to synchronize the scroll of the two divs as they are 'width: 100%' and 'height: 100%' to avoid z-index problem
- Hoverable contents: feed contents must be hoverable, even if z-index of the container is below the other container
- Automatic and manual scroll: the scroll must be automatic if user doesn't interact with the feed, but user can take over and scroll manually, and when he stops the automatic scroll resumes
I have some issues to loop the divs container correctly:
- Scroll Loop: the scrollTop is working but I don't how to have a perfect loop by setting the correct scroll positions, how can I these positions?
- Automatic Scroll: when the scroll reaches div's bottom, the scrollTop doesn't work to continue the auto scroll... a bug I do not understand at all :(
- Hovering contents: as I have to detect mouseover on a content of the lower container (z-index below the upper div), but some contents aren't hoverable on the bottom right side of the screen and I don't understand why
- Loading problem: sometimes when I load the page, the automatic scroll is bugging and scrolling super slow
I use only some jQuery, Vanilla Javascript and CSS for this.
There are a lot of things here and it's quite a challenge for me, so I was wondering if anyone could help me with this mission as I'm a young and lovely front-end developer...
Thank you so much! Have a nice day!