- var theme_customizer      = true;
- var tooltip               = true;
- var photo_swipe           = true;
- var scrollreveal          = true;
- var pages_crollreveal     = true;
doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper.compact-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.sidebar-icon
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-lg-6
                                    h3
                                      | Scroll Reveal
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         i(data-feather="home")
                                      li.breadcrumb-item Animation
                                      li.breadcrumb-item.active Scroll Reveal
                                .col-lg-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-sm-12
                          .card
                            .card-header
                              h5 Scroll Reveal Example
                            .card-body
                              #aniimated-thumbnials.row.gallery.my-gallery(itemscope='')
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/01.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/01.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  1
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/02.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/02.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  2
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/03.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/03.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  3
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/04.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/04.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  4
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/05.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/05.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  5
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/06.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/06.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  6
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/07.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/07.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  7
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/08.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/08.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  8
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/09.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/09.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  9
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/010.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/010.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  10
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/011.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/011.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  11
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/012.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/012.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  12
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/013.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/013.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  13
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/014.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/014.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  14
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/015.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/015.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  15
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/016.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/016.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  16
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/01.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/01.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  17
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/02.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/02.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  18
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/03.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/03.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  19
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/04.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/04.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  20
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/05.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/05.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  21
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/010.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/010.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  22
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/011.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/011.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  23
                                figure.reveal.col-xl-3.col-sm-6(itemprop='associatedMedia', itemscope='')
                                  a(href='../assets/images/big-lightgallry/012.jpg', itemprop='contentUrl', data-size='1600x950')
                                    img.img-thumbnail(src='../assets/images/lightgallry/012.jpg', itemprop='thumbnail', alt='Image description')
                                  figcaption(itemprop='caption description') Image caption  24
                              // Root element of PhotoSwipe. Must have class pswp.
                              .pswp(tabindex='-1', role='dialog', aria-hidden='true')
                                //
                                  Background of PhotoSwipe.
                                  It's a separate element, as animating opacity is faster than rgba().
                                .pswp__bg
                                // Slides wrapper with overflow:hidden.
                                .pswp__scroll-wrap
                                  // Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory.
                                  // don't modify these 3 pswp__item elements, data is added later on.
                                  .pswp__container
                                    .pswp__item
                                    .pswp__item
                                    .pswp__item
                                  // Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.
                                  .pswp__ui.pswp__ui--hidden
                                    .pswp__top-bar
                                      // Controls are self-explanatory. Order can be changed.
                                      .pswp__counter
                                      button.pswp__button.pswp__button--close(title='Close (Esc)')
                                      button.pswp__button.pswp__button--share(title='Share')
                                      button.pswp__button.pswp__button--fs(title='Toggle fullscreen')
                                      button.pswp__button.pswp__button--zoom(title='Zoom in/out')
                                      // Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR
                                      // element will get class pswp__preloader--active when preloader is running
                                      .pswp__preloader
                                        .pswp__preloader__icn
                                          .pswp__preloader__cut
                                            .pswp__preloader__donut
                                    .pswp__share-modal.pswp__share-modal--hidden.pswp__single-tap
                                      .pswp__share-tooltip
                                    button.pswp__button.pswp__button--arrow--left(title='Previous (arrow left)')
                                    button.pswp__button.pswp__button--arrow--right(title='Next (arrow right)')
                                    .pswp__caption
                                      .pswp__caption__center
                          .card
                            .card-header
                              h5 How to Use Scroll Reveal(Customize options according to requirements)
                              span
                                | Add 
                                code .reveal
                                |  class to any tag for Archive animation like this
                            .card-body
                              div
                                span.comment
                                  | // The Below Function is example of how to initlize reveal
                                .line
                                  span.text-danger if (Modernizr.csstransforms3d)
                                  span.text-success {
                                  br
                                  |                                         window.sr = ScrollReveal();
                                  br
                                  |                                         sr.reveal('.reveal', {
                                  br
                                  |                                         duration: 800,
                                  br
                                  |                                         delay: 400,
                                  br
                                  |                                         reset: true,
                                  br
                                  |                                         easing: 'linear',
                                  br
                                  |                                         scale: 1
                                  br
                                  |                                         });
                                  br
                                  span.text-success  }
                          .card
                            .card-header
                              h5 Scroll Reveal Settings options
                            .card-body
                              .p-b-15
                                span.comment
                                  | // 'bottom', 'left', 'top', 'right'
                                .line
                                  | origin: 
                                  span.text-danger 'bottom',
                              .p-b-15
                                span.comment
                                  | // Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
                                .line
                                  | distance: 
                                  span.text-danger '20px',
                              .p-b-15
                                span.comment
                                  | // Time in milliseconds.
                                .line
                                  | duration: 
                                  span.text-danger 500,
                                  |                                         delay: 
                                  span.text-danger 0,
                              .p-b-15
                                span.comment
                                  | // Starting angles in degrees, will transition from these values to 0 in all axes.
                                .line
                                  | rotate: { x: 
                                  span.text-danger 0
                                  | , y: 
                                  span.text-danger 0
                                  | , z: 
                                  span.text-danger 0
                                  |  },
                              .p-b-15
                                span.comment
                                  | // Starting opacity value, before transitioning to the computed opacity.
                                .line
                                  | opacity: 
                                  span.text-danger 0
                                  | ,
                              .p-b-15
                                span.comment
                                  | // Starting scale value, will transition from this value to 1
                                .line
                                  | scale: 
                                  span.text-danger  0.9
                                  | ,
                              .p-b-15
                                span.comment
                                  | // Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
                                .line
                                  | easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',
                              .p-b-15
                                span.comment
                                  | //  is the default reveal container. You can pass either:
                                  br
                                  |                                         // DOM Node, e.g. document.querySelector('.fooContainer')
                                  br
                                  |                                         // Selector, e.g. '.fooContainer'
                                .line
                                  | easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',
                              .p-b-15
                                span.comment
                                  | // true/false to control reveal animations on mobile.
                                .line
                                  | mobile: true,
                              .p-b-15
                                span.comment
                                  | // true:  reveals occur every time elements become visible
                                  br
                                  |                                         // false: reveals occur once as elements become visible
                                .line
                                  | reset: false,
                              .p-b-15
                                span.comment
                                  | // 'always' — delay for all reveal animations
                                  br
                                  |                                         // 'once'   — delay only the first time reveals occur
                                  br
                                  |                                         // 'onload' - delay only for animations triggered by first load
                                .line
                                  | useDelay: 'always',
                              .p-b-15
                                span.comment
                                  | // Change when an element is considered in the viewport. The default value
                                  br
                                  |                                     // of 0.20 means 20% of an element must be visible for its reveal to occur.
                                .line
                                  | viewFactor: 0.2,
                              .p-b-15
                                span.comment
                                  | // Pixel values that alter the container boundaries.
                                  br
                                  |                                     // e.g. Set `{ top: 48 }`, if you have a 48px tall fixed toolbar.
                                  br
                                  |                                     // --
                                  br
                                  |                                     // Visual Aid: https://scrollrevealjs.org/assets/viewoffset.png
                                .line
                                  | viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },
                              .p-b-15
                                span.comment
                                  | // Callbacks that fire for each triggered element reveal, and reset.
                                .line
                                  | beforeReveal: 
                                  span.text-danger function
                                  |  (domEl) {},
                                  br
                                  |                                         beforeReset: 
                                  span.text-danger function
                                  |  (domEl) {},
                              div
                                span.comment
                                  | // Callbacks that fire for each completed element reveal, and reset.
                                .line
                                  | afterReveal: 
                                  span.text-danger function
                                  |  (domEl) {},
                                  br
                                  |                                         afterReset: 
                                  span.text-danger function
                                  |  (domEl) {}

                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files
