Page Transitions.

A simple and easy jQuery plugin for CSS animated page transitions

https://git.blivesta.com/animsition/

HTML

<!-- animsition.css -->
<link rel="stylesheet" href="../dist/css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="../dist/js/animsition.min.js"></script>

<!-- HTML -->
<body>
  <div class="animsition-overlay" data-animsition-overlay="true">
    <a href="./page1" class="animsition-link">animsition link 1</a>
    <a href="./page2" class="animsition-link">animsition link 2</a>
  </div>
</body>

//LOAD-slide

$(document).ready(function() {
  $(".animsition-overlay").animsition({
    inClass: 'overlay-slide-in-left',
    outClass: 'overlay-slide-out-right',
    inDuration: 600,
    outDuration: 600,
    linkElement: '.animsition-link',
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
    loading: true,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : true,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});


<!-- SOURCE-->
http://git.blivesta.com/animsition/slide-left/

Page Transitions.

A simple and easy jQuery plugin for CSS animated page transitions

Warum AOS grundsätzlich SEO-freundlich ist

Typo3 13 - PHP Konfiguration im Plesk

Sys Log E_WARNING unterdrücken

Google Ads ohne Conversions wegen gad_source?

tx_news Listen Ansicht

TYPO3 YOAST SEO

Outline Effekt

Typoscript Einbindung

CSS - Checkbox & Radio Buttons

AOS Animate On Scroll Library

Random Content

IMG_RESOURCE

RTE CKEditor - Code-Snippet

Sprachen Variablen ab Version 9

DSGVO-konform

Sitemap

Flexible Container und Grids

Transfonter

SEO Typo3 News

TYPO3 Installieren

Inline Youtube Video

Masonry

Gridelements

Clickstorm SEO

Slick Slider & News

tx_news verschiedene Bildgrössen

tx_news Powermail

Mehrere Detail Templates

Fluid Templates

Site Configuration ab TYPO3 Version 9

Jquery Beispiele

Typo Script Basics

mp4 Video

tx_news

Page Transitions.

Partner & Links