Cara Membuat Sliding Icon Social Media

Dalam kesempatan kali ini saya akan membahas cara membuat efek sliding pada icon social media, kenapa saya ingin membahasnya karena dalam artikel ini saya juga memanfaatkan tentang sticky menu, dimana posisinya tidak berubah atau dalam posisi fixed saat content di scroll kebawah, sahabat bisa ikutin langkah-langkah membuatnya tetap disini.Langkah pembuatanya sangat mudah coba sahabat siapkan struktur html yang berisi beberapa icon dari sosial media ,bisa gunakan dari fontawesome supaya lebih cepat dalam menggunakan ,dan tambahakan paragraph untuk isi content lainnya. sahabat bisa simak pada code dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Membuat Sliding Icon Social Media.</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	
<div class="social-media">
  <ul>     
    <li class="google">
      <i class="fa fa-google" aria-hidden="true"></i>
      <div class="sliding">
        <p>google</p>
      </div>
    </li>

    <li class="facebook">
      <i class="fa fa-facebook" aria-hidden="true"></i>
      <div class="sliding">
        <p>facebook</p>
      </div>
    </li>
    
    <li class="twitter">
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <div class="sliding">
        <p>twitter</p>
      </div>
    </li>
    
    <li class="instagram">
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <div class="sliding">
        <p>instagram</p>
      </div>
    </li>   
    
    <li class="whatsapp">
      <i class="fa fa-whatsapp" aria-hidden="true"></i>
      <div class="sliding">
        <p>whatsapp</p>
      </div>
    </li>
  </ul>
</div>
	

  <div class="content">
  <h3>Sliding Icon Social Media</h3><br>
  <p>The sliding social bar will stick to the screen when you scroll.</p> <br>
   <!-- bisa menggunakan text dummy dari lorewm ipsum saja -->
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,</p><br>
  <!-- bisa menggunakan text dummy dari lorewm ipsum saja -->
  <p>Some text Lorem ipsum dolor sit amet,</p><br>
  <!-- bisa menggunakan text dummy dari lorewm ipsum saja -->
  <p>Some text Lorem ipsum dolor sit amet,</p><br>
  <!-- bisa menggunakan text dummy dari lorewm ipsum saja -->
  <p>Some text Lorem ipsum dolor sit amet,</p><br>
  <!-- bisa menggunakan text dummy dari lorewm ipsum saja -->
  <p>Some text Lorem ipsum dolor sit amet,</p><br>
  <!-- bisa menggunakan text dummy dari lorewm ipsum saja -->  
  <p>Some text Lorem ipsum dolor sit amet,</p>
</div>
</body>
</html>

kenapa saya membuat beberapa paragraph diatas karena nanti supaya terlihat apakah benar icon sosial media tidak berpindah posisi.

Langkah selanjutnya tambahkan style css supaya lebih menarik lagi hasilnnya seperti dibawah ini:

@import url('https://fonts.googleapis.com/css?family=PT+Mono&display=swap');
* {
  margin: 0;
  padding: 0;
}
 
body {
  font-family:'PT Mono', monospace;
  height:1500px;
  background: #F5F5F5;
}
 
// class ini sebagai parent dari icon fontawesome 
.social-media {
  position: fixed;
  top: 30%;
  right: 0;
  transform: translate(-50%, -50%);
}
 
ul {
  list-style: none;
}
 
ul li {
  width: 50px;
  height: 50px;
  position: relative;
  background: #e59500;
  margin: 10px 0;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
 
ul li .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff;
}
 
ul li.facebook{
  background: #3b5998;
}
 
ul li.twitter{
  background: #00aced;
}
 
ul li.instagram{
  background: #ff039b;
}
 
ul li.google{
  background: #dd4b39;
}
 
ul li.whatsapp{
  background: #4dc247;
}
 
ul li.facebook div.sliding{
  background: #627aac;
  opacity: 0.9;
}
 
ul li.twitter div.sliding{
  background: #7fd5f6;
  opacity: 0.9;
}
 
ul li.instagram div.sliding{
  background: #fe2e8e;
  opacity: 0.9;
}
 
ul li.google div.sliding{
  background: #ef6b5b;
  opacity: 0.9;
}
 
ul li.whatsapp div.sliding{
  background: #82d47e;
  opacity: 0.9;
}
 
.sliding {
  content: "";
  position: absolute;
  top: 0;
  right: 50px;
  width: 0px;
  height: 50px;
  background: #eebb5c;
  border-radius: 3px;
  transition: all 0.5s 0.3s ease;
}
 
.sliding p {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 50px;
  opacity: 0;
  transition: all 0.6s ease;
}
 
ul li:hover .sliding {
  width: 180px;
  transition: all 0.2s ease;
}
 
ul li:hover .sliding p {
  opacity: 1;
  transition: all 1s 0.2s ease;
}
.content {
  margin:10px 90px 0;
  font-size: 20px;
  text-align: justify;
}

Jika sudah jangan lupa simpan ,dan coba jalankan pada browser masing-masing untuk melihat hasilnya apakah seperti berikut ini tampilannya :

Saya rasa cukup pembahasan tentang Cara Membuat Sliding Icon Social Media ,semoga bermanfaat dan sampai berjumpa lagi dengan pembahasan lainnya.

terima kasih.