JavaScript - Page Transitions

Page Transitions, Inhalte via AJAX Laden, CSS und JavaScript Animations

Siehe auch

• AJAX - Content Loading

Tools und Links

• http://git.blivesta.com/animsition/
• http://designdrizzle.com/15-amazing-page-transitions-effects-tutorials-in-jquery-and-css3/
• https://webdesign.tutsplus.com/tutorials/how-to-create-an-ajax-driven-theme-for-processwire--cms-26579
• https://tympanus.net/Development/FullscreenLayoutPageTransitions/
• https://tympanus.net/codrops/2014/04/23/page-loading-effects/ -> vielseitig einsetzbar

Überblick

AJAX Page Loading

• AJAX können Inhalte nachgeladen werden.
• Es können auch nur Teile einer Seite (z.B. ein Div) nachgeladen werden.
• Auch andere Datenformen (z.B. JSON) sind möglich. Es gibt auch entsprechende Frameworks
• Browser-History und URLs im Blick behalten. Seite soll auch komplett ladbar sein.
• Title Tag auslesen und ersetzen. Oder den Titel in den Link schreiben und hier holen.

Strategiebeispiel

• 2 verschachtelte Container
• Der äußere beinhaltet alle Inhalte. An den inneren werden die neuen Inhalte angehängt (append)
• Page Transition wird ausgeführt und der innere Container mit den alten Inhalten ausgeblendet.
• Evtl. Browser History aktualisieren und URL
• Evtl. Seitenskripte neu initialisieren

Inhalte dynamisch nachladen mit AJAX

Seitenrequest auslösen

jQuery

$(function() { 
    var href;
    var title;
 
    $('body').on('click','a.ajax-link',function(e) { // nav link clicked 
        href = $(this).attr("href");
        title = $(this).attr("name");
 
        // load content via AJAX
        loadContent(href);
 
        // prevent click and reload
        e.preventDefault();
    });
 
    function loadContent(url){ // Load content
 
        // variable for page data
        $pageData = '';
 
        // send Ajax request
        $.ajax({
            type: "POST",
            url: url,
            data: { ajax: true },
            success: function(data,status){
                $pageData = data;
            }
        }).done(function(){ // when finished and successful
 
            // construct new content
            $pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';
 
            // add content to page
            $('.content-container').append($pageData);
 
            // remove old content
            $('.content.current-content').remove();
 
            // show new content and clean up classes
            $(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');
             
        }); // end of ajax().done()
    } // end of loadContent()
});