Social-Sharin

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

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla