Lasst uns doch mal ein paar moo_ Templates sammeln die kleine Gimmicks in die Website einbringen.
Diese Seite soll nur ein Sammelthread sein! Bitte keine Fragen oder Diskussion!
Druckbare Version
Lasst uns doch mal ein paar moo_ Templates sammeln die kleine Gimmicks in die Website einbringen.
Diese Seite soll nur ein Sammelthread sein! Bitte keine Fragen oder Diskussion!
Mootools Mouseover-Tips für Elemente mit tip-Klasse und title-Attribut
Demo: http://demos111.mootools.net/Tips
Doku: http://mootools.net/docs/more/Interface/Tips
Blendet Elemente mit der Klasse continuesFade wiederholend (anhand der CSS-Eigenschaft Opacity) ein und aus.
Wir haben damit den Schein einiger Designelemente in Bewegung versetzt.
Das Bild eines <img>-Elements mit der Klasse hover wird beim Mouseover durch das Over-Bild ersetzt.
Das Over-Bild wird automatisch vorausgeladen und muss im gleichen Ordner wie das Originalbild liegen.
Zusätzlich muss es den Suffix _over tragen.
Bsp:
Originalbild: tl_files/bilder/meinBild.jpg
Over-Bild: tl_files/bilder/meinBild_over.jpg
Entfernt das floating und padding von Bildern im #main Container sofern die Fensterbreite 767px unterschreitet.
Zusätzlich wird das Bild unter dem Text positioniert.
Nützlich um Bilder auf kleinen mobilen Endgeräten nicht im Textfluss darzustellen.
Bilder mit der Klasse grey werden in Graustufen dargestellt. Beim Mouseover fadet das Bild zur farbigen Variante.
Bilder mit der Klasse rotary werden beim laden der Seite hereingezoomt. Im Template sind einige weitere Effekt auf Basis von CSS3-transform auskommentiert, diese werden leider von nur wenigen Browsern unterstützt. Kann ein Browser kein CSS3-transform bleibt der Effekt aus und das Bild wird sofort in voller Größe dargestellt.
Benötigt Element.getPrefixed.js und Fx.Parsers.Transform.js
von https://github.com/tbela99/Fx.css
Slidet die Unternavigation (ul.level_2) der Navigation mit der ID #mainNav beim laden der Seite nach unten ein.
Demo: http://www.4show.de
Hier noch ein weiterer Tooltip, der sich in allen Belangen an die eigenen Bedürfnisse anpassen lässt:
Seite: http://mootools.net/forge/p/floatingtips
Demo: http://jsfiddle.net/SLvUz/3/
Docu: http://wiki.github.com/lorenzos/FloatingTips/docs
Hi, schmeiss ich mal was dazu:
Die Funktion rasselt durch alle 'a' - Anchors, oder andere Elemente und vergibt die Eventlisteners mouseover und mouseleave.
Bei mouseover wird, wenn via css-psydo :hover vergeben schnell der neue Wert gespeichert, auch der Ausgangswert und von diesem zum :hover getweent.
Damit ist es möglich einen weichen Farbtween ganz einfach mit CSS steuern zu lassen, ohne die Werte in JS ablegen zu müssen.
Grüße,
Tim