PHP Dosya Yöneticisi

- 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
 | &lt;link rel="stylesheet" href="css/animate.css" &gt;
 .card
 .card-header.wow-title
 h5
 span.badge.badge-primary.rounded-pill.me-2 2
 | Link and activate wow.js
 .card-body
 div
 .line
 | &lt; script src="js/wow.min.js" &gt; &lt; /script &gt;  &lt; script &gt;  <code>  WOW.init();</code> &lt; /script &gt;
 .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
 | &lt; div class="wow" &gt;  <code>Content to Reveal Here</code> &lt; /div &gt;
 .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
 | &lt; div class="wow bounceInUp" &gt;  <code>Content to Reveal Here</code> &lt; /div &gt;
 .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
 | &lt;section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"&gt; &lt;/section&gt; &lt;section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"&gt; &lt;/section&gt;

.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( { boxClass: 'wow', // default animateClass: 'animated', // default offset: 0, // default mobile: true, // default live: true // default } ) wow.init(); 
 // Page Body Ends 
 // Container-fluid Ends
 include ../../components/footer
 include ../../components/footer-files

İptal

📁 PHP Dosya Yöneticisi

📝 wow.pug

📝 wow.pug

📝 Yeniden Adlandır

🔐 Dosya İzinleri (chmod)