Tıklandığında açılıp kapanan sayfa

Post by

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>

Comments (1)

  1. muharrem 22 Temmuz 2016

    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 🙂

Leave a Reply to muharrem Cancel reply