201129Mär

Zoomooz: Auf beliebige Seitenelemente zoomen

Neue und innovative Effekte oder Erweiterungen von Bedienelementen, die auf HTML5 oder CSS3 setzen, sind wichtig für die neuen Webstandards. An neuen Beispielen zeigt sich immer wieder, dass die Kreativität der Entwickler nahezu endlos ist. Ein aktuelles Projekt, das jQuery und CSS3-Transformationen vereint, stellt Zoomooz dar: Mit diesem jQuery-Plugin ist es möglich, auf beliebige Seitenelemente einer Website zu zoomen. Das Skript setzt daher moderne Webbrowser voraus, die unterschiedliche CSS-Deklarationen der "Transform"-Eigenschaft unterstützen. Auch in Internet Explorer 9 ist diese Funktion nun mit "-ms-transform" verfügbar.

Zoomooz.js

Zoomooz lässt sich also auf ausgewählte DOM-Elemente anwenden, die per Klick auf die maximale Höhe oder Breite des verfügbaren Platzes im Browserfenster vergrößert werden. Ein Beispiel für die Implementierung des Plugins:

  • $(document).ready(function(){
  • $(".zoomTarget").click(function(evt){
  • $(this).zoomTo();
  • evt.stopPropagation();
  • });
  •  
  • $("body").click(function(evt){
  • $(this).zoomTo({ targetsize:1.0 });
  • evt.stopPropagation();
  • });
  • });

Auch die Zoom Container Demo zeigt sehr schön, was mit dem Plugin möglich ist. Momentan gibt es noch ein paar Bugs, die auch auf der Projekt-Website nachgelesen werden können. Insgesamt ist das Plugin dennoch sehr gelungen.

RSS-Feed abonnieren