📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
gorevyapscripti.demodesign.com.tr
/
system
/
theme
/
assets
/
pug
/
pages
/
theme
📝
AOS.pug
← Geri Dön
- var theme_customizer = true; - var tooltip = true; - var photo_swipe = true; - var isotope = true; - var aos = true; - var page_aos = 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 | AOS Animation .col-6 ol.breadcrumb li.breadcrumb-item a(href='index.html') i(data-feather="home") li.breadcrumb-item Animation li.breadcrumb-item.active AOS Animation // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header h5 AOS Example animation .card-body #aniimated-thumbnials.row.gallery.grid.my-gallery figure.grid-item.col-sm-3(data-aos='fade-down') a(href='../assets/images/big-masonry/1.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/1.jpg', alt='Image description') figcaption Image caption 1 figure.grid-item.col-sm-3(data-aos='zoom-out-down') a(href='../assets/images/big-masonry/2.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/2.jpg', alt='Image description') figcaption Image caption 2 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/3.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/3.jpg', alt='Image description') figcaption Image caption 3 figure.grid-item.col-sm-3(data-aos='fade-up') a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description') figcaption Image caption 4 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description') figcaption Image caption 5 figure.grid-item.col-sm-3(data-aos='fade-up') a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description') figcaption Image caption 6 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950') img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description') figcaption Image caption 7 figure.grid-item.col-sm-3(data-aos='fade-up') a(href='../assets/images/big-masonry/8.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description') figcaption Image caption 8 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description') figcaption Image caption 9 figure.grid-item.col-sm-3(data-aos='fade-up') a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description') figcaption Image caption 10 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/11.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description') figcaption Image caption 11 figure.grid-item.col-sm-3(data-aos='fade-up') a(href='../assets/images/big-masonry/12.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description') figcaption Image caption 12 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/14.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description') figcaption Image caption 13 figure.grid-item.col-sm-3(data-aos='flip-left') a(href='../assets/images/big-masonry/15.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description') figcaption Image caption 14 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/13.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description') figcaption Image caption 15 figure.grid-item.col-sm-3(data-aos='zoom-out') a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description') figcaption Image caption 16 figure.grid-item.col-sm-3(data-aos='flip-right') a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description') figcaption Image caption 17 figure.grid-item.col-sm-3(data-aos='zoom-out') a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description') figcaption Image caption 18 figure.grid-item.col-sm-3(data-aos='zoom-out-up') a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950') img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description') figcaption Image caption 19 figure.grid-item.col-sm-3(data-aos='zoom-out-down') a(href='../assets/images/big-masonry/8.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description') figcaption Image caption 20 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description') figcaption Image caption 21 figure.grid-item.col-sm-3(data-aos='slide-up') a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description') figcaption Image caption 22 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description') figcaption Image caption 23 figure.grid-item.col-sm-3(data-aos='fade-up') a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description') figcaption Image caption 24 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/11.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description') figcaption Image caption 25 figure.grid-item.col-sm-3(data-aos='fade-up') a(href='../assets/images/big-masonry/12.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description') figcaption Image caption 26 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/14.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description') figcaption Image caption 27 figure.grid-item.col-sm-3(data-aos='flip-left') a(href='../assets/images/big-masonry/15.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description') figcaption Image caption 28 figure.grid-item.col-sm-3(data-aos='flip-down') a(href='../assets/images/big-masonry/13.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description') figcaption Image caption 29 figure.grid-item.col-sm-3(data-aos='zoom-out') a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description') figcaption Image caption 30 figure.grid-item.col-sm-3(data-aos='flip-right') a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description') figcaption Image caption 31 figure.grid-item.col-sm-3(data-aos='zoom-out') a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950') img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description') figcaption Image caption 32 figure.grid-item.col-sm-3(data-aos='zoom-out-up') a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950') img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description') figcaption 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 h5 Init AOS .card-body div span.comment | // The Below Function is example of how to initlize reveal .line span | <script> span br code AOS.init(); br span < | /script span > .card .card-header h5 How to use it? span | All you have to do is to add code data-aos | attribute to html element, like so: .card-body .txt-primary span < | div data-aos="animation_name" span > .card .card-header h5 Advanced settings span | These settings can be set both on certain elements, or as default while initializing script (in options object without code data- part). .card-body.table-responsive table.table.table-bordered.table-striped thead tr th Attribute th Description th Example value th Default value tbody tr td em code data-aos-offset td Change offset to trigger animations sooner or later (px) td 200 td 120 tr td em code data-aos-duration td *Duration of animation (ms) td 600 td 400 tr td em code data-aos-easing td Choose timing function to ease elements in different ways td ease-in-sine td ease tr td em code data-aos-delay td Delay animation (ms) td 300 td 0 tr td em code data-aos-anchor td | Anchor element, whose offset will be counted to trigger animation instead of actual elements offset td #selector td null tr td em code data-aos-anchor-placement td | Anchor placement - which one position of element on the screen should trigger animation td top-center td top-bottom tr td em code data-aos-once td | Choose wheter animation should fire once, or every time you scroll up/down to element td true td false .card .card-header h5 Animation span There are serveral predefined animations you can use already: .card-body ul.line li h5 Fade animations: ul.ps-4.mb-4.list-circle li fade li fade-up li fade-down li fade-left li fade-right li fade-up-right li fade-up-left li fade-down-right li fade-down-left li h5 Flip animations: ul.ps-4.mb-4.list-circle li flip-up li flip-down li flip-left li flip-right li h5 Slide animations: ul.ps-4.mb-4.list-circle li slide-up li slide-down li slide-left li slide-right li h5 Zoom animations: ul.ps-4.list-circle li zoom-in li zoom-in-up li zoom-in-down li zoom-in-left li zoom-in-right li zoom-out li zoom-out-up li zoom-out-down li zoom-out-left li zoom-out-right .card .card-header h5 Anchor placement: .card-body ul.ps-4.list-circle.line li top-bottom li top-center li top-top li center-bottom li center-center li center-top li bottom-bottom li bottom-center li bottom-top .card .card-header h5 Easing functions: .card-body ul.ps-4.list-circle.line li linear li ease li ease-in li ease-out li ease-in-out li ease-in-back li ease-out-back li ease-in-out-back li ease-in-sine li ease-out-sine li ease-in-out-sine li ease-in-quad li ease-out-quad li ease-in-out-quad li ease-in-cubic li ease-out-cubic li ease-in-out-cubic li ease-in-quart li ease-out-quart li ease-in-out-quart // 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