Zeit zum Lesen Banner (SVG) - Marco Lemmenmeier
Marco Lemmenmeier is an Interactive Media Designer. He has a passion for design, film and photography. Send him an E-Mail to collaborate.
Marco, Lemmenmeier, Marco Lemmenmeier, IMD, Interactive, Media, Designer, Zurich, St. Gallen, Switzerland, Swiss, Freelancer, Designer, Fotograf, Photographer, UX, UI, Filmemacher, Filmmaker
288
portfolio_page-template-default,single,single-portfolio_page,postid-288,bridge-core-2.1.9,ajax_updown,page_not_loaded,,qode-title-hidden,qode_grid_1400,qode_popup_menu_text_scaledown,qode-child-theme-ver-1.0.0,qode-theme-ver-20.6,qode-theme-bridge,wpb-js-composer js-comp-ver-6.1,vc_responsive,modula-best-grid-gallery

HTML Banner SVG

Bei den letzten zwei «Zeit zum Lesen» Kampagnen haben wir jeweils noch eine digitale Promotion gestartet. Dabei setzte das Zeitungsunternehmen vor allem auf die HTML Banner. Die Animation war in beiden Jahren dieselbe.  Zuerst sieht der User einen kleinen Ausschnitt sehr vergrössert und dann zoomt es auf die ganze Landschaft raus. Da bei dieser Art der Banner das maximale Gewicht der Datei sehr begrenzt ist, ist es nicht möglich, ein so grosses Bild einzubetten. Daher haben wir nach einer alternativen Lösung gesucht. Nun wird das Bild bzw. SVG in ein eigenes «Div» integriert. Danach animieren wir lediglich den Container. Dank dem, dass das SVG nur aus Code besteht, ist die finale Animation vom Gewicht her sehr leicht. Zusätzlich sieht die Qualität auch noch sehr gut aus.

Ganzen Code herunterladen

<gwd-pagedeck class=»gwd-page-container» id=»pagedeck»>
<gwd-page id=»page1″ class=»gwd-page-wrapper gwd-page-size gwd-lightbox gwd-div-16r0″ data-gwd-width=»300px» data-gwd-height=»600px»>
<div class=»gwd-page-content gwd-page-size»>
<div class=»gwd-div-vpuc gwd-gen-zpfagwdanimation» id=»insel_wrapper»>
<svg>YOUR SVG CODE</svg>
</div>
<gwd-image source=»assets/text.png» id=»text» class=»gwd-img-1s5g gwd-gen-ihnkgwdanimation»></gwd-image>
<gwd-taparea id=»gwd-taparea_1″ class=»gwd-taparea-a6mp gwd-gen-1gmvgwdanimation»></gwd-taparea>
</div>
</gwd-page>
</gwd-pagedeck>