What I am trying to achieve is that when the user scrolls the page using the mouse-wheel (as there is no scrollbar), the page slides down with an animation to the next section of the page and while the animation is being played, mouse-wheel won’t work (to tidy things up, which is a good act).
The behavior I want can be seen in http://google.com/inbox or http://www.luxaqua-design.com/.
The thing I liked in Google’s inbox website is that it has the same effects with touch screen devices and their scrolling mechanisms.
I only need some pointers about the events that happen in this kind of scrolling and how I can manage them (specially, I am looking to achieve the same functionality with touch devices).
That is a parallax website, and actually there are many ways to accomplish that. But I would like to suggest to you the FullPage.JS by Alvaro Trigo, you can also try Skrollr by Prinzhorn
. Those are libraries that you can use to easily finish your goal.
By the way, you can also manually do that by creating a CSS that will make the images fit in every slide, then add JS so whenever you scroll it will go to another slide, but I tell you it is better to use libraries. :D
It is called Parallax scroll effect .. Here is a tutorial on how to make it!
https://www.youtube.com/watch?v=D75WTf_Y738
Related
I've been looking for a library or a solution to implement Tumblr's scroll effect.
I previously worked with libraries like fullpage.js but the thing is Tumbler effect is a bit different.
To be more specified, when you scroll up/down sections cover each other, but in libraries like fullpage.js sections push each other to up and down.
I'll appreciate if you guys have any solution or library to implement this effect.
Update 2018:
There's an article about it here. Which makes use of fullPage.js. instead.
You are looking for pagePiling.js, the small brother of fullPage.js.
You can even use fullPage.js to do exactly the same as long as you use the parallax extension with the offset value set to 100, and then place all your content in the background element. So it will move at the same time that the background.
The advantage of using fullPage.js is that you'll have plenty of more options, methods and callbacks than when using pagePiling.js, which hasn't been updated in a long time.
I've been looking everywhere and I cannot find an answer for this specific need.
I want to create a page with this effect - I want the page to scroll down automatically and smoothly to a certain section on the page as soon as the user begins to scroll their mouse. The problem with using the plugin linked above is that I already have my page designed the way I want, I just want to implement this scrolling effect. I am by no means a javascript expert - I deal mainly with the layout aspects of web. But if someone could show me how I could use javascript to automatically drop to a certain section on the page when the user begins to scroll, I would GREATLY appreciate it. Thank you!
Try Using Nice Scroll
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
$("#thisdiv").niceScroll({
mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
});
As you can see right here: https://www.sequoiacap.com/
I'm trying to mimic its scrolling behavior right here, and its implementation really baffles me. Is it scrolling to another section? Or is it scrolling the background? Is there a name for this specific website style?
I have a one page parallax theme that I would like to auto scroll for user, so that each scroll gives the user a new fullscreen section. I would like to know how many plugins I would need to use. Some basic examples or directions for research would be greatly appreciated.
Thank you.
Here's 2 possible ways out of many, for how you could implement this:
jump.js which is a dependency-free library (meaning it does not require jQuery or similar)
fullPage which is a full page slider plugin for jQuery. This might be more of what you want, because it does not introduce a scrollbar.
So I saw some homepages with a cool script making the scroll action as a autoscroll to the next div.
Here's what I mean in a better way: You start of in the hero part, and then when you use scroll to scroll down on the page, the script forces the homepage to lock itself to the next div in lets say hero 2 with a smooth animation, is there some kind of plugin for this or can anyone be kind enough to post a script that does that?
Thank you.
You could try ScrollMagic.js or Skrollr.js. ScrollMagic's great because you can use Greensock to animate your elements. Check out this scrollMagic tutorial
As Agent Zebra's answer mentioned there are lots of JavaScript library out there to do this sort of thing.
In the future there will be another way of doing it without JavaScript, using CSS scroll snap points. Firefox added support in version 39, but support in other browsers is lacking right now.
I'm building a single-page website with a few sections that each fill out the user's window; I've got that working.
What I want to do is:
When the user scrolls up or down he/she would ease-up or down (accordingly) to the section before or after. My sections each have a anchor at the top of them.
Here is an example of what I'm trying to achieve. Each article fills the page. Once you scroll you jump to the next article.
http://www.made-my-day.com/
I think you could get the job done using this plugin: https://github.com/alvarotrigo/fullPage.js.
Also, it seems to be actively updated. The last commit to the repo was made 3 days ago.
Cheers!
You should take a look at scrollorama and superscrollorama.
They are lots of cool effects that you can use for scrolling, including the one just like the site you provided.
--UPDATE--
After some talking with OP, I realized that both libraries don't do what he wants.
So, my new suggestion is reveal-js, a js presentation library.
You don't really want to do this on an onscroll. Consider that onscroll isn't really anything except an event which says "the view of the page is moving".
That doesn't mean that they're using the mousewheel to do it.
On a phone, your plan can make sense: then it would be like making a drag movement equal to a swipe movement. Great.
My preferred method for scrolling is to click the middle-mouse button, and then position the mouse just below the anchor point, so that I can read each block of text as it scrolls past the screen.
I don't even need a hand on the mouse, for long blocks.
So in my case, onscroll will fire at something like 60 events/sec, and if you auto-jump the articles, I'm going to be teleporting through your entire site's content.
Other people still drag the actual scrollbar.
Listening to the mousewheel and keys (up/down, pg-up/pg-down), rather than just any method of moving the page, is safer... ...but are you sure all articles are going to be small enough so that all content fits in all browser windows, even at stupid-small resolutions (iPhone 3)?
Because if people need to scroll to read content, then all of a sudden you're dealing with a much, much more complex solution:
You would be required to listen to regular (or customized) scroll requests of any kind, to get to the bottom of the current content... ...and then you'd have to provide some sort of visual queue to the user that they are now at the very bottom of the content, and continuing to use a trigger method (swipe/drag/keys/mwheel) would switch articles.
The first two are fine... ...make it feel spring-loaded, like smartphones do.
...what about the other two, where people might expect to hit them multiple times in a second, to get where they're going?