arkadaşlar şu sitedeki bazı şeyleri merak ediyorum;

www.volleyball.ca

1. şahane bir smooth-scroll kulalnımı var. hangi plugini kullandıklarını öğrenmek istedim ama bulamadım.

2. aynı şekilde aşağıdaki elementler scroll ettikçe scrollun tersine doğru hareketleniyor. muhteşem yumuşaklıkta bir parallax kullanımı var. ben bu iş için parallox kullandım ama safari'de "tıkır tıkır" hareket ediyor, rahatsız edici bir şekilde frame atlamalar var yani. burada hangini kullandıklarını yine bulamadım.

3. yine ve yine elementler belirli bir fade effect ile geliyor. bunun için wow ile animate.css'i kullandım ama buradaki yumuşaklıkta veremedim o efektleri. tarayıcının scroll performansını düşürdü adeta.

ya buradaki tekniklerin hepsi çok yumuşak ve çok kaliteli. bunlar hangi eklentilerle çalışmışlar?

 

tam cevap değil ama builtwith.com den bakabilirsiniz. belki işinize yarayacak bir ipucu verir.

cdiyez

kendileri yazmışlar gibi duruyor,

www.volleyball.ca sayfasını okuyabilirsin çözebilirsen.

üst menü normal css transition var, gerçi

ractive.js.org plug'inleri de kullanılmış.

github.com

ocanal

github.com scroll bu

www.volleyball.ca

npm ile yüklemişler gibi.

qobel

smooth-scrollbar kullandıgımda animasyonları trigger edemedim bu sefer de. çünkü ortada aslında birscrollbar kalmıyor. translate3d ile div'i yukaru aşağı çekiştiriyor :S

whatdreamsnevercome

2. sorunuz icin;
animate ettirdiginiz property onemli. bazi degerler cpu bazilari gpu ile isleniyor gibi bi durum vardi bildigim kadariyla. bu da o animasyonun ne kadar smooth calistigini etkiliyor. ornegin bu sitede de oldugu gibi transform property'lerini kullanirsaniz daha akici olur animasyonlar. yani ornegin y-ekseninde bir hareket icin margin kullanmak yerine transform: translateY veya translate3d kullanirsaniz cok daha akici olur animasyon.

hjarteblod
1

mobil görünümden çık