Versteckte Social-Media-Sharing Popup-Bubbles mit jQuery Tutorial

Social Media spielt heutzutage eine große Rolle für fast jedes Unternehmen. Mit dem richtigen Branding kann man seinen Social-Media-Account enorm marktfähig machen. Das ist der Grund, warum große Unternehmen wie Facebook so viele Investoren anziehen können - weil sich Menschen miteinander vernetzen und Informationen digital austauschen möchten. Und da ein altmodischer eingebetteter Social-Medien-Button ziemlich abgestanden wirken kann, würde ich vorschlagen, dass wir ihn heute gemeinsam ein wenig aufpeppen.

In diesem Social-Media-Sharing Bubbles-Tutorial möchte ich zeigen, wie man eine Popup-Blase mit Social-Media-Widgets erstellt. Die Blase wird durch jQuery angezeigt und kann eine beliebige Anzahl der Widgets von Twitter, Instagram, Facebook, YouTube usw. enthalten. Werft einen Blick auf meine Live-Demo, um das endgültige Design in Aktion zu sehen.


Live Demo
Quellcode runterladen

Legen wir los!

Zunächst erstellen wir ein neues HTML-Dokument und die Ordner für die CSS und JS-Dateien. Mein Stylesheet wurde styles.css benannt, aber Ihr könnt einen beliebigen Dateinamen wählen. Schnappt Euch auch eine lokale Kopie von jQuery und fügt sie in die Kopfzeile ebenso ein.

<!doctype html>

1
2
3
 
 
  <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>

Im Inneren des Seitenbodys werden die Dinge ein wenig chaotisch. Ich habe einen einzigen Außencontainer mit der ID #wrapper, der alle Inhalte beinhaltet. Dann habe ich einen gesamten Behälter für die Social-Media-Links mit Hilfe von class .social-links erstellt. Jeder Link ist eigentlich ein Social-Media-Icon aus der kostenlosen Metro Uinvert icon Sammlung.

Da die Icon-Links nebeneinander positioniert sind, habe ich sie im .clearfix Container schweben lassen. Es ist sehr wichtig sicherzustellen, dass ein weiterer Seiteninhalt ordnungsgemäß gelöscht wurde.

Social-Media-Sharing Bubbles

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

Nun ist es die Zeit Euch zu erklären, wie die Seite organisiert und aufgestellt ist. Alle Bilder sind im "css" Ordner gespeichert, weil jedes davon als CSS Hintergrund verwendet wird. Dies macht Ressourcenmanagement auf lange Sicht viel einfacher.

Ich verwende ein leicht angepasstes CSS-Reset vom Eric Meyer template. Für den Body-Hintergrund benutze ich Cream Dust tile aus Subtle Patterns.

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.

Wenn Ihr einen Blick auf die allgemeine .bubble Klasse werft, werdet Ihr feststellen, dass ich ein Hintergrundbild für den Schatten-Effekt benutze. Das Bild habe ich in zwei Bereiche aufgeteilt, damit der Icon-Link und das Popup-Fenster zusammenkommen, um eine nahtlose BG zu erstellen.

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;
}

Schließlich kommen wir zu den Icons-Stilen, die mit spezifischen Klassen erstellt werden. Jeder Icon-Stil verfügt über zwei unterschiedliche Effekte: das Original-Icon und das Icon mit dem Hover-Effekt. Der Hover-Effekt fügt einfach nur Farbe dem Icon zu und befindet sich exakt an der gleichen Stelle.

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