Seiten wechseln, mal anders

Wer Seiten per Ajax lädt, ist oft darauf angewiesen, den Inhalt auszublenden, solange der Ajaxaufruf läuft.Dazu werden dann oft Ladeanimationen oder FadeOut/In-Animationen verwendet.
Ich persönlich finde das immer etwas langweilig und verwende daher eine etwas andere Animation, sogenannte Sliding-Doors.
Dabei wird vor dem Inhalt eine animation abgespielt, die etwas über den Inhalt stellt, und nach dem Ajaxaufruf wieder ausblendet. Das kann man auf ganz unterschiedlichen Wegen erstellen.

So einfach wie möglich

Die einfachste Möglichkeit ist das Einblenden von einem schwarzen DIV

Zur Animation wird Jquery verwendet.
Sollen in dem Overlay Bilder () verwendet werden, sollte man mit Left animieren, sonst reicht width, Ich benutze Left auch wenn ich Hintergrundbilder per background-size Strecke, da dadurch keine „Komische Effekte“ entstehen.

Das Overlay soll über der ganzen Seiten liegen

Um die ganze seite mit einem overlay zu überziehene, muss der aufbau wie folgt gemacht werden

<html>
    <head></head>
    <body>
        <div id="Content">hier steht der eigentliche Inhalt der Seite</div>
        <div id="Loadinganimation"></div>
    </body>
</html>
#Loadinganimation {
    position: fixed;
    top:0;
    bottom: 0;
    width: 0%;
    background-color: rgba(255,255,255,0.7)
}
var slider = $("#Loadinganimation");
function animateIn() {
    slider.animate({width: '100%'});
}
function animateOut() {
    slider.animate({width: '0%'});
}

Nicht auf den Body, sondern innerhalb eines bestimmten Container

Der oben genannte Code bezieht sich auf das ganze Dokument und nicht auf ein bestimmtes Element

Soll nur in einem bestimmten Div animiert werden, muss dass ganze natürlich angepasst werden.

  • Der Container in dem die Animation erfolgt (Parent) muss mindestens position: relative besitzen
  • Der Animationscontainer muss mit position:absolute positioniert werden
  • Wird mit left statt mit width animiert, so muss der Parent-Container zusätzlich overflow:hidden besitzen, damit das ausblenden nicht gesehen wird
<html>
    <head></head>
    <body>
        <div id="Content">hier steht der eigentliche Inhalt der Seite<div id="Loadinganimation"></div></div>
    </body>
</html>
#content {
    position: relative;
}
#Loadinganimation {
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    width: 0%;
    background-color: rgba(255,255,255,0.7)
}
var slider = $("#Loadinganimation");
function animateIn() {
    slider.animate({width: '100%'});
}
function animateOut() {
    slider.animate({width: '0%'});
}

Das Ganze sieht dann ungefähr so aus:

Continually reconceptualize highly efficient growth strategies before client-centered leadership. Distinctively aggregate resource sucking e-markets before installed base ROI. Credibly target impactful meta-services through adaptive manufactured products. Professionally monetize technically sound technologies and distributed customer service. Proactively plagiarize bleeding-edge communities for bleeding-edge e-tailers.

Quickly enhance optimal core competencies without economically sound human capital. Professionally iterate extensive web services with intuitive total linkage. Authoritatively integrate competitive customer service without enterprise-wide core competencies. Distinctively maximize exceptional web-readiness vis-a-vis tactical quality vectors. Efficiently harness resource sucking models through interoperable potentialities.

Spezialfall Bilder () und Inhalt im Overlay

Möchte man innerhalb des Overlays z.B. ein Bild anzeigen, so muss man der Schönheit wegen etwas anpassen.

Animiert man mit width gibt es immer unschöne Nebeneffekte, dadurch das der Text anhand der Breite angezeigt wird.
Dafür gibt es aber auch eine Lösung

Per width animiert sieht das ganze ungefähr so aus. Wie man sieht faltet sich das Bild dabei zusammen.

Continually reconceptualize highly efficient growth strategies before client-centered leadership. Distinctively aggregate resource sucking e-markets before installed base ROI. Credibly target impactful meta-services through adaptive manufactured products. Professionally monetize technically sound technologies and distributed customer service. Proactively plagiarize bleeding-edge communities for bleeding-edge e-tailers.

Quickly enhance optimal core competencies without economically sound human capital. Professionally iterate extensive web services with intuitive total linkage. Authoritatively integrate competitive customer service without enterprise-wide core competencies. Distinctively maximize exceptional web-readiness vis-a-vis tactical quality vectors. Efficiently harness resource sucking models through interoperable potentialities.

Was zu ändern wäre

Man muss hierbei nur wenig im CSS und Javascript ändern

#content {
    position: relative;
    overflow: hidden /*damit man den div nicht sieht*/
}
#Loadinganimation {
    position: absolute;
    top:0;
    left: -100%;/*damit der Div ausgeblendet ist*/
    bottom: 0;
    width: 100%;/*damit schon am anfang der Div seine Breite hat*/
    background-color: rgba(255,255,255,0.7)
}
var slider = $("#Loadinganimation");
function animateIn() {
    slider.animate({left: '0%'});
}
function animateOut() {
    slider.animate({left: '-100%'});
}

Per Left animiert sieht das ganze ungefähr dann so aus. Gleich viel besser.

Continually reconceptualize highly efficient growth strategies before client-centered leadership. Distinctively aggregate resource sucking e-markets before installed base ROI. Credibly target impactful meta-services through adaptive manufactured products. Professionally monetize technically sound technologies and distributed customer service. Proactively plagiarize bleeding-edge communities for bleeding-edge e-tailers.

Quickly enhance optimal core competencies without economically sound human capital. Professionally iterate extensive web services with intuitive total linkage. Authoritatively integrate competitive customer service without enterprise-wide core competencies. Distinctively maximize exceptional web-readiness vis-a-vis tactical quality vectors. Efficiently harness resource sucking models through interoperable potentialities.

Seite egal

Das ganze geht in jede Richtung, dabei sind dann nur die Vorlagen etwas anzupassen. Mit etwas Verständnis bekommt man das selbst hin.

2 Container

Das ganze kann man nun noch etwas aufrunden, indem man zwei Divs verwendet, dadurch kann man dann von links und rechts, oder oben und unten, animieren.

<html>
    <head></head>
    <body>
        <div id="Content">hier steht der eigentliche Inhalt der Seite</div>
        <div id="Loadinganimation_Left" class="loader"></div>
        <div id="Loadinganimation_Right" class="loader"></div>
    </body>
</html>
.loader {
    position: absolute;
    top:0;
    bottom: 0;
    width: 0%;
}
#Loadinganimation_Left {
    left: 0;
    background-color: #ff0000;
}
#Loadinganimation_Right {
    right: 0;
    background-color: #00ff00;
}
var slider = $(".loader");
function animateIn() {
    slider.animate({width: '50%'});
}
function animateOut() {
    slider.animate({width: '0%'});
}

So kann das ganze dann aussehen.

Continually reconceptualize highly efficient growth strategies before client-centered leadership. Distinctively aggregate resource sucking e-markets before installed base ROI. Credibly target impactful meta-services through adaptive manufactured products. Professionally monetize technically sound technologies and distributed customer service. Proactively plagiarize bleeding-edge communities for bleeding-edge e-tailers.

Quickly enhance optimal core competencies without economically sound human capital. Professionally iterate extensive web services with intuitive total linkage. Authoritatively integrate competitive customer service without enterprise-wide core competencies. Distinctively maximize exceptional web-readiness vis-a-vis tactical quality vectors. Efficiently harness resource sucking models through interoperable potentialities.

Oder so wenn man auf CSS3 zurückgreift und folgendes css hinzufügt und auf left, bzw right animiert (Achtung Left sollten am Anfang und bei der Ausblenden-Animation kleiner als -100% sein)

.loader {
    -webkit-transform: skew(-30deg,0deg);
    -moz-transform: skew(-30deg,0deg);
    -ms-transform: skew(-30deg,0deg);
    -o-transform: skew(-30deg,0deg);
}

Nochmehr CSS3 Spass background-sizing.

Damit lassen sich zum Beispiel Tore animieren. Jedoch muss man hier viel basteln, oder man arbeitet mit transparenten PNG.

Beispielcode:

#Loadinganimation_Left {
    background-image: url(gate_left.png);
    background-size: 100% 100%;
}
#Loadinganimation_Right {
    background-image: url(gate_right.png);
    background-size: 100% 100%;
}

Continually reconceptualize highly efficient growth strategies before client-centered leadership. Distinctively aggregate resource sucking e-markets before installed base ROI. Credibly target impactful meta-services through adaptive manufactured products. Professionally monetize technically sound technologies and distributed customer service. Proactively plagiarize bleeding-edge communities for bleeding-edge e-tailers.

Quickly enhance optimal core competencies without economically sound human capital. Professionally iterate extensive web services with intuitive total linkage. Authoritatively integrate competitive customer service without enterprise-wide core competencies. Distinctively maximize exceptional web-readiness vis-a-vis tactical quality vectors. Efficiently harness resource sucking models through interoperable potentialities.

noch etwas Spezialer , die DCMS-Sliding-Doors

<html>
    <head></head>
    <body>
        <div id="Content">hier steht der eigentliche Inhalt der Seite</div>
        <div id="Loadinganimation_Left" class="loader"></div>
        <div id="Loadinganimation_Right" class="loader"></div>
    </body>
</html>
.loader {
    display: none;
    position: absolute;
    width: 0%;
    height: 1px;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0px 0px 5px 3px rgba(197, 250, 0, 0.75);
    box-shadow: 0px 0px 5px 3px rgba(197, 250, 0, 0.75);
    border-radius: 0px 50px 50px 0px;
}
#Loadinganimation_Left {
    left: 0;
    top: 45%;
}
#Loadinganimation_Right {
    right: 0;
    bottom: 45px
}
var slider = $(".loader");
function animateIn() {
    slider.show(0,function(){
        $(this).animate({width: '100%','slow'});
    });
}
function animateOut() {
    slider.animate({width: '0%'},'slow',function(){
        $(this).hide(0);
    });

}

So schauts aus

Continually reconceptualize highly efficient growth strategies before client-centered leadership. Distinctively aggregate resource sucking e-markets before installed base ROI. Credibly target impactful meta-services through adaptive manufactured products. Professionally monetize technically sound technologies and distributed customer service. Proactively plagiarize bleeding-edge communities for bleeding-edge e-tailers.

Quickly enhance optimal core competencies without economically sound human capital. Professionally iterate extensive web services with intuitive total linkage. Authoritatively integrate competitive customer service without enterprise-wide core competencies. Distinctively maximize exceptional web-readiness vis-a-vis tactical quality vectors. Efficiently harness resource sucking models through interoperable potentialities.

Klar, CSS3, Javascript Pure , BlaBla

Dies sind nur ein paar Möglichkeiten der Animation, das Ganze kann man auch per CSS3 lösen (zumindest die Animation, der Auslöser kann dann Javascript sein), und wer Jquery nicht mag, ok, nehmt pure Javascript, Mootools oder Prototype.
Ich stör mich nicht dran, aber den Weg müsst ihr dort selbst raussuchen.

Die CSS3-Version folgt aber auch noch.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

You may use these HTML tags and attributes

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

But, it will became readable code