SLIDE EFFECT FUNCTIONS

slide effects methods allow you to switch between hide and show element with sliding effect and it works with two parameters one the selected element object and the other parameter is for animation Duration time by Milliseconds you can use Tornado.slideUp(element_object, duration); to hide an element and Tornado.slideDown(element_object, duration); to show an element or you can Tornado.slideToggle(element_object, duration); to Toggling Show/Hide.

//====> Slide Up <====//
var slideDemo = Tornado.getElement('#target');
Tornado.slideUp(slideDemo,200);

//====> Slide Down <====//
var slideDemo = Tornado.getElement('#target');
Tornado.slideDown(slideDemo,200);

//====> Slide Toggle <====//
var slideDemo = Tornado.getElement('#target');
Tornado.slideToggle(slideDemo,200);

ANIMATED NUMBER COUNTER

Animated Number Counter is a Tornado Extended method that let animate a number from 0 to a specific number counting up and u can use it like this Tornado.counter({..options..}) and the options can be either an JS object or Element Attribute for example data-counter=”548″ to set the number to count.

//====> Animated Number Counter <====//
var element = Tornado.getElement('#target');
Tornado.counter({
    element : element, //=====> Targeted Element
    counter:"8654",    //=====> Number to Count to
    duration : 2000,   //=====> Animation Duration in ms
    delay : 0,         //=====> Delay Counter Time in ms
    decimal : 0,       //=====> Decimal Pattren
    symbol : '',       //=====> Symbol Sign after Number
    steps : 10,        //=====> Steps to Aniamte : animate each 10 numbers in one step
});

SET BACKGROUNDS

tornado provide a method to set a dynamic background for elements and it goes like that **Tornado.setBackground(“CSS Selector”, boolean for lazyload)**; after initialize the background method for your elements add a attribute to your html element called [data-src=”background-url”]. and you have to make sure that your element has a width and height for background to show and finally the background setter can be activate by the data-src attribute only without TS init .

Tornado.setBackground(“CSS Selector”, boolean for lazyload);

IMAGES LAZYLOADING

tornado provide a method to lazyloading images you can call this method like this **Tornado.lazyLoading(‘css-selector’)**; and in the image html tag you have to assign the value of src attribute to data-lazyload=”image-url” that’s it and by default the lazyloading can be activate by the data-lazyload attribute only without TS init.

//====> Activate Images Lazyloading <====//
Tornado.lazyLoading('.class');

<img data-lazyload="image-url" alt="" />

STICKY ELEMENT

tornado provide a method to make the element sticky when scroll once the element hits the edge of the screen it adds and removes class name is-sticky and you can call this method like this Tornado.sticky(‘css selector’). and you can activate the sticky element by adding html attribute to your element [data-sticky] and it takes to values one for absolute fixed [data-sticky=”absolute”] and one for nested sticky inside some parent [data-sticky=”inner”]

//====> Activate Sticky Element <====//
Tornado.sticky('.class');

<div class="some-component" data-sticky="absolute">...</div>

SMOTH SCROLL

tornado provide a method to create a smooth scroll to target when click on some Triger and you can called like this **Tornado.smothScroll(..options..)**; and you can also activate options by html data attribute [data-optionName] and you can activate the effect by adding class smoth-scroll to any element you wish as Triger see the code below for usage example and options the target option can be called either from href attribute or data-target attribute;

//====> Smoth Scroll <====//
Tornado.smothScroll({
    selector : 'css selector',
    duration : 2000, //===> Animation Speed in ms
    target : "#targetID", //===> Scroll Target ID
});