Scrollport.js - new scrolling animation

From the moment of the invention, the animation of the scroll to the place of the page was almost not subjected to any modifications, was not decorated in any way. Yes, no one needs it seems, and so it works. You tell where to scroll and how much you need to get to. Everything.

I decided to look at the animation scroll from a different angle. Not because now something is wrong with him, but because it is possible and more interesting. As a result of some observations and bursts of fantasy, I managed to come up with 3 ways for more interesting animation. As a result, I wrapped everything in the “Scrollport.js” plugin with 3 new and 1 classic modes. Watch the demo and go under the cat.

Classic scrolling animation fits into one line:

$(“ html, body “).animate( { scrollTop: $( '#my_target' ).offset().top }, 600 ); 

This line weighs 78 bytes. However, there is a very popular jQuery.scrollTo plugin at the time of this writing, it has 2132 stars, and it is used on more than 30,000 sites! This star weighs 30 times more than the string that does the same. Of course, this plugin has a lot of lotions, but for rare cases.
')
I do not consider it appropriate to use a plugin if one line does the same. “Scrollport.js”, although fatter than the above-mentioned plug-in, but it does things that don't fit in one line. And as a bonus, added a helper function to create links that will initiate scrolling animation.

How to use

Connect the JS file with the plugin, write:

 //       id «my_target». $.scrollport( '#my_target' ); //      id «my_link»,        id «my_target». $( '#my_link' ).scrollport_link( '#my_target' ); //      ,        «roll». $.scrollport( '#my_target', { mode: 'roll', speed: 1500 } ); 

You can transfer various settings to the plugin, access the API, and there are many ways to call animation. For details, see the readme repository on the githaba .

4 types of modes

In the settings for the plugin, you can transfer one of 4 modes: usual, roll, hard or soft. Consider each in order.

Usual

Classic. The plugin needs to know where to move the scroll, and for how long you need to be in place. You have seen this a hundred times, and I cannot give any unique comments on this mode.

Although there is one thing that is annoying. If it is said that you need to be in place in one second, then everything does not look bad at large and medium distances. But if we trigger an animation 100 pixels from the target, in 1 second you can get tired of the animation. The second mode allows this cavil.

Roll

The same classic view from the side. You need to know where to move and at what speed. It looks a little nicer and more intelligent or something.

The default speed is 2500 pixels per second. If you drive 100 pixels, this speed may turn out to be rather large and you will get the impression that we were too sharply in place. To avoid this trouble, you can specify a minimum time, the default is 300 milliseconds. That is, faster than during this time you will not find yourself at the goal.

Long distance can be overcome for too long, for this parameter is entered limiting the maximum waiting time.

An occasional visitor is unlikely to feel the difference between the “roll” and “usual” modes, but as a connoisseur of beauty in the dynamics, the “roll” mode attracts me more.

Hard

Sharp movement to a place for 5 pixels to the goal, then scrolling smoothly sunk to a place. I stole the idea of ​​this mode from VKontakte. You can go to your page, slightly lower the news feed and click on the “up” bar on the left side of the screen, then again there.

Sometimes the gentle modes “roll” and “usual” want to be replaced with something more rough and primitive. But not so much barbaric, that would be quite like when going through an anchor link.

Soft

The scroll extends towards the target, passes 200 pixels, at this time the entire screen is smoothly tightened with a white layer. Then we are instantly moved to a point 200 before the goal, but we do not see a sharp jump, because the white layer has become completely not transparent. Smoothly we reach the place, while the white layer disappears. Perhaps the optimal ratio of speed and smoothness, and this effect looks interesting and unusual.

Conclusion

Some will find this plugin attractive, new and interesting. The rest I suggest to take this article as a fresh look at familiar things. I'm interested in hearing your opinion about plugin modes. If someone offers a couple more modes, I will be very happy.

I like what's happening with the web. From uncouth tables sites turn into works of art. I want to be involved in this, I want to make a contribution. Starting from the small, I believe that one day I will do something worthwhile, important. Good luck in inventions and experiments, the fate of the web is in our hands.