definicao de layout
This commit is contained in:
331
public/assets/pug/pages/template/scroll-reval.pug
Normal file
331
public/assets/pug/pages/template/scroll-reval.pug
Normal file
@@ -0,0 +1,331 @@
|
||||
- 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
|
||||
Reference in New Issue
Block a user