AdonisDocs

Viewport Animation

You can animate html elements when they are visible by using viewport animate. It require a class and two data settings. See below example

Html

<div class="viewport-animate" data-animation-item=".item" data-animation="zoomIn">
    <div class="item">Content</div>
    <div class="item">Content</div>
    <div class="item">Content</div>
</div>

Data Settings	Description
data-animation-item (required)	Items selector
data-animation (required)	Choose from zoomIn, slideUp, slideRight, slideRightSkew, slideLeftSkew, slideLeftSkew, randomBounch, bounchIn, fadeInSkew, elasticUp and cardDealer
data-offset (optional)	It specify at which position section should be triggered. If value is set to 100% the elements will be triggered as soon as they are visible in the page, if value is set to 50%, it will be triggered when the elements hit the half height the window.

JavaScript (optional)

You can also initiate the viewport animation by custom class. Html components can be animated on viewport using "adonisObj.viewportAnimate" function.

Note: Data settings are still required

Parameters	Description
Selector (required)	jQuery selector. eg. $('.viewport-animate')

<script>
    jQuery(document).ready(function(){
        adonisObj.viewportAnimate( $('.viewport-animate'));
    });
</script>

Carousel

Carousel is run by owl carousel v2.0. Here we made a simple settings for carousel. The settings is simple. add a class "adonis-carousel" and give some data settings.

html

<div class="adonis-carousel" data-auto-width="yes" data-loop="no" data-dots="yes" data-responsive-width="0:80%|400:260px">
    <div class="gutter-30">
        <div class="owl-carousel owl-theme-adonis">
            <div class="item"></item>
            <div class="item"></item>
            <div class="item"></item>
        </div>
    </div>
</div>

Data Settings	Description
data-items (optional)	Type: number eg. data-items="4". Default: 4
data-dots (optional)	Choose from yes or no. Default: no
data-items-responsive (optional)	If set it will take number of itesm from the settings. eg. data-items-responsive="0:1|600:2|900:3"
data-auto-width (optional)	Choose from yes or no. Default: no, eg. data-auto-width="yes"
data-loop (optional)	If set to yes carousel will start over when slides are reached to end. Default: no, eg. data-loop="yes"
data-nav (optional)	If set to yes carousel will generate a next/previous navigation. Default: no, eg. data-nav="no"
data-mousewheel (optional)	If set to yes carousel will change slide on mousewheel. Default: no, eg. data-=""
data-center (optional)	If set to yes carousel will center the active slides. Default: no, eg. data-center="no"
data-stagePadding (optional)	Stage padding set padding/space to the first slide. Default: 0, eg. data-stagePadding="30"

Note: Instead of using margin to slides we used padding using gutters. Use the given structure for carousel. To learn more go the Gutters

To learn more go to owl carousel official documentation

Auto Columns

You can set different width colums for different screen from it's parent/row by using auto columns.

Note: "Auto columns" calculate parent's width instead of screen size. For example you can use this inside a sidebar or half row of your content. It calculate parent's width and set column size accordingly

Example html

<div class="row auto-columns" data-auto-columns-items=".col-auto" data-responsive-width="0:80%|400:260px">
    <div class="col-auto"></item>
    <div class="col-auto"></item>
    <div class="col-auto"></item>
</div> 

Data Settings	Description
data-responsive-width (required)	Set column size for different screens sizes. For example data-responsive-width="0:80%|400:350px" means thi setting has two arguments. 1. First argument is 0:80%. Value before colon ":" refer to parent size and value after ":" refer column size. It means when parent width is over 0 pixel and smaller than next parent size (which is 400 pixels in this case) columns size will be 80% of parents's width. 2. Second argument is 400:350px. It means when parent's size is over 400 pixels, columns size will be 350 pixels. You can add as many sizes as you want seperated by "|" (pipe/vertical bar). You can use "%" or "px" at any size
data-auto-columns-items (optional)	If the option is set, it will take the selector otherwise column size will be applied on children elements

Auto fit Columns

Auto fit columns give you ability to set column size with minimal settings for all screen size. You just need to provide your expected column size and maximum size for column. This function will calculate parent's width and give columns size. The function will always make make columns equal and perfectly fit inside row

Example html

<div class="row auto-fit-columns" data-width="260" data-max-width="300">
    <div class="col-auto"></item>
    <div class="col-auto"></item>
    <div class="col-auto"></item>
</div> 

Data Settings	Description
data-width (required)	Provide your expected width for the column
data-max-width (optional)	Provide maximum width for the columns
data-auto-fit-items (optional)	By using this option you can specify any selector inside the parent element which may not be it's immediate children element. You just have to select jQuery selector for the elements
data-auto-fit-item-parent (optional)	By using this option you can specify a parent div to calculate width instead of the main element

Auto Columns Row

"Auto columns row" is pretty similar to "Auto fit columns". Only one change is it give column class on the parent div instead of each child elements.

Example html

<div class="row auto-cols-row" data-width="260" data-max-width="300">
    <div class="col-auto"></item>
    <div class="col-auto"></item>
    <div class="col-auto"></item>
</div> 

Data Settings	Description
data-width (required)	Provide your expected width for the column
data-max-width (optional)	Provide maximum width for the columns