So zoomen Sie Bilder wie Medium
Die Blogging-Plattform Medium verwendet a Zoom-Effekt für benutzerdefiniertes Bild auf ihren Blogseiten. Wenn der Benutzer auf ein Bild klickt, wird es automatisch vergrößert.
Es ist ein großartiger Effekt und sicherlich einzigartig für Medium, aber es war nie etwas, das leicht kopiert werden konnte.
Nun mit dem MediumLightbox Skript ist es einfacher als je zuvor. Dieses JS-Skript ist leicht und kann problemlos in jede Website oder in jedes Blog eingefügt werden.
Wenn Sie wissen möchten, wie das funktioniert, können Sie das besuchen Live-Demo-Seite gehostet vom Schöpfer Davide Calignano.
Er verbrachte eine Weile damit, den genauen Übergang und den benutzerdefinierten Animationseffekt genau festzulegen Erstellen Sie ein Spiegelbild des Medium-Zooms. Die gesamte Bibliothek ist in reinem JavaScript geschrieben, so ist es auf keine 3 angewiesenrd Party-Skripte wie jQuery.
Sie müssen ein wenig JS kennen, um es einzurichten, aber Sie müssen auf keinen Fall ein Experte sein.
Jedes Bild kann aufnehmen Daten- * Attribute für die Einstellung der vollen Höhe und Breite dynamisch gezogen aus dem Leuchtkasten-Plugin. Der Setup-Code ist sehr einfach und kann es zielen Sie auf die Bilder selbst, oder Behälter wie der
Hier ist der Code-Snippet, den Sie benötigen, um das Plugin zum Laufen zu bringen:
MediumLightbox ('figure.zoom-effect'); In der Funktion wirst du einen Selektor übergeben für alle Elemente (z. .Zoom-Effekt Klasse. Diese Klasse ist speziell definiert Im MediumLightbox-Stylesheet sollten Sie diese Option auch auf Ihrer Seite verwenden.
Und wenn alles fertig ist, sind Sie fertig!
In Ihrem Seiteninhaltsbereich können Sie alle Bilder in eine umschließen
Um eine Kopie dieses Skripts herunterzuladen und loszulegen, besuchen Sie einfach das GitHub-Repo. Hier finden Sie auch Dokumentation zusammen mit Code-Snippets Sie können kopieren, um sich schnell einzurichten.
