Smooth scrolling to js element. Scrollissimo – plugin for smooth scrolling animation

IN Lately Animations that play as you scroll the page are becoming increasingly popular. However, I noticed that the vast majority of browsers are not designed for such animations. Scrolling of pages with the mouse does not occur smoothly (as in Firefox), but in steps. As a result, scrolling animations on pages also play jerkily. In my opinion, the problem here is not with the browsers at all, but with the plugins that are used to create these animations. Because they are the ones who allow sudden jumps. I believe that for any animation there should be some maximum playback speed at which the animation will be smooth and the user will be able to understand what happened on the page. If you agree with me, then move smoothly and without jerking under the cat.

In this article we will talk about a plugin for creating scroll-controlled animations, which I called Scrollissimo. Its closest analogue is the ScrollMagic plugin. From common features they have their purpose and the fact that Greensock was chosen as the animation engine. If for some reason you are not yet familiar with it, then perhaps to fully understand everything that is happening you should read articles about Greensock that have already been published on Habré. For example this one.

In addition to similarities, these plugins also have differences. But I would like to especially highlight the main thing - smooth animation. So that this does not sound unfounded, here is proof for you. Home page ScrollMagic also confirms my words.

How to use it? Connect In order to start using Scrollissimo you need to do two things. First, connect Greensock. Can only be connected minimally required libraries(TweenLite, TimelineLite and CSS):

or, connect one library containing all of the above:

And secondly, we connect Scrollissimo itself. The library is available from the repository. And for bower users it is also possible to install with the command

Bower install scrollissimo
Downloaded, now connect:

You can optionally (but not necessarily) include jQuery for own convenience. Later in the article I will write code using it for greater readability.

I have provided for the possibility of triggering Scrollissimo not only on scrolling the entire page, but also on any other event, but in the vast majority of situations you need to subscribe to the page scroll event:

$(window).scroll(function())( Scrollissimo.knock(); ));
Now with every attack scroll events Scrollissimo will calculate the current animation progress and play it.

NOTE: If you don't need the plugin to count the page scroll itself, you can pass your scrollTop property value to the knock() method. So, for example, Scrollissimo.knock(1000) will tell the plugin that you have scrolled the page 1000 pixels .

NOTE: To support touch devices, there is a touch adapter scrollissimo.touch.js, which combats page freezing while scrolling.

That's it, now you can animate directly! Scrollissimo can animate twins (single animations) and timelines (queue of single animations). Let's start with the twins.

The simplest animation Let's say we have a beautiful red div called Divy. He really wants to grow, but so far he is only 50 pixels wide and high.

#Divy( position: fixed; top: 0; left: 0; height: 50px; width: 50px; background: red; )
Let's make it so that already after 1000 pixels from the beginning of the page it becomes 300 pixels wide. To do this, we will first create the corresponding tween, as if we were doing a regular animation using Greensock:

Var divyTween = new TweenLite($("#Divy"), 1000, ( width: 300 ));
NOTE: As you noticed, the only difference from standard Greensock animation is that we specify the duration of the animation not in seconds, but in pixels (in our case, 1000).

Great! All that remains is to give this twin to be devoured by Scrollissimo:

Scrollissimo.add(divyTween, 0, 6);
Now let's slow down and look at this line. The first argument is the same tween that we created. The second argument is from what position to start the animation. In our case, this is the beginning of the page (0 pixels). The third argument remains. This is where we get to main feature, which distinguishes Scrollissimo from regular plugins. The third argument is the maximum animation playback speed. This speed is measured in abstract dimensionless units and selected “by eye”. I’ll immediately answer the question “What happens if you don’t specify the third parameter?” If you don't specify maximum speed, then it won’t exist. This animation will be played in the same way as it would be played by regular plugins.

Timelines So, Divy has grown in width. How can we help him grow in height? Chains of animations or, in Greensock terms, timelines will help us here. If you've used them before to build animations, then there's nothing new for you. In the same way as we did with the twin above, we do it with the timeline. jsFiddle

Var divyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 ( width: 300 )); divyTimeline.to($("#Divy"), 1000, ( height: 300 )); Scrollissimo.add(divyTimeline, 0, 6);

Conclusion That's all there is to it successful creation scrolling animations using Scrollissimo. This is where I’ll probably end the article. In conclusion, I will say that the plugin is under active development, it has room to grow and improve. Therefore, I will be glad to receive any questions, advice and feature requests.

Layout, animate!

As you probably already guessed, the article will not talk about tulips and roses, or how to grow an apple tree from a chamomile (so this is not the place for young Michurinians :-), but we will talk about changing the color of elements of a web page, about smooth flow of one color into another, i.e. Let's talk about fade effects.

Example

Let's start with an example: hover over a picture and then move the cursor away.

If you are not interested in theoretical details, but need a ready-made solution, then this is for you.

Formulation of the problem

Two colors are given: the start color and the end color.

It is necessary to find intermediate colors, applying which one by one to an element on the page, we will get smooth transition from starting color to ending color. You should also find out how many of these intermediate colors there should be and after what time one intermediate color should change to another.

Looking deeper into the issue

Let's take, for example, white as the initial color, and orange-red as the final color.

#FFFFFF

?

...n...

?

#FF4500

Now we need to find intermediate colors. Fine. But how?! How should we approach this issue? To do this, let’s remember (or find out :-) how color is formed on the monitor screen. Any color on a monitor screen is formed from three primary colors: red (Red), green (Green) and blue (Blue), by mixing them (i.e. the RGB color model is used). And colors on a web page are indicated either by numerical values ​​in the same RGB system, or by literals of named colors (for example, White for white, Red for red, etc., but not all colors have names), which, anyway, indicate numerical values. But we will not consider specifying a color by name, because names were invented for the convenience of human memorization, but in our case they will create inconvenience during calculations, because will still require translation into numerical form. You can set the numerical value of a color in two ways: hexadecimal and functional.

• In hexadecimal notation, the format for recording an RGB value is a "#" character immediately followed by three or six hexadecimal characters. A three-digit RGB value (#rgb) is converted to a six-digit sequence (#rrggbb) by duplicating the digits rather than adding zeros. For example, #fb0 expands to #ffbb00. Therefore, the color white (#ffffff) can be specified in a shorter form (#fff).
• In functional representation, the format for writing an RGB value is the string "rgb(", immediately followed by a list of three comma-separated real (or integer, or percentage) values, immediately followed by a parenthesis ")". The integer value 255 is equivalent to the percentage value 100% and hexadecimal values F or FF, so rgb(255,255,255) = rgb(100%,100%,100%) = #FFF.

Thus, a color given in numerical form gives us the values ​​of its component colors, which ultimately gives us the opportunity, by changing each of the primary colors of the initial color, to arrive at the second, final color. If we consider our specific example, then we have the following (values ​​in the decimal system are indicated in parentheses):

#FFFFFF	=	FF (255)	FF (255)	FF (255)
		0	– CE (206)	– FF (255)
#FF4500	=	FF (255)	45 (49)	0

Those. in order to from white to get orange-red, you need to leave the red component of the white color unchanged (change the value to zero), subtract 206 from the green, and subtract 255 from the blue. Let's call these numbers (ΔR = 0, ΔG = -206, ΔB = -255) increments.

Now, to get, for example, two intermediate colors + the final color (3 in total), you need to change the initial values ​​of the RGB triplet (#FFFFFF) not by the full value of the increments ΔR, ΔG, ΔB, but first by 1/3, then by 2 /3 and finally by 3/3 (3/3 = 1, this is the full increment value to obtain the final color, which we, in principle, already know).

#FFFFFF	=	FF (255)	FF (255)	FF (255)
#FFBAAA	=	255 -0	255 - 206*1/3 = 186 (BA)	255 - 255*1/3 = 170 (AA)
#FF7655	=	255 - 0	255 - 206*2/3 = 118 (76)	255 - 255*2/3 = 85 (55)
#FF4500	=	FF (255)	45 (49)	0

So, we have learned to calculate intermediate colors. It remains to clarify one more nuance, in order for a person to notice intermediate colors, it is necessary to make time delays between changing colors, otherwise the changes will happen so quickly that the user simply will not notice the intermediate colors.

Now we have a clear overall picture and we can move on to writing code. There are starting and ending colors, we can calculate n intermediate colors (where n is chosen arbitrarily), and there is a delay value t (where t is chosen arbitrarily). Thus, the algorithm is as follows: assign the first intermediate color to the element on the web page, make a delay by the amount t, assign the second intermediate color to the element, make a delay, ..., assign the nth intermediate color to the element, which is the final color.

Implementation

As an example, let's make a button whose background changes from white to orange-red when clicked.

Let's go... The first wrong thought that may come to mind is to calculate intermediate colors in a loop, making a delay after each iteration.

Function fade() ( for (var i = 1; i