scrollToStyle is a versatile tool that lets you manage CSS properties of elements using the page scroll.
You will be able to compel the elements move, change their size, color, opacity, background and many other properties.
Using scrollToStyle plugin, you can create incredible animations to visualize various data, apply effects to images and create stunning 3D graphics.
You can also implement sprite animation.
And the most important thing is that in the animation will be involved the user using mouse scroll.
All parts of this plugin: CSS and javascript codes are licensed according to the license purchased from Envato.
Read more about licensing here: http://codecanyon.net/licenses
- Plugin styles file is in the "css" folder
- Plugin scripts file is in the "js" folder
1. The style file. Used for the decoration of all the elements of a plugin. View details
2. Javascript library jQuery View details
3. The main plugin file View details
Plugin initialization is hidden and does not require the user of the call.
To interact plug-in with the elements need only assign these elements the desired attributes.
I'm using one CSS files scrollToStyle.css (css/scrollToStyle.css) in this plugin. It contains styles which are responsible for the correct plugin work.
To use the plugin you must import two files of javascript:
1. jQuery (js/jquery-X.X.X.min.js)
2. jquery.scrollToStyle.js (js/jquery.scrollToStyle.js)
1. jQuery is a Javascript library that greatly reduces the amount of code that you must write. If you imported this version of jQuery or any other, it is not necessary to import it for the second time
2. The main plugin code.
To add a plug-in to the site you need to walk a only 3 steps:
1. Include all the necessary files to the page of the site.
2. Place all necessary files on your server using ftp
3. Add HTML code
Full code of examples, see in "Examples"
1. This class name "sts-section" is assigned to all the parent elements inside of which will be animation of child elements.
2. The size of this element is equal to the size of the viewport.
3. Without this element, the plugin will not work correctly!
1. This attribute is mandatory.
2. The value of the "data-pause" attribute sets number of scroll pixels, during which the target screen will fixedly to stand still.
This pause is the main period of time for animation playback.
3. This attribute must be specified for an element with the class name "sts-section".
4. This value can not be negative.
5. Valid values:
- only number, e.g. "1000" (This value is perceived as a value in pixels)
- value in pixels, e.g. "1000px" (This is value in pixels)
- value in viewport height units, e.g. "100vh" (This is the percentage of the height of the viewport)
- "auto" (The height is calculated automatically depending on the height of the content, according to the formula: data-pause = Content Height - Window Height)
1. This attribute can be specified for any item that you want to animate.
2. The value of the "data-persent" attribute sets persent range, which determines how much of the time from the previously set time delay, the animation will be played.
It depends on the value of attribute "data-pause"
3. This attribute is always used together with the "data-style" attribute
4. This value can be negative.
1. Attribute "data-style" is an analogue of "style" attribute.
2. In this attribute You need specify an inline styles, that you want to animate.
3. Instead of a single value of the property is necessary to specify two (initial and final state). These values need to be written in square brackets, separated by commas.
4. This attribute is always used together with the "data-persent" attribute
For example, we create transformation for "font-size" property from 30px to 100px:
Any Text
S
T
S
Attribute "data-decimal" specifies the number of digits after the decimal point for animated values.
For example, we create animation for "opacity" property from 0 to 1.
For this we specify the attribute "data-decimal" with a value of 2.
Thus we create an animation from 0.00 to 1.00:
For correctly work of the plugin in a document generated several additional elements. In consequence of that fixed positioning stops working.
To fix this, for the elements with fixed positioning is necessary to add the class name "sts-fixed"
Attention! The class name "sts-fixed" does not fix the elements! And just only corrects them behavior.
Have class name "sts-fixed"
Attribute "data-minwidth" sets the minimum value of the width of the screen at which the plugin works.
If the width of the screen is less than the specified, then the plugin is disabled
Default Value: 0
1. This class name "sts-frame-wrap" is assigned to the parent element of sprite image.
2. Together with this class name, this element must contain a width value.
This width will set the size of the object to be animated.
The width can be specified in any available units.
1. This attribute is assigned to the sprite image or canvas elements
2. Sets the start and end frame of the animation
For example, we create sprite animation from 1 to 50 frames:
or for canvas
1. This attribute is assigned to the sprite image or canvas elements
2. Sets the number of frames horizontally in the sprite
1. This attribute is assigned to the sprite image or canvas elements
2. Sets the number of frames vertically in the sprite
For color control is necessary to use an RGB or RGBA color model.
For example, we create transformation from rgb(12,221,0) color to rgb(126,65,255):
color:rgb([12,126],[221,65],[0,255]); /*From rgb(12,221,0) to rgb(126,65,255)*/
S
T
S
For size control you must use the "font-size" parameter.
For example, we create transformation from 30px to 100px:
font-size:[30,100]px; /*From 30px to 100px*/
S
T
S
For Letter Spacing control you must use the "letter-spacing" parameter.
For example, we create transformation from 0px to 70px:
letter-spacing:[0,70]px; /*From 0px to 70px*/
SPACING
For Text Shadow control you must use the "text-shadow" parameter.
For example, we create transformation for shadow blur from 20px to 0px:
text-shadow: 0 0 [20,0]px #000; /*From 20px to 0px*/
Any Text
For Background Color control is necessary to use an RGB or RGBA color model.
For example, we create transformation from rgb(255,255,0) color to rgb(255,0,0):
background-color:rgb(255,[255,0],0); /*From rgb(255,255,0) to rgb(255,0,0)*/
For Linear Gradient control is necessary to use an RGB or RGBA color model.
Manage is possible not only color, but also the direction of the angle
For example, we create transformation from 0 to 360 deg :
/*From 0 to 360 deg*/
background: linear-gradient([0,360]deg, rgba(135,224,253,1) 0%, rgba(5,171,224,1) 100%);
For Radial Gradient control is necessary to use an RGB or RGBA color model.
Manage is possible not only color, but also the control points
For example, we create transformation for gradient offset from 0 to 100 % :
/*From 0 to 100 %*/
background: radial-gradient(ellipse at center, rgb(1365,244,253) 0%,rgb(5,171,224) [0,100]%);
For Complex Gradient control is necessary to use an RGB or RGBA color model.
Manage is possible not only color, but also the control points and angle direction
For example, we create transformation for gradient offset two colors:
/*From 10 to 60 %*/
background: linear-gradient(45deg, rgba(157,213,58,1) 0%,rgba(161,213,79,1) [10,60]%, rgba(128,194,23,1) [40,60]%, rgba(124,188,10,1) 100%);
For Background Size control is necessary to use "background-size" parameter.
For example, we create transformation for background along the X axis from 100% to 200%:
/*From 100% to 200%*/
background-size:[100,200]% auto;
For Background Position control is necessary to use "background-position" parameter.
For example, we create transformation for background position along the X axis from 0% to 100%:
/*From 0% to 100%*/
background-position:[0, 100]% 50%;
Horizontal
Vertical
For Blur control is necessary to use "filter" parameter.
For example, we create transformation for Blur effect from 50px to 0px:
/*From 50px to 0px*/
filter: blur([50,0]px);
For Brightness control is necessary to use "filter" parameter.
To work with fractional values, use the "data-decimal" attribute with a value of 1 or 2.
For example, we create transformation for Brightness effect from 0.1 to 3:
/*from 0.1 to 3*/
filter: brightness([0.1,3]);
For Contrast control is necessary to use "filter" parameter.
For example, we create transformation for Contrast effect from 50% to 200%:
/*from 50% to 200%*/
filter: contrast([50,200]%);
For Grayscale control is necessary to use "filter" parameter.
To work with fractional values, use the "data-decimal" attribute with a value of 1 or 2.
For example, we create transformation for Contrast effect from 1 to 0:
/*from 1 to 0*/
filter: grayscale([1,0]);
For Sepia control is necessary to use "filter" parameter.
To work with fractional values, use the "data-decimal" attribute with a value of 1 or 2.
For example, we create transformation for Contrast effect from 0 to 1:
/*from 0 to 1*/
filter: sepia([0,1]);
For Saturate control is necessary to use "filter" parameter.
To work with fractional values, use the "data-decimal" attribute with a value of 1 or 2.
For example, we create transformation for Saturate effect from 0 to 8:
/*from 0 to 8*/
filter: saturate([0,8]);
For Invert control is necessary to use "filter" parameter.
To work with fractional values, use the "data-decimal" attribute with a value of 1 or 2.
For example, we create transformation for Invert effect from 0 to 1:
/*from 0 to 1*/
filter: invert([0,1]);
For Scale control is necessary to use "transform" parameter.
For example, we create transformation for Scale from 0 to 1.5:
/*from 0 to 1.5*/
transform:scale([0,1.5]);
/*or*/
transform:scaleX([0,1.5]) scaleY([0,1.5]);
/*or*/
transform:scale3d([0,1.5], [0,1.5], 0);
For Rotate control is necessary to use "transform" parameter.
For example, we create transformation for Rotate along the X axis from 0deg to 360deg:
/*from 0deg to 360deg*/
transform:rotateX([0,360]deg);
/*or*/
transform:rotate3d(1,0,0,[0,360]deg)
For Translate control is necessary to use "transform" parameter.
For example, we create transformation for Translate along the X axis from 0vw to 50vw (vw - viewport width):
/*from 0vw to 50vw*/
transform:translateX([0,50]vw)
/*or*/
transform:translate([0,50]vw, 0)
For Width control is necessary to use "width" parameter.
For example, we create transformation for Width from 0% to 100%:
/*from 0% to 100%*/
width:[0,100]%;
For Height control is necessary to use "height" parameter.
For example, we create transformation for Height from 0% to 100%:
/*from 0% to 100%*/
height:[0,100]%
For Opacity control is necessary to use "opacity" parameter.
To work with fractional values, use the "data-decimal" attribute with a value of 1 or 2.
For example, we create transformation for Opacity from 0 to 1:
/*from 0 to 1*/
opacity:[0,1];
For Opacity control is necessary to use "border-radius" parameter.
For example, we create transformation for the upper left corner from 0% to 50%:
/*from 0% to 50%*/
border-radius:[0,50]% 0 0 0;
/*or*/
border-top-left-radius:[0,50]%
For Position control is necessary to use "left", "right, "top" or "bottom" parameter.
The target must have absolute, relative or fixed position
For example, we create transformation for Left position from 50% to 75%:
/*from 50% to 75%*/
left:[50,75]%;
For Counter control you need to specify the range of values without the parameter name.
Also, very important, for target element set the class name: "sts_counter"
For example, we create counter from $0 to $1000:
/*from $0 to $1000*/
$[0,1000]
It is a ready set of elements, which together represent a parallelepiped.
With it is possible to display a comparison of several values
The maximum height of the bar chart (100%) by default is equal to 30% of viewport height.
For this height value is responsible an element with class name "sts-bar-container-size"
Sizes of all the faces are set in relative units "em",
therefore, the thickness of the column is set by using the "font-size" parameter for an element with the class name "sts-bar-container"
The depth of perspectives by default is equal to 1000px and defined by class name "sts-perspective-1000"
The required column heights value must be specified for element with the class name "sts-bar" as height value.
For example, we create growth animation of Bar Chart from 0% to 100%:
/*from 0% to 100%*/
height:[0,1000]%
To rotate the column around its axis, you need to add an additional transformation for an element with class name "sts-bar"
For example, we create rotate animation of Bar Chart from 50deg to 80deg :
/*from 50deg to 80deg*/
transform: rotateY([50,80]deg);
Label of Bar Chart may be disposed on four sides from the column.
For his position is responsible such class names:
- "sts-bar-label-left"
- "sts-bar-label-right"
- "sts-bar-label-top"
- "sts-bar-label-bottom"
This class must be assigned to an element with the class name "sts-bar-label".
If the block with the label should change his height, then this animation is specified for an element with the class name "sts-bar-label"
height:[0,90]%
If the block with the label must include changing the numerical value, then this animation is specified for an element with the class name "sts-counter"
[0,1000]
For the color of all the faces of the Bar Chart is responsible an element with the class name "sts-bar_side"
It is a ready set of elements, which together represent a cube.
With it is possible to display any information unusual way
Sizes of all the faces are set in relative units "em",
therefore, the size of cube is set by using the "font-size" parameter for an element with the class name "sts-cube"
The depth of perspectives by default is equal to 1000px and defined by class name "sts-perspective-1000"
To rotate the cube around its axis, you need to add an additional transformation for an element with class name "sts-cube"
For example, we create rotate animation of Cube along the Y axis from 0deg to 360deg :
/*from 0deg to 360deg*/
transform: rotateY([0,-360]deg)
For the color of all the faces of the Cube is responsible an element with the class name "sts-cube_side"
The text is styled using the class "sts-cube_text"
front
back
right
left
top
bottom
Each time, when the target screen is stopped, it is assigned a class name "sts-section-paused".
Thanks to this you have the possibility to stylize the the look of the target screen when stopping.
You can use the classes:
- "sts-section-paused" - Target screen is in a fixed position
- "sts-section-under" - Target screen is under the viewport
- "sts-section-over" - Target screen is over the viewport
These class names are automatically assigned to the element with the class name "sts-section"
Also, using the helper classes, you can alter the way the appearance and disappearance of objects in the target screen
Using the helper classes, you can alter the way the appearance and disappearance of objects in the target screen
You can use the classes:
- "sts-item-before" - Element before start animation
- "sts-item-after" - Element after animation
- "sts-item-active" - Element during animation
These class names are automatically assigned to the element with "data-style" attribute.
In within a single document, you can create multiple independent scrollings of content.
Scrolling of sections can be converted into switching of sections like slideshow.
Vertical 1
Vertical 2
Horizontal 1
Horizontal 2
Scale 1
Scale 2
Possible to realize both vertically and horizontal scrolling.
In this experiment, scrolling affects only half of the screen
You can create a scrolling of multiple elements with different speeds.
Progress of Scroll can be displayed by changing the width or height of any element.