Experiment - SVG-Pattern
von Alexander Schwirjow
Jahre lang wurde der Web von Slidern überschwemmt. Man kann es ja auch verstehen - die bieten den "WOW"-Effekt mit wenig Aufwand. So einfach ist es aber nicht - schaut mann in die Entwickler-Tools des Browsers, ist da bereits bei einfachem Slider schon einiges drin. Als erstes - die ganzen Javascript Abhändigkeiten, dann die eigenen Skripte und oben drauf noch CSS, von dem die Hälfte direct inline ist. Und die Bilder darf man ja auch nicht vergessen. Besucht man so eine Seite unterwegs - ist schon mal einiges an Datenvolumen weg.
Aber zum glück ist der Spuck vorbei - langsam wird den Suchmaschienen und Benutzern klar, dass eine Seite, die so lange lädt und im Endeffekt nur ein Paar Überschriften oberhalb von Bild hat nicht wirklich ihren Zweck erfüllt. Aber es heißt ja nicht, dass es keine Animationen auf der Seite geben darf, nur sollen dise eben ihren Wert haben - Atmospäre schaffen, Daten Visualisieren, navigieren usw. Und da kommt SVG ins Spiel - die Unterstüzung durch die Browser ist gut, der Payload kann sehr gering gehalten werden und die Möglichkeiten sind unzählig.
Ein relativ einfacher beispiel mit großem Potenzial sind Patterns. Sehr einfache Muster, die eine grosse Fläche füllen. Einige Vorteile:
- Sehr klein im vergleich zum Raster-Bild
- Trotzdem sehr scharf, auch auf Retina- und HiDPI
- Das Bild dahinter muss nich zwingend hochauflösend sein - durch die Maske wird es nicht auffalen
- Kann animiert werden
- Kann interaktiv sein
HTML / SVG
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" preserveaspectratio="none" class="overlay">
<pattern id="pattern-dotted" x="0" y="0" width="3" height="3" patternunits="userSpaceOnUse" viewbox="0 0 3 3">
<g id="dot">
<rect width="3" height="3" fill="rgba(0,0,0,.5)" />
<circle cx="1" cy="1" r="1" fill="rgba(0,0,0,.5)" />
</g>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-dotted)" />
</svg>
<img src="cover.jpg">
</div>CSS
.overlay-container {
position: relative;
height: 480px;
width: 100%;
overflow: hidden;
}
.overlay-container img {
position: absolute;
left: 0;
top: 50%;
z-index: 0;
right: 100%;
width: 100%;
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.svg-overlay {
position: absolute;
z-index: 50;
top: 0;
left: 0;
right: 0;
bottom: 0;
}Animation
Würde man die Maske nur leich animieren, schon kann es zu interessanten unerwarteten Effekten kommen. Hier ist es zum Beispiel der Moiré-Effekt - der Raster im Bild überlagert sich mit dem in eurem Bildschirm, und das auch nocht dynamisch. Es gibt per se mehrere Wege SVG zu animieren - die meisten Browser können auch die normalen CSS-Animationen anwenden. Alternativ gibt es SMIL und einiges an JavaScript-Frameworks (Snap.svg zu Beispiel).
CSS
.svg-overlay rect {
-webkit-animation: moire 10s linear infinite alternate;
animation: moire 10s linear infinite alternate;
}
@-webkit-keyframes moire {
0% { -webkit-transform: scale(1); transform: scale(1); }
100% { -webkit-transform: scale(2); transform: scale(2); }
}
Kommentare
Einen Kommentar schreiben