📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
gorevyapscripti.demodesign.com.tr
/
system
/
theme
/
assets
/
pug
/
pages
/
theme
📝
wow.pug
← Geri Dön
- var theme_customizer = true; - var tooltip = true; - var photo_swipe = true; - var isotope = true; - var wow = true; - var page_wow = true; - var animate = true; - var sidebar = true; - var scrollbar = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/taptop // page-wrapper Start #pageWrapper.page-wrapper.compact-wrapper include ../../components/header // Page Body Start .page-body-wrapper include ../../components/sidebar .page-body .container-fluid .page-title .row .col-6 h3 | Wow Animation .col-6 ol.breadcrumb li.breadcrumb-item a(href='index.html') i(data-feather="home") li.breadcrumb-item Animation li.breadcrumb-item.active Wow Animation // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header h5 WOW Example animation .card-body #aniimated-thumbnials.row.gallery.grid.my-gallery(itemscope='') figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='') a(href='../assets/images/big-masonry/1.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/1.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 1 figure.grid-item.col-md-3.col-6.wow.bounceInDown.center(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='') a(href='../assets/images/big-masonry/2.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/2.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 2 figure.grid-item.col-md-3.col-6.wow.lightSpeedIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='') a(href='../assets/images/big-masonry/3.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/3.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 3 figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/4.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 4 figure.grid-item.col-md-3.col-6.wow.pulse(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', itemscope='') a(href='../assets/images/big-masonry/5.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 5 figure.grid-item.col-md-3.col-6.wow.bounceInRight.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/6.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 6 figure.grid-item.col-md-3.col-6.wow.bounceInLeft(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/7.jpg', itemprop='contentUrl', data-size='11600x950') img.img-thumbnail(src='../assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 7 figure.grid-item.col-md-3.col-6.wow.flipInX.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/8.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/8.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 8 figure.grid-item.col-md-3.col-6.wow.bounceInRight(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/9.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 9 figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/10.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 10 figure.grid-item.col-md-3.col-6.wow.shake(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', itemscope='') a(href='../assets/images/big-masonry/11.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/11.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 11 figure.grid-item.col-md-3.col-6.wow.swing.center(itemprop='associatedMedia', data-wow-iteration='2', itemscope='') a(href='../assets/images/big-masonry/12.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/12.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 12 figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/14.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/14.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 13 figure.grid-item.col-md-3.col-6.wow.bounceInUp.center(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='') a(href='../assets/images/big-masonry/15.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/15.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 14 figure.grid-item.col-md-3.col-6.wow.lightSpeedIn(itemprop='associatedMedia', data-wow-delay='0.5s', data-wow-duration='0.15s', itemscope='') a(href='../assets/images/big-masonry/13.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/13.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 15 figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/4.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 16 figure.grid-item.col-md-3.col-6.wow.pulse(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.25s', itemscope='') a(href='../assets/images/big-masonry/5.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 17 figure.grid-item.col-md-3.col-6.wow.flip(itemprop='associatedMedia', data-wow-iteration='2', data-wow-duration='0.15s', itemscope='') a(href='../assets/images/big-masonry/9.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 18 figure.grid-item.col-md-3.col-6.wow.lightSpeedIn.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/6.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 19 figure.grid-item.col-md-3.col-6.wow.bounce(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', itemscope='') a(href='../assets/images/big-masonry/7.jpg', itemprop='contentUrl', data-size='11600x950') img.img-thumbnail(src='../assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 20 figure.grid-item.col-md-3.col-6.wow.bounceInUp.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/8.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/8.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 21 figure.grid-item.col-md-3.col-6.wow.bounceInRight(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/9.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 22 figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/10.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 23 figure.grid-item.col-md-3.col-6.wow.bounceInRight.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/10.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 24 figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='') a(href='../assets/images/big-masonry/11.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/11.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 25 figure.grid-item.col-md-3.col-6.wow.bounceInDown.center(itemprop='associatedMedia', data-wow-delay='1s', itemscope='') a(href='../assets/images/big-masonry/12.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/12.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 26 figure.grid-item.col-md-3.col-6.wow.bounceInRight(itemprop='associatedMedia', data-wow-delay='1.5s', itemscope='') a(href='../assets/images/big-masonry/14.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/14.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 27 figure.grid-item.col-md-3.col-6.wow.bounceInRight.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/15.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/15.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 28 figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='') a(href='../assets/images/big-masonry/13.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/13.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 29 figure.grid-item.col-md-3.col-6.wow.bounceInLeft.center(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/4.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 30 figure.grid-item.col-md-3.col-6.wow.lightSpeedIn(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/5.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 31 figure.grid-item.col-md-3.col-6.wow.pulse(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/6.jpg', itemprop='contentUrl', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 32 figure.grid-item.col-md-3.col-6.wow.slideInRight(itemprop='associatedMedia', itemscope='') a(href='../assets/images/big-masonry/7.jpg', itemprop='contentUrl', data-size='11600x950') img.img-thumbnail(src='../assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description') figcaption(itemprop='caption description') Image caption 33 // 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.wow-title h5 span.badge.badge-primary.rounded-pill.me-2 1 | Setup wow.js span (You can link to another CSS animation library by changing wow.js settings) .card-body div .line code span | <link rel="stylesheet" href="css/animate.css" > .card .card-header.wow-title h5 span.badge.badge-primary.rounded-pill.me-2 2 | Link and activate wow.js .card-body div .line | < script src="js/wow.min.js" > < /script > <br />< script > <br /><code> WOW.init();</code><br />< /script > .card .card-header.wow-title h5 span.badge.badge-primary.rounded-pill.me-2 3 | Make an element revealable span (You can change this CSS class in the WOW settings to avoid name conflicts.) .card-body h6.text-muted | Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it. div .line | < div class="wow" > <br /><code>Content to Reveal Here</code><br />< /div > .card .card-header.wow-title h5 span.badge.badge-primary.rounded-pill.me-2 4 | Choose the animation style span | Pick an animation style in Animate.css , then add the CSS class to the HTML element .card-body div .line | < div class="wow bounceInUp" > <br /><code>Content to Reveal Here</code><br />< /div > .card .card-header.wow-title h5 span.badge.badge-success.rounded-pill.me-2 Extra | Advance Options .card-body div .line p strong data-wow-duration: | Change the animation duration br strong data-wow-delay: | Delay before the animation starts br strong data-wow-offset: | Distance to start the animation (related to the browser bottom) br strong data-wow-iteration: | Number of times the animation is repeated br pre.mb-0 | <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"><br /> </section><br /> <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"><br /> </section> .card .card-header.wow-title h5 span.badge.badge-danger.rounded-pill.me-2 Settings | Customize Settings .card-body div .line p strong boxClass: | Class name that reveals the hidden box when user scrolls. p strong animateClass: | Class name that triggers the CSS animations (’animated’ by default for the animate.css library) p strong offset: | Define the distance between the bottom of browser viewport and the top of hidden box. br | When the user scrolls and reach this distance the hidden box is revealed. p strong mobile: | Turn on/off wow.js on mobile devices. p strong live: | consatantly check for new WOW elements on the page. pre.mb-0 | wow = new WOW(<br /> {<br /> boxClass: 'wow', // default<br /> animateClass: 'animated', // default<br /> offset: 0, // default<br /> mobile: true, // default<br /> live: true // default<br /> }<br /> )<br /> wow.init(); // Page Body Ends // Container-fluid Ends include ../../components/footer include ../../components/footer-files
💾 Kaydet
İptal
📝 Yeniden Adlandır
İptal
Kaydet
🔐 Dosya İzinleri (chmod)
İzin Değeri:
Hızlı Seçim:
777
755
644
600
777
= Herkes okur/yazar/çalıştırır
755
= Sahip tam, diğerleri okur/çalıştırır
644
= Sahip okur/yazar, diğerleri okur
600
= Sadece sahip okur/yazar
İptal
Uygula