PREV
NEXT
\
\IN GENERAL
Made for copy and paste.
All the code is inside slider-section. If you just paste the section above this named "slider-section" into your project everything you need is inside there.
Is more or less non styled, you can do what you want.
Only limitation listed below!
--
Important stuffs in the structure:
1) SLIDER SECTION is the wrapper. can be modified as long as the element inside stay there.
2) WRAP is the element you style to size the slider. Do not change the class or overflow. Rest is up to you! Make it full screen, half the size or whatever.
3) Inside wrap you find IMAGE HOLDER. Is an embed where you put images on, as well as the displacement image if you want to use the displacement based transition. This also contain the code for the canvas.
4) SLIDER CODE HOLDER is the ones that has the code you need, currently is served via githack. Here you find also the slider call where you can set the parameters.
5) On styling. Buttons need to be above the canvas, as it takes the whole screen and you want your buttons clickable. The code that sets the canvas you can find in image-holder embed.
6) Do not remove the buttons. If you don't want them make opacity 0 or display none.
--
OVERVIEW
*** Is based on Martin Laxenaire Curtains.js.
*** The guy is amazing, the library is killer.
*** IMPORTANT. Star him on github.
--
PARAMS USAGE
Be mindful. Either true or false or numbers. No uppercase. No commas.
If it's an option one no numbers that are not option.
Either one of those or you can remove the line and go with defaults.
* Will build gate for random numbers and wrong values.
-->
AUTOPLAY:
(true / false) (default is false)
Self explanatory? Still.
There's a timer in there that triggers the transition function. Doesn't inhibit the option to slide with arrows.
Theres a safety function that stops the timer when the user switch to another tab.
* Future version will reset timer when clicking on an arrow, for now timer keeps running.
-->
AUTOPLAYTIMER:
(seconds, as NUMBER, can take decimals using dots) ( default is 1s )
Timer for autoplaying trigger.
The slider duration gets added.
* Note that using decimals might f*ck up complex easings.
Might require a bit of fiddling even when not using decimals.
-->
DURATION:
(seconds, as NUMBER, can take decimals using dots) ( default is 1s )
Transition duration.
* same as autoplaytimer, but less.
-->
EASETYPE
(option, as NUMBER, no decimals (obviously?)) (from 0 to 12) (default is 0 which is LINEAR)
Easing type. Wanted to have less dependancies as possible, so I built them in.
Poor choice, now I miss gsap. This is also most likely the reason why easings destroy timing functions.
Lists of easings with reference below. I think I put in all standard ones.
* Gsap might appear in future versions.Implementation inspired by https://gist.github.com/gre/1650294.
Inspired by means that I copied and pasted them, so go star all his repo if you're using this.
-->
TYPE
(option, as NUMBER) ( 0 OR 1 ) ( default is 0, displacement map based )
There's different type of transition possible. For now actually only 2.
* Geometry based onw will be implemented, thinking of possible other ones. Feel free to suggest.!) Type 0 : transition based on a displacement map.
Loved by everyone. Shaders are based on curtainsjs example.
Displacement map can be change in the html embed. Boring one is included, and a few others.
It's the one with data-sampler attribute.
* There will also be the option for direction, alternate if going backwards and so on. Now is top to bottom.
* If you understand code a bit you can change the shader by uncommenting two lines, as right to left is already (kinda) there.!) Type 1 : pixel distance function.
Stranger. If used with the right images super interesting. Try with text + solid background or vector graphic.
Or with well done minimalistic photography.
*/
/****************
BUILT IN TRANSITIONS
0: linear;
1: easeInQuad;
2: easeOutQuad;
3: easeInOutQuad;
4: easeInCubic;
5: easeOutCubic;
6: easeInOutCubic;
7: easeInQuart;
8: easeOutQuart;
9: easeInOutQuart;
10: easeInQuint;
11: easeOutQuint;
12: easeInOutQuint;
*/
Images from unsplash.