The loader

I'm sure that you have seen it

basic usage

                    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
    </head>
    <body class="animated">
        <section id="page">
            <!-- PUT YOUR CONTENT HERE -->
        </section>

    <!-- page loader -->
    <div class="row full-page items-center justify-center loader-container"><div id="loader"></div></div>
    <!-- scripts -->
    <script type="text/javascript" src="js/iroom.min.js"></script>
    <script type="text/javascript">
        new Iroom.Loader();
    </script>
    </body>
    </html>
                    
                

the duration option

the 1st way : javascript option

                    
    <script type="text/javascript">
        new Iroom.Loader({duration: 5000});
    </script>
                    
                

the 2nd way : data-duration attribute (that overrides the first)

                    
    <!-- page loader -->
    <div class="row full-page items-center justify-center loader-container">
        <div id="loader" data-duration="9000"></div>
    </div>
    <!-- scripts -->
    <script type="text/javascript" src="js/iroom.min.js"></script>
    <script type="text/javascript">
        new Iroom.Loader();
    </script>
                    
                

custom style

                    
    <!-- page loader -->
    <div class="row full-page items-center justify-center loader-container">
        <div id="loader" style="border-color: green; border-top-color: lime; border-width: 3px; width: 55px; height: 55px;"></div>
    </div>
    <!-- scripts -->
    <script type="text/javascript" src="js/iroom.min.js"></script>
    <script type="text/javascript">
        new Iroom.Loader();
    </script>
                    
                

the filters

a core component

you just need 3 classes and data-filter attributes

web

print

print

pub

pub

pub

web

web

print

web

print

                    
    <div class="filters">
        <ul>
            <li><a href="#!" class="filter-button" data-filter="all">all</a></li>
            <li><a href="#!" class="filter-button" data-filter="web">web</a></li>
            <li><a href="#!" class="filter-button" data-filter="print">print</a></li>
            <li><a href="#!" class="filter-button" data-filter="pub">pub</a></li>
        </ul>
        <div>
            <div class="filter-display" data-filter="web">     <p>web</p></div>
            <div class="filter-display" data-filter="print">   <p>print</p></div>
            <div class="filter-display" data-filter="print">   <p>print</p></div>
            <div class="filter-display" data-filter="pub">     <p>pub</p></div>
            <div class="filter-display" data-filter="pub">     <p>pub</p></div>
            <div class="filter-display" data-filter="pub">     <p>pub</p></div>
            <div class="filter-display" data-filter="web">     <p>web</p></div>
            <div class="filter-display" data-filter="web">     <p>web</p></div>
            <div class="filter-display" data-filter="print">   <p>print</p></div>
            <div class="filter-display" data-filter="web">     <p>web</p></div>
            <div class="filter-display" data-filter="print">   <p>print</p></div>
        </div>
    </div>
                    
                

the smooth scroll

to navigate smooth to page anchors

basic usage

you need a demo ?

click here to go to the menu

                    
    <div>
        <p>you need a demo ?</p>
        <p>click <a href="#menu" class="btn-default"><i class="fa fa-arrow-up"></i> here</a> to go to the menu</p>
    </div>

    <!-- scripts -->
    <script type="text/javascript" src="js/iroom.min.js"></script>
    <script type="text/javascript">
        new Iroom.Smooth();
    </script>
                    
                

the duration option

the 1st way : javascript option

                    
    <script type="text/javascript">
        new Iroom.Smooth({duration: 5000});
    </script>
                    
                

the 2nd way : data-duration attribute (that overrides the first)

                    
    <div>
        <p>you need a demo ?</p>
        <p>click <a href="#menu" data-duration="9000" class="btn-default"><i class="fa fa-arrow-up"></i> here</a> to go to the menu</p>
    </div>

    <!-- scripts -->
    <script type="text/javascript" src="js/iroom.min.js"></script>
    <script type="text/javascript">
    new Iroom.Smooth();
    </script>
                    
                

the scroll to top

users like to go back to the top

basic usage

you need a demo ?

click here to scroll to top

                    
    <!-- scroll-to-top -->
    <div id="scrollToTop" class="hidden"><i class="fa fa-chevron-up"></i></div>

    <!-- scripts -->
    <script type="text/javascript" src="js/iroom.js"></script>
    <script type="text/javascript">
        new Iroom.ScrollToTop();
    </script>
                    
                

the duration option

the 1st way : javascript option

                    
    <script type="text/javascript">
        new Iroom.ScrollToTop({duration: 5000});
    </script>
                    
                

the 2nd way : data-duration attribute (that overrides the first)

                    
    <!-- scroll-to-top -->
    <div id="scrollToTop" data-duration="9000" class="hidden"><i class="fa fa-chevron-up"></i></div>

    <!-- scripts -->
    <script type="text/javascript" src="js/iroom.js"></script>
    <script type="text/javascript">
        new Iroom.ScrollToTop();
    </script>