Ein fullscreen Slider mit SVG-Elementen für die Animation der Übergänge
Mal ein etwas anderer Slider. Bei den Webdesign-Kollegen von codyhouse fand ich diesen attraktiven Slider. Dort gibt es auch einen Download für das gesamte Dateienpaket. Für die animierten Übergänge werden hier Pfade aus einer SVG-Grafik und die Javascript library snap.svg genutzt.
Das HTML unterteilt sich in 3 Hauptelemente:
- eine unordered list (ul.cd-slider), die die einzelnen Bilder/Slides enthält
- eine ordered list (ol.cd-slider-navigation) für die Slider-Navigation
- und ein Element div.cd-svg-cover, das für die animierte Fläche benötigt wird, die auftaucht, wenn man von einem Bild zum nächsten navigiert
<section class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="visible">
<div>
<h2>Animated SVG Hero Slider</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, explicabo.</p>
</div>
</li>
<li>
<div>
<h2>Slide #2 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</li>
<li>
<div>
<h2>Slide #3 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, distinctio!.</p>
</div>
</li>
<li>
<div>
<h2>Slide #4 Title</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
</ul>
<!-- .cd-slider -->
<ol class="cd-slider-navigation">
<li class="selected"><a href="#0"><em>Item 1</em></a></li>
<li><a href="#0"><em>Item 2</em></a></li>
<li><a href="#0"><em>Item 3</em></a></li>
<li><a href="#0"><em>Item 4</em></a></li>
</ol>
<!-- .cd-slider-navigation -->
<div class="cd-svg-cover" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M615,800H0V0.6C0,0.4,0,0.3,0,0h615L393,312L615,800z" data-step5="M0,800h-2V0.6C-2,0.4-2,0.3-2,0h2v312V800z" data-step6="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step7="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step8="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z" data-step9="M785,800h615V0.6c0-0.2,0-0.3,0-0.6L785,0l222,312L785,800z" data-step10="M1400,800h2V0.6c0-0.2,0-0.3,0-0.6l-2,0v312V800z">
<svg height='100%' width="100%" preserveAspectRatio="none" viewBox="0 0 1400 800">
<title>SVG cover layer</title>
<desc>an animated layer to switch from one slide to the next one</desc>
<path id="cd-changing-path" d="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"/>
</svg>
</div>
<!-- .cd-svg-cover -->
</section>
CSS
By default haben alle Bilder opacity: 0, sind absolut positioniert und liegen übereinander, ausgerichtet mit top: 0 und left: 0.
.cd-slider-wrapper {
position: relative;
}
.cd-slider > li {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.cd-slider > li.visible {
/* selected slide */
position: relative;
z-index: 2;
opacity: 1;
}
Das ausgewählte Bild erhält dann jeweils die Klasse .visible.
Handling Events
Um die SVG-Grafik zu animieren wird das ‚d‘-Attribut des Pfad-Elements innerhalb des .cd-svg-cover animiert.
Zuerst müssen die einzelnen Schritte der Animation definiert werden. In diesem Beispiel 5 Schritte für die Animation von einem Bild zum nächsten und weitere 5 Schritte von einem Bild zurück zum vorherigen. Somit haben wir 10 verschiedene SVG-Pfad-Elemente (alle mit der gleichen Anzahl an Ankerpunkten, damit die Animation funktioniert). Siehe Screenshot aus der Illustrator-Datei. Beachte, einige Schritte erscheinen leer, enthalten aber ebenfalls einen Pfad.
Sind einmal die Pfade definiert, fügen wir der Klasse .cd-svg-cover ein data-stepn Attribut an (eines pro Schritt) entsprechend des ‚d‘-Attributs des festgelegten Pfads (um es mit JavaScript aufrufen zu können).
Dann nutzen wir die animate () method, die uns snap.svg liefert, um von einem zum nächsten Schritt zu animieren.
var svgCoverLayer = $('.cd-slider-wrapper').find('div.cd-svg-cover'),
svgPath = Snap('#cd-changing-path'),
path1 = svgCoverLayer.data('step1');
svgPath.animate({'d': path2}, 300, customMinaAnimation, function(){
//...
});
Die easing-function ist eine custom cubic-bezier function. Diese ist eigentlich nicht in snap.svg enthalten. Aber man kann eine custom timing function aus der cubic-bezier function bilden (siehe hierzu den StackOerflow-Beitrag)
Illustrator Trick: Damit diese Technik funktioniert, braucht man <path> Elemente. In Illustrator erhält man ein <polygon> Element, wenn man gerade Linien zeichnet. Um es in einen Pfad zu verwandeln, kann man einem Ankerpunkt einen ‚border-radius‘ zufügen.
Übersetzt und nachgebaut nach einem codyhouse Post