Gelişmiş JQuery Etkilerini Gösteren 20+ Demos
Kısa bir süre önce Flash, web tasarımcıları tarafından bir web sitesine etkileşim eklemek için kullanılan başlıca teknolojilerden biriydi.
İPad'in piyasaya sürülmesinden bu yana, Flash Player'ın eksikliğinden dolayı, web geliştirme dünyasında jQuery, Ajax ve diğerleri gibi Flash'a alternatif teknolojileri kullanmak için bir hızlanma var.
Flash hala birçok durumda harika olan çok güçlü ve kullanışlı bir araç olmasına rağmen, web tasarımcılarının Flash'ta oluşturmaya alışkın oldukları bazı etkiler, jQuery kullanılarak kolayca uygulanabilir.
Burada, Flash ile rekabet edebilecek gelişmiş efektler ve etkileşimler oluşturmak için jQuery'nin gücünü gösteren 21 çevrimiçi demo vardır.
1. Çevirin! Bir jQuery eklentisi
Bu demo, bir unsuru kendi x veya y ekseninde 360 derece döndürebilen popüler kart çevirme tekniğini taklit eder.
2. jQuery Quicksand eklentisi
Bu, hoş fade-in / fade-out ve animasyon efektleriyle bir sayfada bulunan bir dizi öğeyi / simgeyi sıralamak için harika bir eklentidir.
3. ImageFlow
Bu resim görüntüleyici, Apple'ın çeşitli ürün ve uygulamalarına aşina hale gelen CoverFlow arayüzüne benzer.
4. Flash yerine jQuery ile etkileşimli bir harita oluşturma
Bu demo, ilgi çekici bir arayüz oluşturmak için jQuery'nin Ajax ile gücünü birleştiriyor.
5. jQuery ve CSS3 ile Slideout İpuçları
“+” Sembollerine tıklamak, güzel ve pürüzsüz bir animasyon efekti ile ek bilgileri ortaya çıkarır.
6. Yakınlaştırıcı Galerisi
Bu demoda, normal bir statik gibi görünen şey Resim Galerisi bir görüntü üzerinde gezinirken çok katmanlı bir zoom efekti kullanarak bazı ekstra etkileşimler verilir.
7. jQuery Circulate
Bu demo, bir sayfanın etrafındaki bir resmi çizmenin çok kullanılan Flash etkisini gösterir - hepsi jQuery kullanılarak yapılır.
8. Photo Zoom Out Etkisi
Bu demo aldatıcı bir şekilde basit görünüyor, ancak daha fazla incelemelerden sonra uzaklaştırma etkisinin karmaşıklığına birkaç katman var.
9. jQuery ile Sürme Kutuları ve Başlıklar
Burada, sadece Flash geliştiricileri için ayrılan bir teknik olan jQuery kullanılarak nasıl güçlü geçişlerin oluşturulabileceğini göreceğiz.
10. CSS3 Işık Kutusu Galerisi
Bu eklenti, özellikle sosyal medya için yazılmış gibi görünüyor. “Paylaşım kutusunun” üstüne bir fotoğrafın sürüklenmesi ve bırakılması, AJAX aracılığıyla bir kullanıcı tarafından Flickr, Twitter, Facebook ve diğer sitelerdeki bir fotoğrafın paylaşılmasına olanak tanıyan bir API'yi çağırmak için bir arabirim olan bir modal pencereyi açacaktır.
11. jQuery ve CSS ile Photoshoot Etkisi Yapımı
Bu demo ilk bakışta göz şeker gibi görünse de, AJAX veya HTML5 yerel depolama ile eşleştirildiğinde, büyük görüntülerle çalışmak için çok güçlü bir araç olabilir.
12. Harika Kabarcık Gezintisi
Burada geliştirici, çok çekici ve etkileşimli bir menü oluşturmak için renk geçişlerini ve animasyonu iyi bir şekilde kullanmaktadır.
13. Güzel Arka Plan Görüntüsü Gezinme
Bu tanıtımda, her kullanıcı eylemi, kullanıcının ara yüze tamamen oturmasını sağlayan birkaç geçişi tetikler.
14. AviaSlider
AviaSlider, standart bir kaydırıcı arabirimi gibi görünmesi için klasik Flash benzeri geçiş efektlerini kullanır.
15. Arka Plan Resmi Slayt Gösterisi
Animasyonlu arka planlar, Flash'ın web tasarımında baskın olduğu alanlardan biridir. Bunun yerine jQuery'yi kullanan bir örnek.
16. Slayt gösterisi kaydırma
Tipik slayt gösterisi arayüzünde bir başka benzersiz özellik. Buradaki yazar, ara yüzleri renklendirmek ve göze çarpmasını sağlamak için diyagonal gezinmeyi ekler.
17. jqFancyTransitions
Bu eklenti, fotoğraflarınızı fantezi Flash benzeri geçiş efektleriyle bir slayt gösterisi olarak görüntülemek için kullanılabilir.
18. iCarousel - Yatay görüntüler kaydırıcısı
Geçişlerin gerçekten göze çarpmasını sağlamak için sadece bir gevşeme dokunuşu ekleyen başka bir slayt gösterisi. Bu demoda seksi Mac ürünlerini sergilemeyi tercih etmeleri şaşırtıcı değil.
19. jQuery ile Etkileşimli Bir Resim Oluşturma
Bu demo, çok sayıda ekran alanının bulunduğu web sitelerinden yararlanmak için kullanılabilir. Web sitesinin bir bölümüne tıkladığınızda, tıklanan bölümle ilgili daha fazla bilgi görüntüleyen bir modal kutu ortaya çıkar.
20. Bulut Yakınlaştırma
Buna benzeyen bir eklenti, e-ticaret düşünülerek tasarlanmıştır. Bulut Yakınlaştırma uygulaması kolaydır ve kullanıcının deneyimini gerçekten geliştirebilir.
21. Apple-benzeri Retina Etkisi
İPhone, iPod touch veya iPad kullanan herkes, alana uzun bir süre dokunduğunuzda ekranda küçük bir alanı büyütecek olan “Retina Görünümü” hakkında bilgi sahibidir. Bu demo, masaüstü için bu etkiyi uygular.
Sadece WDD için derlenmiş Kalim Filosu . 6 yılı aşkın deneyime sahip profesyonel bir web tasarımcısı ve blog yazarıdır. Web, blog yazımı, yazılım geliştirme ve sosyal medya arasında zaman ayırırken yaptığı tutkudur. Web, mobil ve masaüstü için yeni uygulamaları kullanmayı ve geliştirmeyi seviyor.
Flash'ın gücüne rakip olabilecek jQuery efektlerinden başka harika örnekler biliyor musunuz? Müşterilerinizin istediği zaman jQuery efektlerini Flash üzerinden önerirsin mi? Lütfen aşağıdaki görüşlerinizi ve örneklerinizi paylaşın!