Möchten Sie einen wirklich einzigartigen und auffälligen Effekt für Ihre Website erstellen? Wie wäre es mit einer Animation, die auf einen bestimmten Bereich der Seite zoomt, wenn Sie darauf klicken?
Das klingt nach viel Arbeit, aber mit jQuery und Zoomooz.js ist es ein Kinderspiel Ich werde Sie Schritt für Schritt durch den Prozess führen, während wir eine atemberaubende Zoom-Miniaturgalerie erstellen.
Was wir bauen
Live Demo: Klick hier
Zoomooz.js: Grundlegende Einführung
Wenn Sie mit neuen Bibliotheken arbeiten, ist es immer am besten, mit einem einfachen Beispiel zu beginnen, nur um ein Gefühl dafür zu bekommen, wie alles funktioniert. Mit diesem Projekt erstellen wir eine grundlegende Seite, um die Zoomfunktion des Skripts zu testen, und dann zu einem praktischeren Beispiel übergehen, indem Sie eine vollständige Miniaturansichtsgalerie erstellen.
HTML: Die Einschlüsse
Dieses Projekt enthält eine Menge Dinge, die im Kopfbereich Ihres HTML-Codes enthalten sein sollen. Als erstes wollen Sie zur Zoomooz.js-Homepage gehen und die Bibliothek herunterladen. Sie werden sehen, dass es wirklich nicht nur eine, sondern mehrere JavaScript-Bibliotheken enthält. Glücklicherweise finden Sie im Download Anweisungen zum Ausführen eines Skripts, um alles zu kombinieren und zu minimieren, damit es nicht so groß und unordentlich ist (ich überlasse diesen Schritt Ihnen).
In diesem Sinne erfordert unser kleines Experiment den folgenden Code, um zu beginnen:
Das JavaScript
Kopieren Sie anschließend das unten stehende Skript und fügen Sie es in Ihren HTML-Code ein. Wie Sie sehen, ist es das Ziel der Klasse? Zoom? und wendet das? zoomTo? Methode aus der Bibliothek. Dann wenden wir dasselbe auf den Körper an, sodass der Benutzer außerhalb eines Elements klicken kann, um auf die normale Ebene zu zoomen.
Schwitzen Sie es nicht zu viel, wenn Sie das nicht verstehen. Denken Sie daran, dass wir den Zoom anwenden müssen. Klasse zu Elementen, die zoombar sein sollen. Dasselbe exakte Snippet wird in beiden heutigen Projekten angewendet. Sie können es also einfach kopieren.
Das HTML
Als nächstes wollen wir ein grundlegendes Testgelände einrichten. Dazu müssen wir einen Container, ein äußeres div und ein inneres div erstellen. Der Container mag beliebig erscheinen, aber durch das Einschließen und Einstellen einer Breite / Höhe wird der Zoomeffekt auf dem äußersten Element korrekt ausgeführt.
Beachten Sie auch, dass wir den Zoom angewendet haben. Klasse zu den äußeren und inneren Divs. Der Link an dieser Stelle ist eigentlich nur ein Dummy-Element, um den Benutzer zu führen. Das Skript funktioniert auch ohne.
Das CSS
Als Nächstes wenden wir Größen und Positionen für jedes Element an. Bei einer definierten Containergröße funktioniert der Zoom wie auch die? Position: Absolut? Aussage zum? inneren? div. Das Skript kann etwas skurril sein, stellen Sie also sicher, dass Sie diese Elemente richtig machen.
Text CSS
Schließlich werfen wir hier nur ein paar grundlegende Textstile für den Absatz zusammen mit einem Schwebeflugzustand auf. Fühlen Sie sich frei, den Link vollständig aufzuheben.
Demo
Damit ist unsere einfache Demo fertig. Starten Sie die Demo-Seite, um sie in Aktion zu sehen. Wenn Sie auf jedes Div klicken, erhalten Sie eine andere Zoomstufe. Wenn Sie in den Körper klicken, werden Sie ganz herausgezoomt.
Zoomooz.js: Thumbnail-Galerie
Mit derselben Technik können wir eine großartige Miniatur-Galerie mit einem Zoom-Effekt erstellen. Beachten Sie jedoch, dass dieses Plugin wahrscheinlich am besten für Elemente geeignet ist, die mit dem Browser gerendert werden. Wenn wir es für Bilder verwenden, wie wir unten sehen werden, ist die unglückliche Realität, dass Sie alles in seiner vergrößerten Größe laden müssen.
Trotz einer Seite mit kleinen Miniaturansichten laden wir tatsächlich eine Seite mit großen Bildern, die je nach Verbindungsgeschwindigkeit des Benutzers einige Sekunden dauern kann.
Trotz dieser Einschränkung macht es trotzdem Spaß, die Dinge bis an die Grenze zu bringen und zu sehen, was möglich ist.
HTML
Der HTML-Code für dieses Projekt wird tatsächlich sehr einfach sein. Ich beginne mit einem Div, das beschreibenden Text enthält, im Grunde nur ein kurzer Header und ein Absatz-Tag, um zu erklären, was los ist. Als Nächstes erstellte ich eine große ungeordnete Liste mit den Bildern. Das wars so ziemlich!
Beachten Sie, dass ich den Zoom angewendet habe. Klasse sowohl für die? Galerie? div als Ganzes und zu jedem Bild im div. Dies gibt uns zwei Zoomstufen zum Spielen. Die Bibliothek ist intelligent genug, um relative Zoomstufen basierend auf Eltern-Kind-Beziehungen automatisch zu handhaben.
Stellen Sie außerdem sicher, dass Sie den Kopfcode und das JavaScript aus dem vorherigen Beispiel verwenden. Ich verwende dasselbe Setup, nur mein Body HTML und CSS ändern sich.
Wenn Sie mit dem Gestalten des Galerie-Containers fertig sind, ist es an der Zeit, unsere große Liste von Bildern an ein Raster anzupassen. Um dies zu tun, erklären Sie? Keine? als list-style-type und float die? li '-Elemente übrig. Beachten Sie auch den Positionierungskontext und den Hover-Effekt. Bei letzteren habe ich die Ränder beim Schweben mit der Maus weggelassen, damit die Grenze das Layout nicht beeinflusst. Um zu beginnen, hat jedes Miniaturbild einen Rand von 10 Pixeln, dann hat ein Miniaturbild beim Schweben einen Rand von 7 Pixeln und einen 3 Pix-Rand (7 + 3 = 10).
Damit sind wir fertig! Klicken Sie auf das Bild, um die Demo zu starten.
Fazit
Heute haben wir HTML, CSS und JavaScript synergetisch verwendet, um eine verrückte Webgalerie zu erstellen, die beim Klicken in ein Miniaturbild zoomt. Wie wir in der Testdemo gezeigt haben, kann derselbe Effekt auf jedes gewünschte Element wirken!
Wir haben die Oberfläche von Zoomooz.js kaum zerkratzt. Schauen Sie auf der Projektseite vorbei, um zu sehen, wie Sie mit diesem großartigen Plugin noch mehr erreichen können.