Social-Media-Sharing Bubbles

@TM_Deutschland folgen

1

<!-- @end #wrapper -->

Schaut Euch die einzelnen Abschnitte an und Ihr werdet zwei Klassen in jedem Container bemerken. Beispielsweise, hat das erste Twitter-Widget eine Klasse von .glyph und .twitter. Die Glyphe-Klasse setzt einen allgemeinen Standard für jeden Link. Die sekundäre Klasse wird verwendet, um ein bestimmtes Link-Hintergrund-Icon einzuführen.

Der .glyph Container verfügt über zwei separate Elemente. Zunächst ist es das popup div, das ursprünglich auf der Seite ausgeblendet wird. Es verwendet die Klasse .bubble und ist neben einem Anker-Link ohne Text zu finden. Diese Links benutzen ein Hintergrund-Icon, um Social-Media-Websites zu repräsentieren, dabei ändert sich die Farbe von Icon, während man den Mauszeiger darüber platziert.

Eine andere Sache, die Ihr wahrscheinlich bemerkt habt, ist die Zugabe von .wide Klasse auf der Facebook-Blase. Da der "Like-Button" ein bisschen zu lang ist, habe ich zwei verschiedene Popup-Blase-Klassen erstellt – eine mit der Normalgröße und eine andere, die etwas breiter ist. Wenn Ihr die Größe verändern möchtet, könnt Ihr immer Eure eigenen erweiterten Popup-Hintergründe erstellen.

Gestalten mit CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  /** page structure **/
#wrapper {
  display: block;
  max-width: 700px;
  min-width: 350px;
  margin: 0 auto;
  padding: 20px 0;
}
 
 
/** social links **/
.social-links {
  display: block;
  width: 250px;
  padding-top: 100px;
  margin: 0 auto;
}

Die äußere Umhüllung sollte selbsterklärend als ein allgemeiner Container dienen. Der innere .social-links Container beinhaltet die Link-Icons und zentriert sie auf der Seite.

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

  .glyph {
  display: block;
  position: relative;
  float: left;
  width: auto;
  height: auto;
  margin-right: 2px;
  padding: 3px 6px;
  height: 35px;
  width: 52px;
}
.glyph.active {
  background: url('bubble-sm.png');
  background-position: -9px 40px;
}
 
.glyph .bubble { 
  display: none; 
  width: 140px;
  height: 89px;
  position: absolute;
  margin: 0;
  text-align: center;
  background: url('bubble-sm.png');
  padding: 20px 20px;
  bottom: 35px;
  left: -9px;
  cursor: pointer;
}
.glyph .bubble.wide {
  width: 160px;
  left: -6px;
  background: url('bubble-wide.png');
}

Nun, wenn es zur .glyph Klasse kommt, gibt es eine Menge zu berücksichtigen. Normalerweise benutze ich die relative Positionierung, weil die Glyphen einen bestimmten Abstand benötigen und die innere Popup-Blase absolut positioniert ist. Wenn man diese Popup-Blase in der relativen Anordnung gegenüber der Icon-Glyphe hat, ist das die einfachste Lösung.

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

.glyph a {
  display: block;
  position: relative;
  height: 33px;
  width: 40px;
}
 
.glyph.twitter a {
  background: url('twitter-grey@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
  top: -4px;
  left: -1px;
}
.glyph.twitter.active a { 
  background: url('twitter@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
}
.glyph.twitter .bubble {
  padding-top: 28px;
  padding-left: 24px;
}
 
 
.glyph.facebook a {
  background: url('facebook-grey@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
  top: -4px;
  left: -1px;
}
.glyph.facebook.active a { 
  background: url('facebook@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
}
.glyph.facebook .bubble {
  padding-top: 30px;
}
 
 
.glyph.dribbble a {
  background: url('dribbble-grey@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
  top: -4px;
  left: -1px;
}
.glyph.dribbble.active a {
  background: url('dribbble@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
}
.glyph.dribbble a.dbfollow {
  width: 85px;
  height: 36px;
  background: url('db-follow-grey@2x.png');
  background-repeat: no-repeat;
  background-size: 84px 35px;  
}
.glyph.dribbble a.dbfollow:hover {
  background: url('db-follow@2x.png');
  background-repeat: no-repeat;
  background-size: 84px 35px;   
}
.glyph.dribbble .bubble {
  padding-top: 30px;
  padding-left: 30px;
}

Animation mit jQuery

In dem ich auf die HTML-Datei wieder zurückgekomme, füge ich einen kleinen Block von JavaScript im unteren Bereich des Dokuments ein. Das Ganze ist in jQuery geschrieben und benutzt die .on() Event-Handler-Funktion.

1
2
3
4
5
6
7
8
9

  $(function(){
  $('.glyph').on('mouseover', function(e){
    $(this).addClass('active');
    $(this).find('.bubble').css('display','block');
  }).on('mouseleave', function(e){
    $(this).find('.bubble').css('display','none');
    $(this).removeClass('active');
  });
});

Durch die Schaffung einer Auswahl von der .glyph Klasse, kann ich nun die Funktion jedes Icons verändern. Mit jQuery kann ich sogar zwei Funktionen zusammenfügen – wenn man den Mauszeiger darüber platziert und wenn man ihn wegbewegt.

Also, wenn der Benutzer den Mauszeiger über ein Icon fährt, geben wir diesem div eine .active Klasse. Divs lieben aktive Klassen. Dies sollte das Graustufen-Hintergrund-Icon mit einer farbigen Version ersetzen.

Sobald der Mauszeiger des Benutzers das Icon oder die Popup-Blase verlässt, werden diese beiden Aktionen umgekehrt funktionieren. So wird die .active Klasse entfernt und die Blase wird ausgeblendet. Dieser Effekt konnte mit CSS3 erreicht werden, aber es wird nicht wirklich in älteren Browsern unterstützt. Ich mag die jQuery-Lösung und es funktioniert perfekt.

Zum Schluß

Der Popup-Blase-Effekt ist recht unterhaltsam und funktioniert super auf fast jeder Website, von Portfolios bis zu großen Unternehmen. Das eigentliche Ziel ist es, den Platz auf dem Bildschirm zu sparen und mehr als nur einen Link zu Eurem sozialen Profil zu geben. Wenn der Benutzer auf das Link-Icon klicken möchte, kann er oder sie nich nur Euren Profil checken, sondern bekommt auch eine zusätzliche Option Eure Inhalte zu teilen. Ladet gerne eine Kopie meines Quellcodes herunter und schaut, ob es für Eure künftigen Web-Design-Projekte nützlich sein kann.

Dieser Artikel wurde aus dem Englischen übersetzt. Das Original findest du hier: Hidden Social Media Sharing Popup Bubbles with jQuery Tutorial