I am after a similar effect to that found here https://waaark.com/works/ - when you scroll down out of the top section, further scrolling actually replaces what is in view and no further scrolling happens. I don't want as complex animations though a simple slide in from the side is what I am after. that site is WordPress, but my site will not be.
I have tried to at least crack the slide in, but a lot of examples I have looked at and tried do not work, or don't work with multiple images - i.e. slide them all at once and don't wait for the scroll, and only slid in the first time you scroll down - want it to work every time you scroll up and down.
You could use Fullpage.js - There are a few examples for different configurations and it is very easy to setup.
Related
Context
I am creating a site where there are sections stacked in rows, and each row takes up the full viewport.
I don't want the site to be scrollable normally, and would instead like the site to "snap" to the bottom of each section, so that I can then play out the animations taking up the full view port.
Issue
I took the approach of listening to scroll events, and then triggering a nextsection.ScrollIntoView when the user had scrolled far enough to snap to the next view.
This doesn't work well though, as the ScrollIntoView is interupted by user scroll activity, including the latent scrolling of the mouse that hangs around for about 300ms after you've scrolled.
I managed to get it sort of working by using a setTimeout(scrollIntoView(), 400), but this takes too much time and relies on the user not interacting with the site after scrolling.
I made a CodePen (here) showing the type of setup I'm working with, however to see the issue you need to open it as a webpage itself, as CodePen doesn't perform a smooth animation when using ScrollIntoView and just jumps there.
I need a smooth and uninterruptable animation as the site switches from one section to another, but as of yet I've found no working ways to implement this.
Thanks for any answers.
Hi everyone,
I'm working on a side navigation menu for my churches website. You can see the demo here:
http://amightywind.com/sideNav/
However I have a problem. The navigation is supposed to work so when you scroll down the page past it's bottom the css changes to make it anchor and stop moving.
The problem is that the "anchoring" effect doesn't always work smoothly and will only be applied after you scrolled a few pixels past the bottom.
This causes the side bar to "jump" back into it's designed place.
I know this problem is probably caused by asynchronous panning (the browser delays repainting when scrolling to keep a smooth frame rate).
I was going to call this unsolvable, but then I saw firefox's quantum browser page.
If you scroll down halfway, you will see a large pink box on the left that says "Firefox Quantum features".
The text changes positioning when you scroll into it similarly to how my side bar works. However 2 things are different.
1 there is no jump. It is perfectly smooth in every browser I tested.
I figured this could easily be because they are moving a smaller portion of content than I am, but....
2 when I inspect element I notice there is no css class/style change on the object when scrolled into it.
How is this possible? Is there a way to make this effect work without Javascript? Or at least more smoothly than I've done just listening to the window scroll event?
Any help would be much appreciated thank you!
The wording in the title is weird, apologies. It's hard to explain the effect.
I currently have this, it works best on Chrome:
http://mattluckhurst.com/dev/
My client wants each panel to slide up as the user scrolls down, covering the previous panel. I am currently accomplishing this by setting the "current" panel to have position:fixed and top:0 as soon as the page scrolls to it. The panels each have a z-index that corresponds to their vertical position on the page. So ideally:
You scroll down. when the next panel is halfway up the window, the scroll animates to get you all the way there, then that panel is snapped to the top so the next one can come in over it.
It's working pretty well in Chrome, but I am getting a lot of flickering and stuff elsewhere. Also on mobile it's a mess, but we really want a nice smooth swipe up down.
I know fixed elements can get pretty funky on mobile, so I am wondering if that is the problem, or if I should be using something other than just window scrolling for the animation / effect.
I see more complex parallax stuff all the time, so this should be pretty doable, I'm just not sure where to start.
Thanks for any help! Let me know if you need more info.
A few libraries that might help you:
https://github.com/dirkgroenen/jQuery-viewport-checker
https://github.com/janpaepke/ScrollMagic
https://github.com/matthieua/WOW
https://github.com/jlmakes/scrollReveal.js
https://github.com/Prinzhorn/skrollr
I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael
I've seen one or two sites lately that take over the default scrolling in browsers.
When scrolling down, it will animate a scroll down to the next content section (stopping any scroll events during the animation.
When scrolling up, the same thing happens, but to the previous section.
The site I currently have is here: http://cirkut.net/sub/proven/parallax/
I've got the parallax down, but I can't think of an easy way to takeover the scroll and animate this. I'm fairly certain there must be a js/jQuery plugin to do this (I'm currently using stellar.js).
I've been searching for hours to find the example of what I want, but I can't find anything. If I find one, I'll come back and edit this.
Thanks for any leads or help!