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

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 : 

 JavaScript : 

 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 : 

Lorem Lipsum

Quisque tincidunt

Quisque tincidunt et nibh ut ornare.



1 Comment
  1. muharrem 4 years ago
    Reply

    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 Comment

Your email address will not be published.

You may also like

Trend