Ali @mintik
9 Haziran 2021 1:26

0

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

Ş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ış.

Download

Demo

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