25 Nov

mooBlob ist im Grunde nur ein Rechteck, dass von einem Menupunkt zum anderen eilt. In Flash sind solche Menuspielereien schon lange bekannt. Das so etwas mit Mootools auch kein Problem darstellt möchte ich mit dem folgenen kleinen Script zeigen.

Update: Wie ich soeben gesehen habe mag der IE6 das Script nicht ganz. Es kommt zwar keine Fehlermeldung aber er mag den Effekt nicht anzeigen. Ich schau mir die Tage mal an ob es ein Problem mit meinem Script ist oder ob es an der Mootools Beta liegt.

Demo

mooBlob Demo

Javascript Source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
var blobfx = new Class(
{
  // Optionen Implementieren
  Implements : [Options],
 
  // Default Optionen setzen
  options :
  {
    'id'         : 'blobme',
    'startclass' : 'startblob',
    'duration'   : 300,
    'mastertag'  : 'li',
    'oversizex'  : 15,
    'oversizey'  : 15,
    'oversize2x' : 2,
    'oversize2y' : 2,    
    'blobcolor'  : '#f00',
    'opacity'    : 0.3
  },
 
  // blob element
  blob : false,
 
  // blobsettings
  blobsettings :
  {
    start  : false,
    fx     : false
  },
 
  // init
  initialize: function(options)
  {
    // optionen übernehmen
    this.setOptions(options);
 
    // div wrapper relative
    $(this.options.id).setStyles({'position':'relative'});
 
    // blob element erstellen
    this.createBlob();
 
    // fx morph init
    this.blobsettings.fx  = new Fx.Morph($(this.blob), {
      duration   : this.options.duration,
      transition : Fx.Transitions.Sine.easeInOut,
      link       : 'cancel' 
    });
 
    // default / start element 
    var elements = $$('#'+this.options.id+' .'+this.options.startclass);
    var element = elements[0];    
    this.blobsettings.start = element;
 
    // mouseenter an alle menupunkte
    $$('#'+this.options.id+' '+this.options.mastertag).each(function(element){ 
      element.addEvent('mouseover', this.moveBlob.bind(this) );
      element.setStyles({'position':'relative','z-index':100});
    }.bind(this));
 
    // mouseleave auf UL
    $(this.options.id).addEvent('mouseleave', this.leaveBlob.bind(this) );
 
    // start animation
    this.moveBlob({ 'target':element });    
  },
 
  // blob element erstellen
  createBlob: function()
  {
    this.blob = new Element('div', {
      'class'        : 'blob',
      'styles'       : {
        'background-color' : this.options.blobcolor,
        'position'         : 'absolute',
        'left'             : 0,
        'top'              : 0,
        'height'           : 0,
        'width'            : 0,
        'opacity'          : this.options.opacity,
        'z-index'          : 5        
      }
    });
 
    // element einfügen
    this.blob.inject($(this.options.id),'bottom');        
  },
 
  // blob bewegen
  moveBlob: function(element)
  {
    var el = $(element.target);
 
    // wir wollen nur LI tags also gehen wir solange zurück bis wir es haben
    if ( el.get('tag') != this.options.mastertag )
      el = el.getParent('li');
 
    // position des aktuellen li elements bestimmen
    var pos  = el.getPosition($(this.options.id));
 
    // animation starten
    this.blobsettings.fx.start({
        'left'   : pos.x - this.options.oversizex ,
        'width'  : el.offsetWidth + (this.options.oversizex*2),        
        'top'    : pos.y - this.options.oversizey ,
        'height' : el.offsetHeight + (this.options.oversizey*2)
    }).chain(function(){
      // 2. schritt der animation
      this.blobsettings.fx.start({
        'left'   : pos.x - this.options.oversize2x ,
        'width'  : el.offsetWidth + (this.options.oversize2x*2),        
        'top'    : pos.y - this.options.oversize2y ,
        'height' : el.offsetHeight + (this.options.oversize2y*2)
      });
    }.bind(this));
  },
 
  // wenn wir das UL verlassen bewegen wir den blob wieder an die start position
  leaveBlob: function()
  {
    this.moveBlob({ 'target':this.blobsettings.start});
  }
});

HTML Source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="blib">
<ul>
  <li><a href="#">Kaffe</a></li>
  <li><a href="#">Tee</a></li>
  <li class="startblob"><a href="#">Limonade</a></li>
  <li><a href="#">Kakao</a></li>
  <li><a href="#">Limonaden Heissgetraenk</a></li>
</ul>
</div>
 
<div id="blobme">
<ul>
  <li><a href="#">Hund</a></li>
  <li><a href="#">Elefant</a>
    <ul>
      <li><a href="#">kleiner Fant</a></li>
      <li><a href="#">grosser Fant</a></li>
      <li class="startblob"><a href="#">Fantomas</a></li>
      <li><a href="#">Nasofant</a></li>
      <li><a href="#">Schlafofant</a></li>
    </ul>      
  </li>
  <li><a href="#">Flo</a></li>
  <li><a href="#">Giraffe</a></li>
  <li><a href="#">Pumpelding</a></li>
</ul>
</div>

Aufrufendes Javascript;

1
2
3
4
window.addEvent('domready', function(){  
  var myfx1 = new blobfx({'id':'blib'  ,'blobcolor'  : '#0f0'});
  var myfx2 = new blobfx({'id':'blobme','blobcolor'  : '#000'});
});

Download:

mooblob Javascript

Hat dir der
Artikel gefallen?
Bookmarks: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • Digg
  • del.icio.us
  • MisterWong
  • Y!GG
  • Facebook
  • Google Bookmarks
  • Live-MSN
  • Tausendreporter
  • Technorati