English Suche Login
Warenkorb

Warenkorb (0)

Du hast keine Artikel im Warenkorb.

01Vorwort

Weniger ist mehr. Deshalb übertreibe es nicht mit Animationen. Des weiteren überlege Dir genau ob gewisse Animationen bei kleineren Bildschirmgrössen nötig oder eher störend sind?

02Installation

Das Page Animator Script sollte im <head></head> Bereich, gerade nach dem Einbinden von jQuery integriert werden.

<head>

<!-- jQuery file -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Page Animator files -->
<link rel="stylesheet" type="text/css" href="page-animator.min.css" />
<script src="page-animator.min.js"></script>

</head>


Wordpress und Co.

Einige Systeme wie z.B Wordpress benutzen jQuery in noConflict() Mode. Deshalb muss am Anfang vom Page Animator Skript folgendes ergänzt werden.

var $ = jQuery;


03Erste Animation

Führe folgenden Code im <head> oder <body> Bereich ein. Falls möglich rate ich Dir den Code direkt am Ende des Page Animator Skriptes einzufügen. Dann natürlich ohne die <script> tags.

<script>
//var PageAnim = new PageAnimator(); //this is already set in the Page Animator Script.


$(document).ready(function() {

PageAnim.add('article-list', //any name so you can access this animation if needed later
'.article-list', //element selector
{anim_on: "scroll",
class_init: "pa-slideup",
class_anim: "pa-slideup-anim",
interval: 300,
//offset: -200,
//not: 990,
//reveal: "once",
delay: 0
}
);

});
</script>

Alternative kannst Du auch jedem Html Element eine Animation zuweisen.

Wichtig ist das Du beim data-pa-config Tag am Anfang und Ende single Quotes ( ' ) verwendest.  

<script>
//var PageAnim = new PageAnimator(); //this is already set in the Page Animator Script.

$(document).ready(function() {

PageAnim.addInline();

});
</script>

<div data-pa-name="ainfo" data-pa-config='{"anim_on": "scroll", "class_init": "pa-slideup", "class_anim": "pa-slideup-anim"}'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>

JS Methoden

04.add

.add(name, selector, config);

ParameterType
Beschreibung / Beispiel
name
string
Gib jeder Animation einen individuellen Namen. Du kannst dann mit diesem Namen deine Animation manipulieren.
selector
string
Bestimme welche Elemente Du animieren willst.
z.B. '.myelements', '#myelement', '#myelement ul li', '.myelement:first', etc.
config
object
Animationsoptionen

 

<script>
PageAnim.add('elements',
'.element',
{anim_on: "scroll",
class_init: "pa-slide-up",
class_anim: "pa-slide-anim",
interval: 300,
offset: -200,
not: 1200,
reveal: "once",
delay: 0
}
);
<script>



Config Optionen:

Optionsname
WertBeschreibung
anim_on"scroll"Führt die Animation aus sobald das Element im Browserfenster erscheint.
 ["scroll", 200, "WinOffsetTop"]Führt die Animation aus sobald der Browserfenster-Abstand von 200px erreicht ist.
 ["scroll", "auto", "WinOffsetTop"]
Führt die Animation automatisch aus sobald der Browserfenster-Abstand gleich dem Element ist.
 "once"
Führt die Animation sofort und nur einmal aus.
Info: Weitere Manipulationen werden hier nicht funktionieren weil die Animationsdaten gelöscht werden.
 "hover"
Führt die Animation aus sobald die Maus über dem Element ist.
 "click"
Führt die Animation beim klicken auf das Element aus.
class_init
"pa-slide-up"
CSS Klassenname zum initialisieren der Animation.
Info: Kann natürlich auch seine eigenen schreiben.
class_anim
"pa-slide-anim"
CSS Klassenname zum Ausführen der Animation.
Info: Kann natürlich auch seine eigenen schreiben.
css_init
{'width': '200px', 'transition': 'all'}
CSS zum initialisieren der Animation.
css_anim
{'width': '500px', 'transition': 'all'}
CSS zum Ausführen der Animation.
  Info: css_init/css_anim überschreibt class_init/class_anim wenn beide gesetzt sind.
anim
"paRandomly"
Javascript Funktionsname. Anstatt class_init/class_anim oder css_init/css_anim zu setzen kannst Du auch eine Funktion benutzen um Animationen auszuführen.
delay
500
Animationsverzögerung in Millisekunden.
interval
250
Animationsinterval in Millisekunden.
Info: Bei Inline hinzugefühgten Animationen ist diese Option nutzlos.
offset
-200
Offset in Pixel. Falls benötigt kann man dem Element einen Offset geben.
reveal
"once"
Die Animation wird nur einmal Ausgeführt. Wird nur bei der Option anim_on: "scroll" angewandt.
not
990
Breakpoint Wert. Die Animation wird unter diesem Wert nicht mehr ausgeführt.

CSS Klassen für die class_init/class_anim Optionen

class_init
class_anim
Beschreibung
"pa-slide-up"
"pa-slide-anim"Element erscheint von unten nach oben.
"pa-slide-down""pa-slide-anim"
Element erscheint von oben nach unten.
"pa-slide-left"
"pa-slide-anim"
Element erscheint von links nach rechts.
"pa-slide-right"
"pa-slide-anim"
Element erscheint von rechts nach links.
"pa-rotate-left"
"pa-rotate-anim"
Element erscheint rotierend von links nach rechts.
"pa-rotate-right"
"pa-rotate-anim"
Element erscheint rotierend von rechts nach links.
"pa-scale-in"
"pa-scale-anim"
Element zooming in.
"pa-hover-scale"
"pa-hover-scale-anim"
Element zooming out.
"pa-no-transition"

Zum deaktivieren von Transitions z.B. beim initialisieren. Siehe "hover" Beispiel.

Info: Du kannst natürlich auch deine eigenen CSS Klassen schreiben.


Animation mit einer Funktion

function myFunction(process, obj) {}

Parameter
Type
Beschreibung
process
string
Gibt Dir den Zustand der Animation bekannt. 'init' oder 'anim'.
obj
obj
Das Animationsobjekt. Siehe auch .getObj().

 

05.addBreakpoints

.addBreakpoints(breakpoints, min_max_width, automatic);

Parameter
Type
Beschreibung
breakpoints
array
z.B. [600, 990, 1100, 1300]
min_max_width
string
'min-width' oder 'max-width'
automatic
boolean
true = Media queries werden automatisch generiert, false = Media queries müssen manuell erstellt werden.

Für das manuelle Erstellen der Media queries siehe Beispiel Breakpoints.

06.addInline

.addInline();

Wenn Du Animationen mit Inline HTML initialisiert hast, rufe diese Methode einmal auf damit die Elemente erfasst werden.

07.config

.config(name, config);

Parameter
Type
Beschreibung
name
string
Animationsname
config
object
z.B. {anim_on: "hover", class_init: "pa-hover-scale", class_anim: "pa-hover-scale-anim"}

08.getActiveBreakpoint

.getActiveBreakpoint();

Liefert den aktiven Breakpoint zurück. Rückgabewert {int}

09.getInfo

.getInfo([name,] key);

Parameter
Type
Beschreibung
name
string
Animationsname. Nicht bei Animationsobjekten.
key
string
Keyname

Page Animator keys:

key
Rückgabewert
Beschreibung
'PLAYED'
int
Anzahl der gespielten Animationen.

Anwendungsbeispiel (siehe scrolling - advance Beipiel):

<script>
//bei jedem individuellen Animationsobjekt
obj.getInfo('PLAYED');

//bei jeder Animation
PageAnim.getInfo('example4', 'PLAYED');
</script>


.setInfo([name,] key, value);

Parameter
Type
Beschreibung
name
string
Animationsname. Nicht bei Animationsobjekten.
key
string
Setze deinen eigenen key.
value
mixed
Setze deinen eigenen Wert.

Anwendungsbeispiel (siehe Sticky Menu Beipiel):

<script>
//bei jedem individuellen Animationsobjekt
obj.setInfo('ANY_NAME', 3);

//bei jeder Animation
PageAnim.setInfo('example4', 'ANY_NAME', 3);
</script>

10.getObj

.getObj(name, index);

Parameter
Type
Beschreibung
name
string
Animationsname.
index
int
Index vom Animationsobjekt.
Rückgabewert
object
Gibt das Animationsobjekt zurück.

Das Animationsobjekt:

obj
Type
Beschreibung
obj['name']
string
Animationsname.
obj['index']
int
Objektindex.
obj['obj']
object
DOM Element.
obj['state']
int
Animationszustand. 0 = init, 1 = animiert
obj['offset_top']
int
Objekt Offset vom Browserfenster.

Vor dem Aufrufen der Methode sollte man überprüfen ob das Animationsobjekt überhaupt vorhanden ist.

<script>
if (PageAnim.hasObj('name', 0) !== false) {
var obj = PageAnim.getObj('name', 0);
obj['obj'].css('background', 'red');
}
</script>

11.getObjs

.getObjs(name);

Parameter
Type
Beschreibung
name
string
Animationsname.
Rückgabewert
objects
Alle Objekte der Animation.

Vor dem Aufrufen der Methode sollte man überprüfen ob das Animationsobjekt überhaupt vorhanden ist.

<script>
if (PageAnim.hasObjs('name') !== false) {
var objs = PageAnim.getObjs('name');

$.each( objs, function( key, obj ) {
obj['obj'].css('background', 'red');
});

}
</script>

12.getScrolling

.getScrolling();

Rückgabewert
Type
Beschreibung
'up'
string
scrolling up
'down'
string
scrolling down

13.off

.off(name, eventname);

Parameter
Type
Beschreibung
name
string
Animationsname.
eventname
string
Der Eventname

Diese Methode entfernt einen Event.

14.on

.on(name, eventname, function);

Parameter
Type
Beschreibung
name
string
Animationsname.
eventname
string
Der Eventname.
function
function
Eine Funktion die beim Event aufgerufen wird.

Events bei einer Animation:

eventname
Beschreibung
'start'
Funktion wird vor der Animation ausgeführt.
'end'
Funktion wird nach der Animation ausgeführt.
<script>
PageAnim.on('name', 'end', function() {
//any code
});
</script>


Globale Events:

eventname
Beschreibung
'scrolling'
Funktion wird beim Scrollen ausgeführt.
'resize'
Funktion wird beim ändern des Browserfensters ausgeführt.

Globale Events können mit dem 'PageAnimator' name erstellt werden.

<script>
PageAnim.on('PageAnimator', 'scrolling', function() {
//any code
});
</script>

15.reanimate

.reanimate(name);

Parameter
Type
Beschreibung
name
string
Animationsname.

Diese Methode für das erneute animieren einer Animation verwendet.

16.remove

.remove(name);

Parameter
Type
Beschreibung
name
string
Animationsname.

Für das Entfernen einer Animation.

Menü