Takipçi sayısını gösteren sosyal profil tasarımı

Takipçi

Şimdiye kadar görmeye alışık olduğumuz sosyal medya  ikonlarının çok farklı bir örneğini inceliyorsunuz. Daniel Herrera tarafından jQuery ve Css3 kullanılarak hazırlanmış olan bu sosyal medya  örneğinde mouse  ikonların üzerine geldiğinde  ikonların arkaplanı kırmızı  renk oluyor  ve  beğen bölümü de aşağı kayarak  kaç kişinin sayfayı beğendiğini yada  takip ettiğini gösteriyor.Takipçi sayısı otomatik olarak listelenmiyor  bunu elle  girmeniz  gerek.  Sosyal  paylaşım butonları Facebook, Google Plus ve Twitter ikonlarından oluşuyor sadece.  Başka  sosyal  ağ adreslerini  eklemek  isteğinize  kalmış.

Kullanım

  • Head etiketleri  arasına eklemeniz gereken bölümler.

Js ve Css  dosya adresleri :

<link href="stil.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

JavaScript :

<script>
	$(document).ready(function() {
		  $('.social').hover(
			  function() {
			      $(this).find('.shutter').stop(true, true).animate({
					    bottom: '-36px'
					 },
					 {
					 	duration: 300,
					 	easing: 'easeOutBounce'
					 });
			    },
			    function () {
				    $(this).find('.shutter').stop(true, true).animate({
					    bottom: 0
					 },
					 {
					 	duration: 300,
					 	easing: 'easeOutBounce'
					 });
				}
		    );

		});
</script>
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

	<div class="wpr">
		<a class="social" id="twitter" href="#" title="">
			<div class="icon"></div>

			<div class="shutter_frame">
				<div class="shutter">
					<div class="number">1189</div>
					<div class="bar"></div>
					<div class="text">Follow</div>
				</div>
			</div>
		</a>

		<a class="social" id="google" href="#" title="">
			<div class="icon"></div>

			<div class="shutter_frame">
				<div class="shutter">
					<div class="number">421</div>
					<div class="bar"></div>
					<div class="text">+1</div>
				</div>
			</div>
		</a>

		<a class="social" id="facebook" href="#" title="">
			<div class="icon"></div>

			<div class="shutter_frame">
				<div class="shutter">
					<div class="number">973</div>
					<div class="bar"></div>
					<div class="text">Like</div>
				</div>
			</div><!-- / .shutter_frame -->
		</a>
	</div><!-- / .wpr -->
Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-09 tarihinde yayınlandı,Toplam 1927 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...