JQuery ile Parallax Efekti Yapma (Parallax Effect With JQuery)
Merhaba Arkadaşlar;
Apple İOs 7 işletim sistemini yayınladığında yeni bir kavram ile karşılaştık Parallax.
Peki ne işe yarıyordu parallax efekti; Telefonu oynattığınız da ön planda yer alan uygulama ikonları sabit kalırken, arka plan hareket ediyordu. Her ne kadar ilk çıktığında insanlar üzerinde bazı sorunlar yaşatsa da[1], güzel bir efekt.
Şimdi biz ne yapacağız konusuna gelelim. Bir sayfa hazırlayacağız burada bir yazı olacak ve arkaplana koyduğumuz resim mouse hareketine göre hareket edecek. Yani diye biliriz ki, mouse hareketine göre resmin hareket etmesini yapacağız.
Bunun için öncelikle JQuery'yi sayfamıza ekleyelim. JQuery'yi sayfanıza eklerken https://code.jquery.com/jquery-3.1.1.min.js linkini kullanabilirsiniz.
Sayfamıza jQuery Linkini ekledikten sonra ise, parallaxEfekti olarak id verdiğimiz bir div tanımlayıp bu div'in style özelliğine ise gerekli atamaları yapacağız. Sonrasında bu div içerisinde başka bir div oluşturup içerisine de yazı yazacağız. Şimdi kodlara geçelim.
Şimdi ise JQuery kodlarımızı yazalım;
Bu kodları head taglarının arasına yazabilirsiniz.
Son olarak da kodlarımızı derli toplu verelim;
Sağlıcakla.
Apple İOs 7 işletim sistemini yayınladığında yeni bir kavram ile karşılaştık Parallax.
Peki ne işe yarıyordu parallax efekti; Telefonu oynattığınız da ön planda yer alan uygulama ikonları sabit kalırken, arka plan hareket ediyordu. Her ne kadar ilk çıktığında insanlar üzerinde bazı sorunlar yaşatsa da[1], güzel bir efekt.
Şimdi biz ne yapacağız konusuna gelelim. Bir sayfa hazırlayacağız burada bir yazı olacak ve arkaplana koyduğumuz resim mouse hareketine göre hareket edecek. Yani diye biliriz ki, mouse hareketine göre resmin hareket etmesini yapacağız.
Bunun için öncelikle JQuery'yi sayfamıza ekleyelim. JQuery'yi sayfanıza eklerken https://code.jquery.com/jquery-3.1.1.min.js linkini kullanabilirsiniz.
Sayfamıza jQuery Linkini ekledikten sonra ise, parallaxEfekti olarak id verdiğimiz bir div tanımlayıp bu div'in style özelliğine ise gerekli atamaları yapacağız. Sonrasında bu div içerisinde başka bir div oluşturup içerisine de yazı yazacağız. Şimdi kodlara geçelim.
Bu yazı burada sabit dururken arkaplan oynayacak. İşte bunun adı parallax.
Şimdi ise JQuery kodlarımızı yazalım;
Bu kodları head taglarının arasına yazabilirsiniz.
Son olarak da kodlarımızı derli toplu verelim;
Juery ile Parallax Efekti Yapma Bu yazı burada sabit dururken arkaplan oynayacak. İşte bunun adı parallax.
Sağlıcakla.
[1] https://www.technopat.net/2013/10/02/ios-7-kullanicilari-hasta-ediyor/
Örneğin çalışır haline https://jsfiddle.net/aliKarahisar/p5wyLscy/2/ adresinden ulaşabilirsiniz.
Örneğin çalışır haline https://jsfiddle.net/aliKarahisar/p5wyLscy/2/ adresinden ulaşabilirsiniz.
Yorumlarınızı esirgemezseniz sevinirim :), eğer burada ki çözümler veya bilgileri işinize yaradıysa sizde aşağıda bulunan butonlar yardımıyla paylaşırsanız başkaları da yararlanabilir. :)
