Ich war letzte Woche im Urlaub und in einem kleinen Strandgeschenkeladen verkauften sie dieses wirklich coole, große, dicke Buch namens Ocean: A Photicular Book. Sie haben wahrscheinlich schon etwas Ähnliches gesehen… eine Plastikkarte, die je nachdem, wie man sie betrachtet, unterschiedliche Bilder zeigt. Dieses Buch ist extrem gut gemacht, da die Bilder von sehr hoher Qualität sind und das Design des Buches die Bilder zum Leben erweckt, wenn man die Seiten umblättert.
Hier ist ein kurzes Video
Schaut euch dieses Buch an, es ist das Coolste pic.twitter.com/isRLATp9im
— Chris Coyier (@chriscoyier) 13. April 2017
Hier ist eine Erklärung von Dan Kainen
Photicular, auch bekannt als Lentikular oder Integrierte Fotografie, wurde erstmals im frühen 20. Jahrhundert konzipiert, aber das Grundkonzept existiert bereits seit 1692, als ein französischer Maler Gemälde schuf, die eines und dann das andere zeigten, wenn der Betrachter vorbeiging. Die einfachste Form davon besteht darin, zwei Bilder in dünne vertikale Streifen zu schneiden und sie zu verflechten, vor dem zusammengesetzten Bild eine Reihe von Stäben, wie ein Lattenzaun, zu platzieren, die es nur erlauben, zu einer Zeit durch die Lücken ein Bild zu sehen. Anstelle von Stäben können Linsen verwendet werden, und mehr als zwei Bilder – bis zu Dutzende – können verflochten werden.
Das Endergebnis im Ocean-Buch ist wirklich toll. Nachdem ich dieses auf Twitter erwähnt habe, habe ich Gutes über das Safari-Buch gehört. Ich bin mir sicher, dass sie alle großartig sind. Es ist fast wie die Zeitungen und Gemälde in Harry Potter!
Natürlich habe ich darüber nachgedacht, wie wir etwas Photicular-ähnliches im Web machen könnten. Wir haben Videos und GIFs im Web, es ist also nicht gerade schwer, Bilder zum Bewegen zu bringen. Aber es ist nicht nur die Bewegung selbst, die diese Bücher cool gemacht hat, sondern dass sie sich mit deinen Handlungen bewegen (beim Umblättern der Seiten).
Vielleicht könnten wir ein GIF durchblättern, während der Benutzer scrollt. Kann man programmatisch steuern, welches Frame eines GIFs gerade angezeigt wird? Sozusagen. Es gibt keine einfache native Technologie dafür, aber es gibt einige Alternativen.
Dennis Gaebel schrieb über eine Technik, die er letztes Jahr auf der Casper Mattress-Website gesehen hat.
Anstelle eines GIFs können Sie eine Bildsprite verwenden und je nachdem, wie Sie scrollen, welchen Teil des Bildes Sie anzeigen, wechseln. Seine endgültige Demo ist hier
Sehen Sie den Pen How to Animate a Coffee Drinking Sprite With ScrollMagic von Envato Tuts+ (@tutsplus) auf CodePen.
Wenn Sie wirklich bei einem GIF bleiben wollten, hat BuzzFeed tatsächlich eine JavaScript-Bibliothek namens libgif-js entwickelt, speziell um GIFs auf diese Weise zu steuern. Über diese Bibliothek können Sie zu bestimmten Frames springen, das GIF wie bei Videos pausieren und starten und die GIFs sogar „rubbable“ machen, was bedeutet, dass das Ziehen nach links und rechts das GIF vorwärts und rückwärts durchlaufen lässt.
Um super-meta zu werden, hier ist ein GIF von mir, wie ich mit einem „rubbable“ GIF herumspiele
Verwandt
Vor einem Jahrzehnt erinnere ich mich, wie mein damaliger Chef Tim Chatman für einen unserer Kunden ein Flip-Book-Ding aus Papier entworfen hat.
Es ist kein Photicular, aber es verwendet die gleichen Art von geschlitzten Papierlaschen, die man zieht, um die Bilder zu ändern.
Ich erinnere mich auch an eines meiner Lieblingskinderbücher, Dinnertime, in dem verschiedene Tiere aus den Seiten springen, wenn man sie umblättert.
Gute Idee, Chris, ich hätte nie gedacht, dass ich dieses Buch auf einem CSS-Tricks-Beitrag sehen würde!
Meine Partnerin hat es zusammen mit dem Safari-Buch gefunden und unser dreijähriger Sohn liebt sie beide. Die Bewegung ist wirklich ein faszinierender Trick. Ich glaube, es gibt auch ein Polar-Buch und vielleicht noch ein oder zwei andere, aber ich bin mir da nicht sicher.
Ich bin seit langem ein Fan verschiedener Kunst- und Bewegungstechniken, die aus einem Fine-Art-Hintergrund im Grafikdesign und dann in der Webentwicklung stammen. Diese Bücher sind großartig. Es gibt vier, als ich das letzte Mal nachsah, die eine Investition wert sind. Polar, Safari, Jungle und Ocean. Ich würde diese Idee auch gerne mit Webtechniken unter Verwendung von Gigs und Sprites oder sogar anderen Techniken erforschen, wenn möglich ;) Es gibt auch eine andere Methode mit vertikal auf Brettern in Winkeln montierten Streifen in einem Rahmen, von einer Seite sieht man eine Ansicht und von einer anderen Seite sieht man eine andere Ansicht, es ist toll, sie persönlich zu sehen!
Meine 2-Jährige liebt das Jungle-Buch, das wir ihr zu Weihnachten gekauft haben. Bei Tablets und all der erstaunlichen Technologie um uns herum überrascht es mich, dass etwas so Low-Tech immer noch Faszination bei sehr jungen Kindern auslösen kann. Ich erinnere mich an ein Design in CSS Zen Garden vor vielen Jahren, das etwas Ähnliches tat, indem es ein Bild mit einem Verlauf verwendete, wenn ich mich richtig erinnere, um eine Taucherlampe einzuschalten, während man die Seite hinunterscrollte.
Die andere Art von „Bewegungsbuch“ ist „Scanmation“, scanimationbooks.com/the-books/gallop/ … Ich habe das vor ein paar Jahren für eine Website gemacht, aber mir hat der Effekt nicht gefallen (zu instabil), also habe ich es übersprungen.
[begin „Über Scanimation“: ]
Die Art und Weise, wie „Bewegung“ in diesen Büchern funktioniert, ist folgende: Nehmen wir an, Sie möchten fünf Frames für die Animation verwenden. Dann haben Sie eine vordere „Maske“ (normalerweise schwarz) aus vertikalen Streifen, die jeweils vier kleine Einheiten breit sind, gefolgt von einer Lücke von einer Einheit Breite. Nehmen Sie nun Ihre Zielbilder, schneiden Sie sie in vertikale Streifen von 1 Einheit Breite und behalten Sie jeden fünften dieser Streifen… dann erstellen Sie ein kombiniertes Bild, indem Sie abwechselnd einen Streifen jedes der fünf Bilder nehmen. [Nun… ungefähr; etwas schwarzer Raum zwischen angrenzenden Frames, um sie zu trennen?… Kaufen Sie eines dieser Bücher und zerstören Sie es, um die tatsächlichen Mechanismen zu sehen, aber das ist traurig.]
Warum funktioniert das? Weil, wenn Sie Ihre Maske oben auf das kombinierte Bild legen, sauber ausgerichtet, dann zeigt nur ein Teil eines der fünf Bilder; bewegen Sie die Maske nach links oder rechts und die Teile eines anderen Bildes werden freigelegt. Da es sich um eine schwarze Maske mit kleinen weißen freigelegten Bildteilen handelt, fügt Ihr Verstand sie zu Formen zusammen. Die Maskierungslinien sind vertikal, da das Bild an der (vertikalen) Buchbindung befestigt ist und durch zunehmendes Umblättern der Seite das Bild weiter nach vorne geschoben wird und die „nächsten“ Frames freigibt – schließlich „looping“ zurück zum ersten Frame (aber um fünf Einheiten nach links verschoben).
[end „Über Scanimation“: ]
…
Ich habe dasselbe mit nur zwei Bildern gemacht: Zur Maskierung ein kleines GIF oder PNG mit horizontalen 1px weißen Streifen in position:relative und einem mittleren z-index (über dem Hintergrund, aber unter dem Text), und wiederholt in x- und y-Richtung. Dann hatte ich als Hintergrundbild (mit position:fixed und beidseitig wiederholt) auf einem weißen Hintergrund abwechselnd die beiden Wörter eines Projektnamens – in den „ungeraden“ Zeilen die eine (sagen wir „WAHRHEIT“), in den „geraden“ die andere (sagen wir „GERECHTIGKEIT“). Das bedeutet, dass beim Scrollen es so schnell verschwimmt/zwischen beiden Wörtern wechselt, dass Ihre Augen es nicht trennen können; aber nach dem Scrollen zeigt es das eine oder andere, je nachdem, ob Ihr Scrollen zufällig auf einem geraden oder ungeraden Pixel endete (wenn Sie zwei Bilder verwendet haben). Mit breiteren Bändern würde sich der Effekt verlangsamen, aber ich dachte, er hätte begrenzte Anwendung.
Eine weitere, etwas befriedigendere Variante, die ich ausprobiert habe, war das abwechselnde Einbetten verschiedener Farbvarianten desselben Bildes: Blau und Rot… beim Scrollen schien es gräulich, und dann, wenn es endete, war es willkürlich blau oder rot. Ich denke, es sieht grau aus, weil es eher schwach ist (was für Hintergründe in Ordnung ist) – die Hälfte Ihres normalen Bildes wird beim Einbetten weggeworfen, ersetzt (hier) durch Weiß; und diese beiden werden überlagert. Die Verbesserung besteht darin, dass die Farben herumspringen, während die Formen gleich bleiben.
Ich denke, die erste Variante könnte nützlich sein, wenn Sie zum Beispiel ein Firmenlogo (und/oder einen Slogan) haben, das aus zwei Teilen besteht, die jeweils etwas bedeuten, und einem Lo-Fi-Styling: Sagen wir, es ist „ZUVERLÄSSIG SCHNELL“ für sichere Lieferungen mit einem Logo, das aus einem Häkchen (für „zuverlässig“) und einem Blitz (für „schnell“) besteht. Alles in allem muss es schwach genug gemacht werden, um nicht zu ablenkend zu sein.
Hey, schießen Sie nicht auf mich… Ich habe das Design aus einem bestimmten Grund weiterentwickelt.
Dieser Artikel über Bat for Lashes auf Pitchfork ist mit Abstand immer noch eines der besten Beispiele, auf die ich je gestoßen bin. Nicht nur ist er sofort eindrucksvoll, er bereichert das Interview auf eine luxuriöse Weise, die Print nicht leisten kann. Es ist eine großartige Möglichkeit, einen langen Beitrag im Web lesbarer und ansprechender zu gestalten.
http://pitchfork.com/features/cover-story/reader/bat-for-lashes/
Der niederländische Flughafen Schiphol hat das größte Lentikularbild der Welt, und es ist eine ganze Wand. Es ist unglaublich, und ich hoffe, es diesen Monat zu sehen. Ich bin seit Jahren ein Fan von Lentikularbildern, sie sind faszinierend.
Die Lentikularwand in Aktion (YouTube)