Kelebek

jQuery toogle ve Css3 kullanılarak hazırlanmış  bir sayfa açılma animasyonu. Daha çok bir  kelebeğin kanat çırpışlarını  andıran örnek. Tahmin ettiğiniz  gibi  bir  sayfalama örneği değil malesef. İki  adet  yapraktan oluşan bir çalışma sadece. Örneği  bi yerlerde kullanabilirmisiniz  bilmem ama hoşuma  gittiği için sizlerle paylaşmak istedim. Belki  birileri evirip çevirip başka şekillerde  kullanır.

Aslında  bu şekilde  değilde  ekranda bir resim olsa ve tıklandığında  tek bir tarafı  katlanıp altında resmin açıklamaları olsaydı kullanıma hazır bir örnek olurdu. Bu gibi  daha birçok  örnek  üretebilirsiniz. Biraz hayal gücünüze birazda kod bilginize bağlı birşey. Arşivinizde kesinlike  bulundurmanızı öneririm. Belki olurda birgün işinize yarar.

Kullanım

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

jQuery adresi : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 JavaScript : 

<script>
$().ready(function() {
  $("body").click(function() {
    $("body").toggleClass("open");  
  });

  $("body").toggleClass("open");

});
</script>

 Css : 

body {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  -webkit-perspective-origin: center;
  -moz-perspective-origin: center;
  -ms-perspective-origin: center;
  -o-perspective-origin: center;
  perspective-origin: center;
  color: #111;
  font: 0.6em georgie,serif;
  text-align: center;
}
body.open div.left {
  -webkit-transform: rotateY(15deg);
  -moz-transform: rotateY(15deg);
  -ms-transform: rotateY(15deg);
  -o-transform: rotateY(15deg);
  transform: rotateY(15deg);
  background: #aaa;
  color: #111;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border-color: #666;
}
body.open div.right {
  -webkit-transform: rotateY(-15deg);
  -moz-transform: rotateY(-15deg);
  -ms-transform: rotateY(-15deg);
  -o-transform: rotateY(-15deg);
  transform: rotateY(-15deg);
  background: #ccc;
  color: #333;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border-color: gray;
}
div.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  background-image: linear-gradient(top, #331111 0%, #000000 100%);
  background-image: -o-linear-gradient(top, #331111 0%, #000000 100%);
  background-image: -moz-linear-gradient(top, #331111 0%, #000000 100%);
  background-image: -webkit-linear-gradient(top, #331111 0%, #000000 100%);
  background-image: -ms-linear-gradient(top, #331111 0%, #000000 100%);
}
div.left {
  width: 300px;
  position: absolute;
  top: 50%;
  height: 300px;
  margin-top: -150px;
  right: 50%;
  background: #111;
  z-index: 10;
  -webkit-transform-origin: 100% center;
  -moz-transform-origin: 100% center;
  -ms-transform-origin: 100% center;
  -o-transform-origin: 100% center;
  transform-origin: 100% center;
  -webkit-transform: rotateY(88deg);
  -moz-transform: rotateY(88deg);
  -ms-transform: rotateY(88deg);
  -o-transform: rotateY(88deg);
  transform: rotateY(88deg);
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2) inset;
  border: 1px solid black;
  border-radius: 10px 0 0 10px;
}
div.right {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 300px;
  margin-top: -150px;
  background: #555;
  z-index: 9;
  -webkit-transform-origin: 0 center;
  -moz-transform-origin: 0 center;
  -ms-transform-origin: 0 center;
  -o-transform-origin: 0 center;
  transform-origin: 0 center;
  -webkit-transform: rotateY(-88deg);
  -moz-transform: rotateY(-88deg);
  -ms-transform: rotateY(-88deg);
  -o-transform: rotateY(-88deg);
  transform: rotateY(-88deg);
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  border: 1px solid black;
  border-radius: 0 10px 10px 0;
}
div.content {
  padding: 10px;
}
p {
  text-align: justify;
}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="wrapper">
  <div class="left">

    <div class="content">
    <h1>Lorem Lipsum</h1>

    <p>Quisque tincidunt</p>
    </div>
  </div>
  <div class="right">
    <div class="content">
    <p> Quisque tincidunt et nibh ut ornare. </p>
    </div>
  </div>
</div>

Bu Yazıyı Paylaş

 

1 yorum "Tıklandığında açılıp kapanan sayfa"

  1. muharrem dedi ki:

    siteniz cok guzel boyle bir sıteyı yenı ve rastgele kesfettıgım ıcın uzgunum
    emeklerınız ve bunları paylastıgınız ıcın tesekkur ederım bu sıte ıcın malum programı kapattıgımı bıldırırım 🙂

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