12 Temel Scroll-To-View Animasyon Trendleri
Hareketli sayfa öğeleri, açılış sayfalarında ve başlangıç web sitelerinde çok yaygındır. Ancak tasarım çevrelerinde her zaman konuşulmuyorlar çünkü “görüşte animasyon” fikri çok fazla ele alınmıyor.
Doğru bir açıklama gibi göründüğü için, kaydırmayı kaydırma görünümü kullanıyorum. Temel olarak siz sayfayı aşağı kaydırdıkça yeni animasyon öğeleri ortaya çıkar.
Her web sitesi için çalışan bir teknik değildir, ancak belirli düzenlere hoş bir dokunuş katmaktadır. Bu kaydırmadan görünüm animasyonlarının nasıl çalıştığını ve bunları neden kullanmaya çalıştığınızı göstermek için favorilerimden bazılarını burada yaptım.
1. Yarın Uyku
Üzerinde Yarın uyku Web sitesi birkaç iyi huylu animasyon efektleri fark edeceksiniz. Bunlar, yerleşimin her tarafına bakacak şekilde farklı metin ve CTA'ları soldurur.
İlginç olan şey, ilk kaydırmada bile görüntülerin ve arka plan alanlarının çoğunun tamamen görülebilir olmasıdır. Birçok web sitesi, metni görünür halde tutarken, görüntüleri ve ekran görüntülerini görüntülemek için solma animasyonu kullanır.
Bu küçük fark, metne, gözden kaybolduğu gibi dikkat çekmeye yardımcı olur. Ziyaretçilere göz atmanın dikkatini çekmek için harika bir yol.
2. Twist
Sıklıkla gördüğüm başka bir teknik ise, sayfanın içeriğinin çoğunu kaydırma animasyonları için hedefliyor.
Örneğin Twist uygulaması ana sayfası kaydırmada görünümde ve dışta canlandıran çeşitli sayfa segmentleri ve metin blokları içerir. Bunlar çok yumuşak bir solma etkisine sahiptir, bu yüzden henüz çok sert değiller.
Bazı ziyaretçiler gecikme nedeniyle rahatsız olabilirler ama bence çok uzun değil. Artı sadece bir kez canlandırır, böylece sayfanın altına vurursanız tüm animasyonlar yapılır.
3. İplik Uygulaması
Çok daha karmaşık animasyonlar için İplik Uygulaması lander. Bu çok parçalı animasyonlar ve hatta farklı açılardan gelen öğeler bile var.
Ekran görüntüsünün bazı demo görüntüleri yukarı doğru canlandırılırken, eşlik eden metin / BG desenleri görüntülemeye canlanıyor. Bu alternatif stil oldukça eşsiz ve sık gördüğüm bir şey değil.
Ancak açılış sayfası da inanılmaz derecede basit ve dikkat çekecek başka bir şey yok. Bu durumda, değişen animasyonlar güzel çalışır.
4. DashFlow
Bütün bu örneklerin içinden bence DashFlow En yaygın animasyon tekniklerini kullanır.
Bu lander, görüntüleri ve metinleri tek bir oturuşta görmek için canlandırır. Bu gerçekten basit ve tek bir sütun düzeni kullanır, böylece tüm içerik doğrusal bir yolla doğrudan akar.
Bu tasarım hakkında doğal olarak özel hiçbir şey, kaydırma işlemindeki öğelerin animasyonunu net bir şekilde belirleme yönteminin ötesinde. Benzer bir web siteniz varsa ve animasyonları basit tutmak istiyorsanız harika bir stil.
5. Quuu Tanıtın
Quuu Tanıtın animasyonları en az seviyede tutar ve sadece bunları CTA alanlarında kullanır.
Bunun dönüşümleri artırıp arttırmadığını söyleyemem ama bu amaç gibi görünüyor. Sayfayı ilk yüklediğinizde, en üst başlık, CTA'daki bir eğik animasyonla görüntülemeye başlar.
Siz aşağı kaydırırken sayfanın geri kalanının oldukça statik olduğunu fark edeceksiniz. Ancak altta, aynı eğik animasyonu canlandıran ve çalıştıran altbilginin üzerinde bir son CTA var.
Tüm sayfa boyunca çalışmayan, kaydırma efektli animasyon efektlerine sahip olduğunuzu göstermeye çalışır.
6. Qonto
İçin ana sayfa Qonto görüntülemeye kaydırma animasyonunu ilginç bir şekilde ele alır. Web sitesinin tamamında aynı türdeki animasyonları kullanır ve her bir öğeyi yana doğru görüntüleyerek canlandırır.
Sayfanın çoğunluğu için, uygulamanın özelliklerini açıklayan bazı içeriklerin üzerinde küçük bir grafik içeren simge bölümleri bulunur. Çok ince değil, aşırı ya da aşırı değil.
Ayrıca, başlığa başka birkaç animasyon stili de ekleyebiliyorsunuz. Bu sayfa sadece neyin güzel bir örneğidir web animasyonu yapabilir.
7. yürüyüş
İnce animasyonların bir örneği için check out Yürüyüş .
Sayfaları animasyonlu öğeler ve sabit öğeler arasında değişiyor. Ancak animasyon efektleri hızlıdır, böylece görüntülenebilir içeriği beklemeden rahatsız hissetmezsiniz.
Bu, herhangi bir kaydırma-animasyon efekti için tercihim. Her zaman güzel bir tekniktir, ancak zamanlamanın hızlı ve noktaya olması gerekir. Kimse içeriğin gelmesini beklemek istemez ve Hike bunu açıkça anlar.
8. Proje Fi
Harika UX'i bilen biri varsa, Google. Ve tüm ürünlerinde bir ton açılış sayfası var. Proje Fi bazı fantastik animasyonlarla örnek olmak.
Bunlar sadece simgeler için geçerlidir ve görünmemek üzere kaybolmazlar, aksine sayfanın altından açılırlar. Kaydettiğinizde, her küçük bölüm için yukarı doğru kayan simgeleri bulacaksınız.
Oldukça ince bir etki ama tasarıma biraz hayat katıyor. Ve sadece sayfanın görüntüleyicinin pozisyonuna dayanır, böylece en üste kaydırırsanız ve aşağı doğru hareket ederseniz aynı animasyon efektleri tarafından karşılanırsınız.
9. Baz
Base CRM homepage Temel CRM ana sayfası işte basit animasyonun mükemmel bir örneğidir. Bu site, görüntüleri yukarı ve izleyicinin göz çizgisine taşımak için özel animasyon efektleri kullanır.
Günlük gördüğüm açılış sayfalarının sayısına göre, beklediğimden çok tipik. Yeniden yaratmak için gerçekten karmaşık bir animasyon değil ve bu da deneyimi çok fazla etkilemiyor.
Tek isteğim, animasyonların biraz daha hızlı yüklenebilmesi. Ancak bunun ötesinde, bu, görüntülerin, çizmeyi çok temiz bir düzende kaydırılmasıyla animasyonlu bir görselleştirme örneği olduğunu düşünüyorum.
10. AnyList
Tüm en iyi mobil uygulamaların tanıtım için kendi web siteleri vardır. Ve en iyileri genellikle oldukça hoş bir animasyon stiline sahiptir.
AnyList Bir sayfada birkaç farklı tekniği bir araya getirir. Başlık resmi, kesme alanının altından hareket eder, ancak sayfadaki tek "hareketli" animasyondur.
Diğer her şey sadece görünmeye başlar ve hepsi de animasyon için oldukça hızlı bir yükleme süresi kullanır. Bu teknikler, sitenin başka bir yerinde, daha uyumlu bir his veren yerlerde kullanılır.
11. Ernest
İçin sayfa stili Ernest kapandığım diğer açılış sayfalarından biraz farklı.
Kullanır paralaks kaydırma animasyonları Farklı bölümlere sahip tek bir sayfa düzeninde hareket oluşturmak.
Bunlar, yukarı veya aşağı hareket edip etmediğinizi ve hangi hızda ilerlediğinize bağlı olarak değişir. Ayrıca, sayfanın farklı bölümlerine göre yoğunluk ile değişir.
Yan nokta gezinme menüsünü kullanarak gezinebilir ve bu, sayfa etrafında hızla farklı alanlara atlar. Paralaks sayfalarında sıkça göreceğiniz birkaç teknikten biri ve Ernest'in kalabalığın arasından sıyrılmasında kesinlikle yardımcı oluyor.
12. TaksiNet
Hareket halindeki tam sayfa animasyonlara göz atmak için TaxiNet Web sitesi.
Simgelere, metne, görüntülere ve hatta arka plan stillerine bağlı kaydırma tabanlı animasyon efektlerinin bir smorgasbord'su. Bireysel sayfa arka plan renkleri, kullanıcı ile canlandırılır, kesinlikle tipik bir teknik değil, kesinlikle ilginçtir.
Bu stili beğendiyseniz, kendi açılış sayfanıza benzer bir yaklaşım uygulayabilirsiniz. Sadece animasyonları hızlı ve hızlı tuttuğunuzdan emin olun çünkü hiç kimse düzgün animasyonlarınızın yüklenmesini beklemek istemez.
Ancak eğer doğru yaparsanız, bu kaydırma-ilerletme öğeleri, herhangi bir açılış sayfasına hoş bir etki katmaktadır.
