One Page Scroll Waterfall
What is it?
It's simple mixin for SASS to create gradient cross whole page.
One Page Scroll is based on Pete R jQuery script:
What we need?
To use this mixin you need Compass and this script.
How to use it?
It's simple!
You have to set parameters:
- Name of ID element
- Number of steps
- Start color
- Type of waterfall - lighten or darken
- Step color in %
Example for use
@include waterfall("page",4,#040B13,"lighten",10%);
It will generate CSS with ID of element call page-N where, N is number of step start from 1 (in this example from 1 to 4). Initial color is #040B13 (tone of blue), type is lighten (go from dark to light) and color step is 10% .
Examples in your browser
Vulcano
@include waterfall("page", 4, #E82C0C, "darken", step-helper(10));
Forest
@include waterfall("page", 4, #284907, "darken", step-helper(7));
Heaven
@include waterfall("example-heaven-page", 4, #225378, "lighten", 15%);
Icy
@include waterfall("example-icy-page", 4, #8CC3C4, "lighten", 10%);
Orange
@include waterfall("example-orange-page", 4, #EB7F00, "darken", 5%);
Small FAQ
1. Is it possible to set automatically step?
Yes, it is possible! You can use step-helper as last parameter:
@include waterfall("page",4,#040B13,"lighten",step-helper(4));
But it's one problem with this solution - last step is white so you have to change font color or .... check 2 point
2. Is it possible to last color as not white or black?
Yes, it is possible.
You have to two solutions:
First:
You set last parameter lower, for example 10%:
@include waterfall("page",4,#040B13,"lighten",10%);
In first step it will be 0%, second 10%, third 20% and fourth (last) 30%
Second:
You can use step-helper as last parameter with higher value then number of steps:
@include waterfall("page",4,#040B13,"lighten",step-helper(10));