Revolution Slider Video Background
Der Revolution Slider von themepunch gibt es nicht nur als WordPress, sondern auch als jQuery Plugin.
Mit dem Revolution Slider lassen sich nicht nur klassische Slider herstellten, sondern auch komplexe, interaktive Präsentationen. Dementprechend sind die Einstellungen vielfältig und somit braucht es schon einige Einarbeitungszeit zur Beherrschung dieses Werkzeugs. Dabei hilft aber die detaillierte Dokumentation von thempunch. Nebst kleinster Maken läuft aus meiner Sicht der Revolution Slider front- und backendseitig aber stabil.
Ein Video lässt sich an drei Stellen in einen Slider integrieren: im Static/Global Layer, im Slide als Haupthintergrund und im Slide auf einer beliebigen Ebene. Dazu erläutere ich kurz die Unterschiede der jeweiligen Verwendung.
Video auf der static/global Ebene
Wie der Name schon sagt, handelt es sich beim Static/Global Layer um die Ebene, die allen Ebenen übergeordnet ist. Auf diesem Layer sollte man zum Beispiel Steuerelemente, die in allen Slides präsent sein sollen, platzieren. Es ist durchaus möglich ein Video auf dem Static/Global Layer einzubetten. Das Problem dabei ist, dass dieses dann über allen anderen Ebenen liegt. Um das Video auf dem Static/Global Layer als Video Hintergrund zu verwenden, braucht man nur den z-index des Static/Global Layers zu ändern. Dies macht man unter Punkt 6 (Custom CSS/Javascript) in den Slider Einstellungen. Hierfür das nötige CSS:
|
1 2 3 4 5 6 |
/* Put static/global layer behind all others ! */ .tp-static-layers { z-index: -9999 !important; width: 100% !important; height: 100% !important; } |
Video im Haupthintergrund eines Slides
Der Haupthintergrund eines Slides verhält sich analog der CSS Eigenschaft background. Wobei man aber auch ein Video als Haupthintergrund des Slides verwenden kann. Bei Verwendung eines Videos ist allenfalls auf die Anzeigedauer (Timing) des Slides und die Länge des Videos zu achten. Nützlich ist ausserdem die Einstellung transparent für den Haupthintergrund eines Slides. Damit bleibt zum Beispiel der Videohintergrund des Static/Global Layer, sofern dieser per css in den Hintergrund verschoben wurde, sichtbar.
Video auf einer Ebene im Slide
Platziert man ein Video auf einer Ebene im Slide, werden die Bedienelemente des Videos beim Überfahren (hover) angezeigt. Was auf einer Seite nützlich und gewünscht, auf der anderen aber störend sein kann. Die Buttons lassen sich per css aber einfach auch ausblenden (unter Custom CSS in den Slider Einstellungen):
|
1 2 3 4 5 6 7 8 9 10 |
/* Don't show control buttons on video ! */ .tp-video-play-button { display: none !important; } .rev_slider video { pointer-events: none !important; } .rev_slider video::-webkit-media-controls { display: none !important; } |
Scroll Link Funktionalität
Nebst der schon integrierten Funktionalität der Buttons, sind auch individuelle Funktionen mit JavaScript in den Slider Einstellungen möglich. Um auf einer One Page Seite zum Beispiel das Kontaktformular am Ende der Seite über einen „conact me“-Button anzufahren, sind im Slide Editor folgende Einstellungen zu machen:
Nicht vergessen, auf der One Page Seite dem Kontaktformular die entsprechende ID, in diesem Fall: #contact-me, hinzuzufügen. Das eigentliche jQuery Script kommt dann ins Feld Custom JavaScript in den Slider Einstellungen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Scroll Below to certain id on page */ jQuery('body').on('click', 'a.tp-caption', function() { var $this = jQuery(this), href = $this.attr('href'); if(!href || href.charAt(0) !== '#') return; var el = jQuery(href); if(!el.length) el = jQuery('a[name=' + href.substring(1, href.length) + ']'); if(!el.length) return; jQuery('html, body').animate({scrollTop: el.offset().top}, 2000); return false; }); |
Siehe dazu auch den Artikel Smooth Scroll to Other Page Content in der FAQ von themepunch.