Slide Effect Functions
slide effects methods allow you to switch between hide and show element with sliding effect and it works with two paramaters one the selected element object and the other paramater 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 eather an JS object or Element Attribute for example data-counter=”548″ to set the number to count.
Click Me
//====> 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 .
Images LazyLoading
tornado provide a method to lazyload 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” thats 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 smoth 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 bleow for usage example and options the target option can be called eather from href attribte or data-target attribute;
//====> Smoth Scroll <====//
Tornado.smothScroll({
selector : 'css selector',
duration : 2000, //===> Animation Speed in ms
target : "#targetID", //===> Scroll Target ID
});<a href="#target" data-duration="1500" class="smoth-scroll"></a>Scroll Spy
tornado provide a method to create a scrollspy list when scroll detact if the list item matches the current section in view point of the screen and add html class active and you can call it like this Tornado.scrollSpy({..options..}); and you can eather target a link with href target id or you can add attribute [data-target=”ID”] and you can activate thescroll spy direct by adding scrollspy class name to you spy menu.
//====> Scroll Spy <====//
Tornado.scrollSpy({
selector : '.ui-list > li > a', //====> Spy Agent that identfy the Section
duration : 2000, //====> Scroll Animation Speed in ms
});<ul class="scrollspy">
<li><a href="#target">....</a></li>
<li data-target="#target">...</li>
</ul>Event Date Counter
tornado provide a method to create an Event Date Counter Down that count down time till specific date and you can called like this Tornado.dateCounter({..options..}); and it takes options in two ways one from the TS Options Object Properties and also the HTML Data Attributes and you can activate it direct with the HTML code below without TS init.
- days
- hours
- minuts
- second
//====> Event Date Counter <====//
Tornado.dateCounter({
selector : ".date-counter", //===> Event Selector
date : "11/25/2025 00:00:00", //===> End Date
});<ul class="date-counter" data-date="MM/DD/YY hh:mm:ss">
<li class="days"></li>
<li class="hours"></li>
<li class="minutes"></li>
<li class="seconds"></li>
</ul>