- 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 include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Scroll Reveal ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Animation li.breadcrumb-item.active Scroll Reveal .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header.pb-0 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.pb-0 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.pb-0 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