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