Start Homepage

Sterne-Animation

Die animierten Sterne sind über ein Jquery-Script eingebaut und würden sich gfls. auch über ihr Foto legen. Zudem gibt es auf jeder Einzelseite ein anderes Foto, das macht es spannend und individuell. Übrigens kann man per Klick auf das Foto jeweils mehr Sterne generieren oder per Maus die Sterne verschieben.
Im Script selber gibt es unzählige Möglichkeiten zur Einstellung, sei es Geschwindigkeit, Anzahl, Farbe, Form der Objekte (Kreise, Sterne, Quadrate, Polygone), Abschalten der Verbindungslinien, Verhalten bei Mausberührung und vieles mehr.

Wir haben hier das Partikel-Script gleich zweimal unterschiedlich eingebaut. Vergleichen Sie es mal im Kopf-und Fussbereich. Im Kopfbereich gibt es bei den Sternen einen Effekt bei Mausberührung und keine Verbindungslinien zwischen den Sternen. Im Fussbereich dagegen gibt Verbindungslinien, jedoch keinen Effekt bei Mausberührung sowie im Vergleich eine Reduzierung der Geschwindigkeit und Anzahl der Sterne. Entspannung pur! Ein Hoch auf die Langsamkeit wider der allgemeinen Hektik unserer Zeit. Ein Tipp: Diese Script namens PARTICLES.JS ist vom Anbieter aus, aber auch wegen der Qualität des Scriptes darüber hinaus in zahlreichen externen Anleitungen, sei es über Suchmaschinen oder Videos bei Youtube, sehr gut dokumentiert.

Gestatten Sie uns gerade deshalb noch einen wichtigen Hinweis: Das Script ist standardmässig so aufgebaut, das sich die Objekte über ein ein einzelnes in Breite und Höhe bildschirmfüllendes Hintergrundbild animieren und darstellen lassen, den Einbau wie hier gar in eine komplette Webseite haben wir für Sie einmal in Eigenregie getätigt, so galt es diesbezüglich mit relativer und absoluter Positionierung zu arbeiten um den Effekt auf eine übergeordnete zweite halbtransparente Ebene zu platzieren und darunter die Webseite bzw. einzelne Bereiche der ersten Ebene durscheinen zu lassen. Es sei darüber hinaus noch anzumerken, das auch der Einbau von gleich zwei unterschiedlichen Particles-Scripten innerhalb einer Webseite nicht Bestandteil der Original-Anleitung und somit gar nicht vorgesehen ist. Fazit: So hoffen wir, Ihnen hiermit eine tolle individuelle Animation mit Mehrwert zum ohnehin schon Top-Original zu bieten.

Information

Die Seiten 'Home' (diese Seite) bis Sextus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind. Es gibt nicht nur bei mobilen Auflösungen sondern bei allen Auflösungen den Menü-Button ganz oben rechts. Bilder sagen mehr als Worte. Eine Foto-Gallerie finden Sie hier bei Quintus und Quartus. Anhand dieser Beispiele sehen Sie, das die Anzahl der Fotos frei wählbar ist. Bei Klick auf einem Bild der Foto-Gallerie lassen sich dann sämtliche Fotos innerhalb dieser Kategorie per Klick auf Linkspfeil oder Rechtspfeil durchsehen. Es gibt dabei auch einen Bildtitel sowie eine Bildanzeige (Bild X von X). Hinweis: Diese Gallerie ist mit Hilfe eines Jquery-Scripts getätigt. Jquery ist die beliebteste Javascript Bibliothek, die das Arbeiten mit Javascript vereinfacht. Viel Spaß damit!




Responsive Webdesign

CSS Media Queries

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.
Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

So testen Sie

Hier auf der Seite Primus (index1.html) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.