Adobe Muse'da kaydırma efektleri. Kauçuk düzeni veya paralaks etkisi

Bu makalede, Adobe Muse'da sayfa öğelerine dürtme ve opaklık kaydırma efektlerinin nasıl uygulanacağını öğreneceksiniz.

Sayfa öğelerine kaydırma efektleri uygulama

Kaydırma Efektleri paneli, sayfanın nasıl kaydırıldığına bağlı olarak hareketi, opaklığı, Slayt Gösterisi widget'ını ve Adobe Edge Animate içeriğini kontrol etmek için dört sekme içerir. Sabitlenmiş öğelere, %100 genişliğe ayarlanmış nesnelere veya Katmanlar paneli kullanılarak üst üste bindirilmiş nesnelere farklı kaydırma efektleri kombinasyonları uygulayarak çok çeşitli çekici efektler elde edebilirsiniz.

Kaydırma Efektleri panelini kullanarak hareketli kaydırma efektlerini uygulayın

Kaydırma Efektleri paneli, aynı panele benzer bir arayüze sahiptir, ancak Tarayıcı Doldurma ve Arka Plan Doldurma efektleri için. Kaydırma Efektleri panelindeki Taşı sekmesini kullanarak bir sayfa öğesine kaydırma efektleri uygulamak için şu adımları izleyin:

1. Uygulamada Tasarım görünümüne gidin ve Sayfa > Sayfa özellikleri .
2. Sayfayı kaydırılacak kadar uzun yapmak için Minimum Yüksekliği en az 2000 piksele ayarlayın.
3. Değişikliklerinizi kaydetmek ve Sayfa Özellikleri iletişim kutusunu kapatmak için Tamam'a tıklayın.
4. Aynı adı taşıyan menüdeki Doldur sekmesini kullanarak, döşemeli bir arka plan görüntüsü veya bölmeden bir görüntü ekleyin. Ayrıca yalnızca düz veya gradyan bir renkle doldurmayı da seçebilirsiniz.
5. Kaydırma efektleri özelleştirme panelini açmak için Pencere > Kaydırma Efektleri'ni seçin.

1. Kaydırma efektlerini etkinleştirme: Kaydırma Efektleri paneli, Taşı sekmesini görüntüler (en solda). Sayfada bir öğe seçiliyken Taşı onay kutusunu seçin.

   TAVSİYE. Bu onay kutusu seçildiğinde, öğenin üst kenarında bir T tutamacı göründüğünü unutmayın. T şeklindeki tutamaç, öğeye uygulanan kaydırma efektinin başlangıç ​​konumunu gösterir. Kaydırma efekti, ziyaretçi sayfayı kaydırırken orijinal konumuna ulaştığında çalışmaya başlar.

   T tutamacı, varsayılan olarak öğenin üzerinde görüntülenir. Ancak, istediğiniz öğenin üst kenarıyla aynı hizada konumlandırmak için tıklayıp yukarı veya aşağı sürükleyebilir veya tutamacı aşağı sürükleyip öğenin altına yerleştirebilirsiniz.

2. Ana konumu ayarlamak için T çubuğunu hareket ettirin: Başlangıç ​​konumunu ayarlamak için T-kolunu istediğiniz konuma sürükleyin. Bu, kaydırma sayfası T-tutamacının tepesine ulaşmadan önce ve sonra gerçekleştirilecek hareketi özelleştirmenize olanak tanır.

   Ayrıca, Taşı sekmesini seçtiğinizde Kaydırma Efektleri panelinde ortalanmış Ana Konum kutusuna sayısal bir değer girebilirsiniz. Bu örnekte, orijinal konum 200 piksele ayarlanmıştır.

   T-kolun konumu, elemanın orijinal konumunu belirtir. Sayfada dikey olarak kaydırdığınızda, İlk Taşıma bölümündeki ayarlar uygulanır: eleman Tasarım görünümündeki konumuna göre konumlandırılır.

   Ziyaretçi, öğenin orijinal konumunun altındaki bir bölüme gitmek için sayfayı kaydırdığında veya bağlantı bağlantısını tıkladığında, Son Taşıma bölümündeki ayarlar geçerli olur.

   İlk Hareket bölümünde yatay ve dikey hareket ok butonları ve hareket hızı kontrol ayarları bulunmaktadır.

3. Dikey ilk hareketin ayarlanması: Yukarı veya aşağı ok düğmelerinden birine basarak dikey hareket yönünü (yukarı veya aşağı) seçin. Öğenin sayfa kaydırma hızına göre ne kadar hızlı hareket edeceğini ayarlamak için dikey yön düğmelerinin yanındaki kutuya bir değer girin. 0 değeri girerseniz, eleman dikey olarak hareket etmeyecektir. Hızı bir ondalık nokta kullanarak yüzde olarak da belirtebilirsiniz. Örneğin, "0.5" değerini girerseniz, öğe sayfa kaydırma hızının yarısı kadar dikey olarak hareket eder.
4. İlk hareketi yatay yönde ayarlama: Öğenin orijinal konumuna ulaşana kadar hareket edeceği yönü ayarlamak için sol veya sağ ok düğmelerine basarak öğenin yatay (sola veya sağa) hareketini ayarlayın. Yatay hareket oklarının sağındaki kutucuğa yatay hareket hızı için bir değer belirtin. Elemanın bu düzlemde hareket etmemesini istiyorsanız yatay hızı "0" olarak ayarlayın.
5. Son Hareket bölümünde hareketin yönünü ve hızını ayarlamak için 7. ve 8. adımları tekrarlayın.

Aşağıdaki örnekte, orijin 500 piksele ayarlanmıştır. Sayfa tarayıcıda kaydırıldığında, öğe sayfa kaydırma hızına eşit bir hızda orijinal konumuna aşağı kaydırılır. Orijinal konuma ulaşıldığında, eleman orijinal konumuna yerleştirilir. Sayfa orijinal konumunu geçtiğinde, öğe sayfa kaydırıldığından iki kat daha hızlı sağa hareket edecektir.

Kaydırma efekti için hareket ayarlarını uygulama

1. Sayfayı kaydırma efektleri uygulanmış olarak önizlemek için Görüntüle'yi tıklayın veya Dosya> Sayfayı Tarayıcıda Önizleme'yi seçin. Öğenin hareketini görmek için tekrar aşağı ve yukarı kaydırın.

Kaydırma Efektleri Panelini Kullanarak Kaydırma Opaklığı Efektlerini Uygulayın

Bu bölüm, ziyaretçi tarafından gerçekleştirilen sayfa kaydırma eylemlerine bağlı olarak bir öğenin görünürlüğünün görüntülenme şeklini değiştirmek için nasıl dönüştürüleceği hakkında bilgi sağlar. Bu teknik, sayfayı bir sonraki bölüme kaydırırken öğelerin görünmesini veya kaybolmasını sağlayarak içeriği göstermek veya gizlemek istediğinizde kullanışlıdır. Kaydırma Efektleri panelinin Opaklık sekmesini kullanarak saydamlığı etkileyen kaydırma efektlerini sayfa öğelerine uygulamak için bu adımları izleyin.

1. Tasarım Görünümünde bir sayfayı düzenlerken, Sayfa Özellikleri iletişim kutusunda Min. yükseklik ”, çoğu monitörün ortalama yüksekliğinden daha yüksektir (örneğin, 2000 piksel). Kaydırılacak kadar uzun olduğundan emin olmak için sayfaya içerik de ekleyebilirsiniz.
2. Tasarım görünümünde, sayfada bir dikdörtgen veya metin çerçevesi çizin.
3. Seçili öğeye bölmeden döşemeli bir arka plan görüntüsü veya bir görüntü eklemek için Dolgu sekmesini veya aynı ada sahip menüyü (veya Doldurma panelini kullanın) kullanın veya düz veya degrade dolgu rengi seçin. (Ayrıca sayfaya bir Slayt Gösterisi widget'ı ekleyebilir veya bir Adobe Edge Animate OAM dosyası yerleştirebilirsiniz.)
4. Bir öğe seçiliyken, Kaydırma Efektleri panelinde Opaklık sekmesine (soldan ikinci sekme) tıklayın ve ardından Opaklık onay kutusunu seçin.

Bu parametreyi etkinleştirdikten sonra, öğe üzerinde farklı türde bir işaretçi görünecektir. T-tutamacının Taşıma sekmesinde orijini ayarlamak için kullanılmasına benzer şekilde, T-tutamacına da tıklanabilir ve öğenin üst kenarıyla (veya herhangi bir parçanın üst kısmıyla) aynı hizada olacak şekilde öğenin üzerine konumlanmak üzere sürüklenebilir. elemanın) ve onu elemanın altına yerleştirdi. Opaklık tutamacı, başlangıç ​​konumunu ve soldurma konumları 1 ve 2'yi ayarlamak için birbirinden bağımsız olarak sürükleyebileceğiniz üç farklı parçadan oluşur.

1. Başlangıç ​​konumunu ayarlamak için işaretçinin (kare) ortasına tıklayın ve sürükleyin. Aşağıdaki örnekte, orijin 150 piksele ayarlanmıştır.

1. İşaretçinin (daire) üst kısmına tıklayın ve sayfada istediğiniz konuma sürükleyin. Aşağıdaki örnekte, Soldurma Konumu 1, 100 piksele ayarlanmıştır.

Öğenin şeffaflığını etkileyecek olan ilk solma konumunu ayarlamak için daire tutamacının sol üst kısmına tıklayın ve sürükleyin.

1. İşaretçinin (dairenin) altını tıklayın ve sayfada istediğiniz konuma sürükleyin. Aşağıdaki örnekte, Soldurma Konumu 2, 200 piksele ayarlanmıştır.

Öğenin şeffaflığını etkileyecek ikinci bir solma konumu ayarlamak için daire tutamacının sağ üst kısmına tıklayın ve sürükleyin.

Not.

Gerekirse, ilgili parametrelere aynı değerleri atayarak yavaş yavaş konum işaretçilerinin yanında ana konumu belirleyebilirsiniz. Sürükleyip bırakmak yerine, Kaydırma Efektleri panelindeki uygun kutularda bu seçeneklerin her biri için sayısal değerler de belirtebilirsiniz.

Bu örnekte, öğe ilk başta tamamen saydamdır ve daha sonra, sayfayı kaydırırken orijinal konumuna ulaştığında, tamamen saydam hale gelene kadar (orijinal konuma karşılık gelen Opaklık şu anda %100'e ayarlanmıştır) yavaş yavaş solmaya başlar. Sayfa orijinal konumunun altına kaydırıldıktan sonra, öğe kademeli olarak tekrar şeffaf hale gelir ve 200 piksel işareti geçildiğinde görünümden kaybolur.

Kaydırma Efektleri panelinin Opaklık sekmesinde opaklık yüzdesini (%0 tam şeffaflıktır) ayarlayın.

1. Sayfayı kaydırma efektleri uygulanmış şekilde önizlemek için Önizleme'ye tıklayın veya Dosya> Sayfayı Tarayıcıda Önizleme'yi seçin. Sayfayı kaydırırken öğenin opaklığındaki değişikliği görmek için tekrar aşağı ve yukarı kaydırın.
2. Göz atmayı bitirdiğinizde Muse'a dönün veya sayfayı düzenlemeye devam etmek için Tasarım düğmesini tıklayın.

Kaydırma Efektleri panelinin Slayt Gösterisi sekmesiyle çalışma

Kaydırma hareketi efektinin diğer bir yaygın kullanımı, kaydırmanın görüntüleri bir slayt gösterisinde görüntülerken aynı anda uygulanmasıdır. Bir sayfaya bir Slayt Gösterisi widget'ı ekleyebilir ve ardından, bir ziyaretçi belirli bir konuma her kaydırdığında bir slayt gösterisi görüntüsünün otomatik olarak gösterilmesi gibi efektler uygulamak için Kaydırma Efektleri panelinin Slayt Gösterisi sekmesini kullanabilirsiniz.

Bu bölümdeki ayarlara erişmek için Slayt Gösterisi sekmesine (soldan üçüncü sekme) tıklayın.

Bu ayarların en yaygın kullanımı, Slayt Gösterisi pencere öğesini bir sayfaya sabitlemektir. Genellikle, bu pencere öğesi (Seçenekler menüsü kullanılarak) yalnızca en büyük kapsayıcıyı gösterecek ve hem küçük resimleri hem de Önceki ve Sonraki düğmelerini gizleyecek şekilde yapılandırılır.

Tam ekran slayt gösterisi bu efekt için çok iyi çalışır, ancak site tasarımına bağlı olarak herhangi bir Slayt Gösterisi widget'ı kullanılabilir.

Slayt Gösterisi widget'ına kaydırma efektleri uygulamak için aşağıdaki adımları izleyin.

1. Sayfa Özellikleri iletişim kutusunda Min. yükseklik "sayfayı kaydırmak için yeterince uzun yapmak için. Ayrıca sayfayı daha uzun hale getirmek için gerekli miktarda malzemeyi sayfaya ekleyebilirsiniz.
2. Slayt Gösterisi pencere aracını Pencere Öğeleri Kitaplığından sayfaya sürükleyin. Seçenekler menüsünde slayt gösterisi seçeneklerini ayarlayın. (Bir Slayt Gösterisi pencere aracına kaydırma efektleri uyguladığınızda, Sonraki, Önceki ve küçük resim düğmeleri genellikle devre dışı bırakılır.)
3. Seçenekler menüsünde Görüntüler'in yanındaki klasör simgesini tıklatarak pencere aracına görüntü ekleyin. İstediğiniz resimlerin bulunduğu klasöre gidin ve bunları galeriye ekleyin.
4. "Sabit" öğesini kullanma kontrol panelinde, widget'ı tarayıcı penceresindeki geçerli konumuna sabitleyin. Bir slayt gösterisi seçiliyken, altı sabitleme konumundan birine tıklayın.

Sayfayı kaydırırken Slayt Gösterisi pencere aracını tarayıcı penceresinde sabit kalmasını istediğiniz yere yerleştirin.

Sabitlenmiş slayt gösterinizi ekleyip yapılandırdıktan sonra, kaydırma efektleri eklemeye hazırsınız.

Slayt Gösterisi widget'ı seçiliyken, Kaydırma Efektleri panelindeki Slayt Gösterisi sekmesinde, Slayt Gösterisi onay kutusunu seçin.

Slayt Gösterisi pencere aracını seçin ve Kaydırma Efektleri panelinde Slayt Gösterisi onay kutusunu seçin.

Bir slayt gösterisi için bu onay kutusunu seçtikten sonra Tasarım görünümünde bir ana konum işaretçisi görüneceğini unutmayın. Orijinal kaydırma konumları için ayarları güncellemek için tutacağın sol veya sağ tarafını sürükleyebilir veya İlk Kaydırma Konumu kutusuna sayısal değerler girebilirsiniz. Değeri artırmak veya azaltmak için Kaydırma Efektleri panelindeki yukarı ve aşağı ok tuşlarını da kullanabilirsiniz.

Kaydırma Efektleri panelinin Slayt Gösterisi sekmesinde, slayt gösterinizin oynatılmasını kontrol etmek için farklı yollar kullanmanıza izin veren iki düğme bulunur. Slayt gösterisi otomatik olarak oynatılacak veya siz sayfayı kaydırdıkça görüntüler arasında geçiş yapacak şekilde ayarlanabilir.

İlk yol, istenen başlangıç ​​konumunu ayarlamak ve ardından "Otomatik Başlat" onay kutusunu seçmektir.

Sayfa orijinal konumun altına indiğinde (veya ziyaretçi bağlantı etiketi bağlantısını tıkladığında ve sayfadaki orijinal konumun altındaki bölüme gittiğinde), slayt gösterisi oynatılmaya başlar. Otomatik oynatma seçeneği etkinleştirilirse, ziyaretçi orijinal konumunu geçene veya sayfadan ayrılana kadar görüntüler arasında geçiş yapılır.

Yukarıdaki resimdeki örnekte, slayt gösterisi, sayfa 100 piksele (veya orijinal konumun altına) kaydırıldığı andan itibaren oynamaya başlar. Sayfayı orijinal konumun üzerine kaydırırsanız (99 piksel veya daha az), slayt gösterisinin oynatılması durur.

Slayt Gösterisi pencere aracını kontrol etmenin ikinci yolu, başlangıç ​​konumunu ayarlamayı ve Her Slayt Değiştir radyo düğmesini ayarlamayı içerir. Bu durumda, sayfa kaydırılırken slayt gösterisindeki görüntülerin ne sıklıkta değiştiğini belirtmek için bu anahtarın altındaki alanda piksel sayısı da ayarlanır.

Örneğin, bir Slayt Gösterisi widget'ı, sayfadaki diğer içerikler arasında gezinirken tek bir yerde sabit kalması için uzun bir sayfaya sabitlenebilir. Her Slaytı Değiştir seçeneği için sayısal bir değer belirleyerek, slayt gösterisini, sayfa belirli sayıda karakter aşağı kaydırıldığında sonraki görüntünün gösterilmesi için yapılandırabilirsiniz.

Bu örnekte, orijinal konum 200 piksele ayarlanmıştır. Sayfa üstteki 200 piksel işaretinin altına kaydırıldığında slayt gösterisi oynamaya başlayacak ve sayfa kaydırıldığında her 30 pikselde bir sonraki resim gösterilecektir.

Slayt gösterisini, sayfa belirli bir mesafede (piksel olarak) aşağı kaydırıldığında sonraki resmi gösterecek şekilde ayarlar.

Adobe Edge Animate sekmesi Kaydırma Efektleri paneliyle çalışma

Adobe Edge Animate, HTML5 tabanlı web animasyonları oluşturmaya yönelik sezgisel bir tasarım aracıdır. Edge Animate ile grafiklerin ve sembollerin hareket döngüsünü kullanan kompozisyonlar oluşturabilirsiniz. Adobe Edge Animate ile oluşturulan animasyonlar, Muse site sayfalarınızda yayınlanmak üzere OAM dosyaları olarak dışa aktarılabilir. Bu animasyonları bir tarayıcıda oynatmak için eklenti gerekmez.

Adobe Edge Animate'te animasyonlar oluştururken, bir öğeyi programın aşamasına sürüklemeniz ve hareketlerini kontrol etmek için zaman çizelgesini kullanmanız gerekir. Öğeleri doğrudan zaman çizelgesine eklemenin yanı sıra, kendi dahili zaman çizelgelerini kullanarak oynayacak alt öğelerle iç içe öğeler de oluşturabilirsiniz. Adobe Edge Animate bileşeniyle çalışma hakkında daha fazla bilgi için Adobe Edge Animate ürün sayfasına bakın. Ayrıca Adobe TV sitesindeki Adobe Edge Animate video eğitimine de göz atın.

Adobe Edge Animate kaydırma hareketi bileşenini kullanmaya başlamak için öncelikle bu amaç için özel olarak bir kompozisyon tasarlamanız gerekir. Ana zaman çizelgesine yerleştirilen animasyonların davranışını değiştirmek için OAM dosyalarına kaydırma efektleri uygulanabilir. Animasyonunuzu, ana zaman çizelgesi yalnızca sayfa kaydırıldığında hareket etmesi gereken öğeleri içerecek şekilde tasarlamanız zorunludur (diğer tüm animasyon öğeleri iç içe sembolik zaman çizelgelerinde olmalıdır). Bu yaklaşım, etkileşimli animasyonlar oluşturmanıza olanak tanır. Ziyaretçiler sayfayı kaydırdıkça, kaydırma efekti ayarları yalnızca ana zaman çizelgesinde animasyonlu öğelerin oynatılmasına uygulanır.

Adobe Muse web sitenize eklenecek animasyonlar oluşturma hakkında daha fazla bilgi için bkz. Adobe Edge Animate İçeriği Ekleme.

Kaydırma Efektleri panelinde Adobe Edge Animate sekmesine başlamak için bu adımları izleyin.

1. OAM dosyasını Adobe Edge Animate'ten dışa aktarın ve site dosyaları klasörünüze kaydedin.
2. Muse'u açın ve bir sayfayı Tasarım görünümünde açmak için çift tıklayın. Min'i güncelleyerek sayfanın kaydırılacak kadar uzun olduğundan emin olun. "Sayfa Özellikleri" iletişim kutusunda veya sayfaya gerekli miktarda malzeme ekleyerek "yükseklik".
3. Dosya> Yerleştir'i seçin ve site klasöründe istediğiniz OAM dosyasına gidin.
4. Kaydırma Efektleri panelini açın. Bu bölümdeki ayarlara erişmek için Adobe Edge Animate sekmesine (soldan dördüncü sekme) tıklayın.
5. OAM dosyası seçiliyken Edge Animate onay kutusunu seçin.

Edge Animate animasyonunu, sayfa belirli bir işarete kaydırıldığında oynatılmaya başlayacak veya sayfa her kaydırıldığında (piksel olarak) kareleri değiştirecek şekilde ayarlayın.

Bu örnekte, orijinal konum 50 piksele ayarlanmıştır. Bu konumu değiştirmek için T-tutamacını sürükleyebilir veya Başlangıç ​​Konumu kutusunda istediğiniz değeri belirtebilirsiniz.

Bir başlangıç ​​konumu belirleyerek, animasyon oynatmayı iki şekilde kontrol edebilirsiniz.

• Otomatik başlatma: Bu seçenek seçildiğinde, ana zaman çizelgesindeki kare sayısı ne olursa olsun, tarayıcı sayfayı kaydırırken orijinal konumuna ulaştığında ana zaman çizelgesindeki animasyon oynamaya başlar. Animasyon, sayfa orijinal konumunun üzerinde bir noktaya kaydırılana kadar oynamaya devam eder.
• Çerçeveler arasında geçiş yap: Bu seçenek seçildiğinde, sayfa belirli sayıda piksel kaydırıldığında animasyon kare kare oynatılır. Örneğin, 3000 piksel yüksekliğinde bir sayfanız varsa ve parametre 10 olarak ayarlanmışsa, sayfa her 10 pikselde bir kaydırıldığında animasyon ana zaman çizelgesinde birer birer oynatılacaktır. Ziyaretçi sayfayı daha hızlı kaydırırsa, animasyon daha yüksek kare hızında oynatılır.

Not.

Adobe Edge Animate kompozisyonundaki iç içe yerleştirilmiş veya temel zaman çizelgesiyle ilgisi olmayan tüm animasyonlu nesneler, sayfa kaydırıldığında değişmeden kalır. Bu nedenle, statik bir arka plana sahip olmayı veya ziyaretçinin sayfa kaydırma kontrolleriyle etkileşiminden bağımsız olarak sürekli hareket eden iç içe öğeler üzerinde döngü oluşturmayı seçebilirsiniz.

1. Kaydırma Efektleri panelinin Edge Animate sekmesinde ayarları yaptıktan sonra Dosya > Sayfayı Tarayıcıda Önizleme'yi seçin (veya Önizleme düğmesini tıklayın). Animasyonlu Edge Animate içeriğinin (ana zaman çizelgesine eklendi) oynatıldığını görmek için yukarı ve aşağı kaydırarak sayfa davranışını test edin.
2. Değişiklik yapmanız gerekiyorsa Muse'a dönün (veya Tasarım düğmesini tıklayın) ve Kaydırma Efektleri panelinde istediğiniz ayarları güncelleyin.

Bir web sayfasında uygulanan ve tarayıcı penceresine göre sayfanın kaydırılmasının yönü ve/veya konumuyla ilgili olan tüm senaryoları ve teknikleri kaydırma efektleri olarak adlandıracağız.

Ne yazık ki, çeşitli kaydırma efektlerini adlandırmak için henüz bir endüstri standardı yoktur. Bu nedenle, bunların en popülerlerine bakalım ve onlara anlam için en uygun olan kendi isimlerimizi verelim.

1. Paralaks.

Kaydırırken sayfanın katmanlarını farklı hızlarda hareket ettirmenin etkisi. Genellikle, paralaksın optik temsiline göre, gözlemciye yakın olan katmanlar, uzaktaki katmanlardan daha hızlı hareket etmelidir.

Referans olarak, Wikipedia'daki tanım: "Parallax (Yunanca παραλλάξ, παραλλαγή'den," değişim, değişim ") - gözlemcinin konumuna bağlı olarak, bir nesnenin uzak bir arka plana göre görünen konumunda bir değişiklik."

3. Yapışkan

Tekniğin özü, kaydırma sırasında bir öğenin, üst sınırı pencerenin üst kenarına (görünüm alanı-a) ulaşana kadar ebeveynine göre konum: gibi davranmasıdır. Daha fazla aşağı kaydırmada, öğe, üst öğesinden ayrılmış ve pencerenin kenarına "yapışmış" gibi konum: statik gibi davranır. Örneğin, demo, üst gezinme çubuğunun "yapışkan" bir efektle uygulandığı.

Bu teknik, kaydırmanın konumuna ve yönüne bağlı olarak öğeleri ekranın altına, soluna veya sağına "yapıştırmak" için de kullanılabilir.

Şunu söylemeliyim ki position: sticky CSS özelliği (javascript kullanmadan bu tür efektleri kolayca uygulamanıza izin verir) CSS Positioned Layout Module Level taslağının taslağında açıklanmaktadır. Ancak tarayıcı desteği hala çok sıkı.

4. Ters yapışkan.

Efekt temelde bir öncekine benzer, ancak öğe aşağı kaydırırken pencere kenarlığının arkasına gizlenir ve yalnızca geriye (yukarı) kaydırıldığında görünür. Bununla biraz oynayarak bunun neyle ilgili olduğunu anlamak çok daha kolay olacaktır. demo .

5. İlerleme çubuğu.

Kaydırırken kullanıcının sayfadaki mevcut konumunu görselleştirmek için çeşitli senaryolar. Örneğin, bu demo sayfanın altında komik bir kaydırma göstergesi var.

6. Akordeon.

Bu senaryo, tutarlı bir uygulama olduğunu varsayar yapışkan-Kaydırırken sayfa bölümlerinin başlıklarına etki eder. Karşınızda demo

7. Menü Casusu.

Bu komut dosyası, twitter önyüklemesinde kaydırma casusu olarak bilinir. Bu, örneğin bu resimde olduğu gibi kaydırmanın konumuna bağlı olarak gezinme menüsü öğelerinin vurgulanması anlamına gelir. demo .

8. Sahneleme (Sahne).

Pencerenin boyutuyla karşılaştırılabilir bir bloğun sayfanın görünür alanına göre sabitlendiği en karmaşık ve etkili senaryo. Sayfayı kaydırma sürecinde, bloğun kendisi sabit kalır, ancak kaydırmanın konumu, içindeki belirli bir senaryonun gelişimini etkiler. Bunlar karakter hareketleri, görünen veya kaybolan içerik, animasyonlar vb. olabilir. Bakmak demo .

Kaydırma efektli herhangi bir komut dosyasını uygularken sık karşılaşılan sorunlar.

Başta, kaydırma efektleri yazarken, çok sayıda faktörü ve miktarı dikkate almanız gerekir:

• Tüm belgenin boyutu.
• Komut dosyasında yer alan öğelerin boyutları ve konumları ile bazı durumlarda kapsayıcıları.
• Kaydırma sırasında belgenin görünen kısmının (görünüm alanı) boyutu ve geçerli konumu.
• Kaydırma yönü.
• Duyarlı pencere yeniden boyutlandırma

ikinci olarak, senaryoları açıklamak için matematiksel hesaplamalar oldukça büyüktür ve bunların karmaşıklığı, etkilerin sayısı ile artar.

Üçüncüsü, mobil cihazlarda her şey kötü ve frenli çalışıyor. Javascript başlangıçta daha yavaştır. Buna ek olarak, mobil tarayıcılar kaydırma sırasında javascript yürütülmesini engeller.

Dördüncü Google'da ne arayacağınızı asla bilemezsiniz. Çoğu durumda, bunun veya bu kaydırma efektinin adının ne olduğu net değildir. Bu durumda, hazır bir çözüm bulmak oldukça zordur.

Scroolly nedir?

Scroolly, kaydırma efektleri oluşturmak ve yapılandırmak için size basit bir sözdizimi sağlayan bir jquery eklentisidir. Öğrenmesi kolaydır, oldukça hafiftir ve istediğiniz kadar karmaşık senaryolar oluşturmanıza olanak tanır. Yukarıda verilen tüm demoların Scroolly kullanılarak yapıldığını söylemeliyim!

Kurallar, sınırları ve kapsamları.

Yani kaydırma işleminde sayfanın kaydırma konumuna bağlı olarak elementlere bazı kurallar uygulamamız gerekiyor. Bunun için bu kuralların kapsamının belirlenmesi gerekmektedir.

Neyin tehlikede olduğunu anlamayı kolaylaştırmak için soyut bir örnek vereceğim:

1. Kaydırırken, kapsama girip çıkarken bazı öğeleri düzgün bir şekilde göstermek ve düzgün bir şekilde gizlemek gerekir. Bir öğe, üst kenarı pencerenin görünür alanının altından 100 piksel yukarıdayken görünmeye başlamalı ve alt kenarı, pencerenin görünür alanının alt kısmından 100 piksel yukarıda olduğunda tam olarak görünmelidir. Kaybolma ile aynı mantık, sadece simetrik bir ters sırada.
2. Öğe, görünür alanın merkezinin ± %30'u içinde olana kadar kaydırılırken 180 ° döndürülmelidir.

Bunu duymak çok zor, değil mi? Bir göz atsan iyi olur.

Belgenin görünen alanını “viewport” olarak adlandıracağımız konusunda anlaşalım. Ne yazık ki, bu kelimenin kısa bir Rusça analogunu bulamıyorum :)

Sonuç olarak burada kuralın 3 alanını 6 sınırla ayırt edebiliriz. Onları tarif edelim:

1. maçlar görünümün alt sınırıyla (öğe görünmeye başlar)
2. maçlar görünümün alt kenarlığı ile (öğenin görünmesi sona erer)
3. Görünüm alanının merkezinin %30 altında bir nokta, maçlar elemanın merkezi ile (eleman dönmeye başlar)
4. Görünüm alanının merkezinin %30 üzerinde bir nokta maçlar elemanın merkezi ile (eleman dönerek biter)
5. Öğenin üst sınırının altındaki 100 piksel nokta maçlar görünümün üst sınırı ile (öğe solmaya başlar)
6. Öğenin üst sınırının üzerindeki 100 piksel nokta maçlar görünümün üst sınırıyla (öğenin rengi soluyor)

Şimdi düşünün, tüm bu mantığı açıklamaya nereden başlarsınız? Bu kadar basit bir tek eleman senaryosunda bile, hesaplamalar belge boyutunu, görüntü alanı boyutunu, görüntü noktası konumunu, öğe boyutunu, öğe konumunu, kaydırma konumunu içerir ... kahretsin, nasıl kafamız karışmaz?

Scroolly kurtarmaya koşar.

Scroolly'nin güzelliği, bu kural kapsamlarının her birinin bu açıklayıcı sözdizimi kullanılarak tanımlanmasıdır:

1. el-top = vp-bottom - 100px (eleman görünmeye başlar)
2. el-bottom = vp-bottom - 100px (öğenin görünmesi sona erer)
3. el-center = vp-center + 30vp (eleman dönmeye başlar)
4. el-center = vp-center - 30vp (eleman dönüşü bitirir)
5. el-top = vp-top + 100px (eleman kaybolmaya başlar)
6. el-bottom = vp-top + 100px (öğenin solması sona erer)

Ve tüm senaryo şu şekilde açıklanmaktadır:

$ (". my-element"). scroolly ([(from: "el-top = vp-bottom - 100px", to: "el-bottom = vp-bottom - 100px", cssFrom: (opaklık: ". 0 "), cssTo: (opaklık:" 1 ")), (from:" el-center = vp-center + 30vp ", to:" el-center = vp-center - 30vp ", cssFrom :(" transform ": "döndür (0deg)"), cssTo :( "dönüştür": "döndür (180deg)")), ('den: "el-top = vp-top + 100px", to: "el-bottom = vp-top + 100px ", cssFrom: (opaklık:" 1 "), cssTo: (opaklık:". 0 "))]);

Burada vp görünüm alanıdır ve el öğedir. Ayrıca belge için soyutlamalar doc ve öğe kabı için con kullanabilirsiniz. Ve şimdi bu konuda daha ayrıntılı ve resimlerle ...

Her birinin, scroolly sözdiziminde kullanılabilecek pivot noktaları vardır:

görünüm alanı: vp-üst, vp-merkezi, vp-alt
eleman: el-üst, el-merkez, el-alt
konteyner: con-top, con-center, con-bottom
belge: belge üstü, belge merkezi, belge altı

Aşağıda, kaydırma kuralı kapsamlarına ilişkin bazı örnekler verilmiştir:

belgeler

Scroolly eklentisiyle ilgileniyorsanız, resmi belgeleri kontrol ettiğinizden emin olun. Ve var ve hatta 2 versiyonda sunuluyor:

1. Tembel ve sabırsızlar için - github.com/chayka/jQuery.Scroolly/wiki/Short-Story
2. Rahat ve düşünceli olanlar için - github.com/chayka/jQuery.Scroolly/wiki/Long-Story

Ve en önemli şey: Konferansımızdaki videoyu izlediğinizden emin olun.

Bir kullanıcı bir web sayfasının bölümlerine göz attığında meydana gelen bazı tuhaf etkileri bir araya getirdik. Efektlerden bazıları oldukça aşırıdır, ancak amacınız etkileyici bir kullanıcı arayüzü oluşturmaksa çok faydalı olabilirler.

Tüm animasyonlar Velocity.js ile oluşturulmuştur.

Not

Bu efektler, kullanıcının bölümler listesinde kolayca gezinebileceği küçük cihazlarda görünmez. Etkileri mobil cihazlarda test ettik ve performans düşüktü, bu yüzden onları daha büyük ve daha güçlü cihazlarla sınırlamaya karar verdik.

Nasıl çalışır

Animasyon uygulamak veya kaydırma yakalamayı etkinleştirmek/devre dışı bırakmak için, yalnızca aşağıdakilere uygulanan veri animasyonu ve veri ele geçirme türlerini kullanın. ... Veri animasyonunun desteklediği değerlerde / scaleDown / döndürme / galeri / yakalama / opaklık / sabit / paralaks yoktur. Veri ele geçirme açık veya kapalı olmasına rağmen.

yapının oluşturulması

HTML yapısıöğelerin bir listesidir

hem de navigasyon. Her bölümün içine sadece başlığı koyuyoruz. Animasyon Sabit veya Paralaks olduğunda arka plan görüntüsünü de ayarlıyoruz. İçeriğinizi her bölüm> div içine eklemekten çekinmeyin.

Sayfa Kaydırma Efektleri

Bölüm 2

stil ekleme

Tüm dönüşümler Velocity.js kullanılarak jQuery'de yapıldı, bu nedenle CSS'yi açıklamanın bir anlamı yok. Her biri için yüksekliği 100vh olarak ayarladık

görünümü tamamen kaplamak için ayrıca arka plan ve görüntü renklerini şu şekilde ayarlarız: seçici: nth-of-type () ve veri türleri.

Cd bölümü (yükseklik: 100vh;) .cd bölümü: türünün ilk örneği> div (arka plan rengi: # 2b334f;) .cd bölümü: türün nth'i (2)> div (arka plan rengi: # 2e5367;) .cd bölümü: nth-of-tür (3)> div (background-color: # 267481;) .cd-section: nth-of-type (4)> div (background-color: # fcb052 ;) .cd bölümü: nth-of-type (5)> div (arka plan rengi: # f06a59;) .cd-section> div (arka plan konumu: merkez merkez; arka plan tekrarı: tekrar yok; arka plan- boyut: kapak;) .cd-bölümü: ilk-tür> div (arka plan resmi: url ("../ img / img-1.jpg");) .cd-bölümü: nth-of-type ( 2)> div (arka plan resmi: url ("../ img / img-2.jpg");) .cd bölümü: nth-of-tür (3)> div (arka plan resmi: url (". ./img/img-3.jpg ");) .cd bölümü: nth-of-type (4)> div (arka plan resmi: url (" ../ img / img-4.jpg ");) .cd bölümü: nth-of-type (5)> div (arka plan resmi: url ("../ img / img-5.jpg");)

Olay işleme

Veri yakalamanın devre dışı mı yoksa devre dışı mı olduğuna bağlı olarak iki farklı yaklaşım kullandık.

Veri kaçırma = kapalı olduğunda, her bölüm görünüm alanına göre konumuna göre canlandırılır. Örneğin scaleDown animasyonu için bölüm> div öğelerinin opacity, scale, translateY ve boxShadowBlur değerlerini değiştiriyoruz:

// gerçekBlock, animasyon olduğumuz bölümdür var offset = $ (pencere) .scrollTop () - gerçekBlock.offset() top, windowHeight = $ (pencere) .height (); if (offset> = -windowHeight && offset 0 && offset

Veri kaçırma = açık olduğunda, Velocity UI Pack'in kayıt işlevini kullanarak her animasyon için özel efektler tanımlarız. Örneğin, ölçek efekti (animasyon scaleDown) için şunları kullandık:

$ .Velocity .RegisterEffect ("scaleDown", (defaultDuration: 800, çağrılar: [[(opacity: "0", scale: "0.7", boxShadowBlur: "40px"), 1]]));

Paralaks etkileri alakalı kalır. Bu, arka plan görüntüsünün ön plan öğelerinden daha yavaş hareket ettiği özel bir tekniktir. Bu efekt her tür web sitesine uygulanabilir, oluşturması eğlencelidir ve kullanıcı katılımını artırır. Bu efektin her sayfada kullanılması gerekmez - paralaks kaydırma, kullanıcıların dikkatini CTA'ya veya diğer içeriğe çeken harika bir ana sayfa tekniğidir.

Paralaks efektleri, diğer tekniklere göre derinlik, mesafe ve daha güçlü bir üç boyutluluk duygusu yaratır.

Öte yandan, paralaks efektleri her zaman mobil cihazlarda çalışmaz.

Aşağıda, paralaks efektleri ve stilleri için 5 ilginç seçenek sunacağım.

1. Değişiklikleri gösteren animasyon

Projedeki değişiklikleri göstermek için paralaks efektini kullanın. Hareket katmanları, zaman veya mekan parçalarını iletebilir.

Hepsinden iyisi, paralaks efektleri, bir web sitesinin içeriğiyle çalışırken değişikliklerden bahseder.

Yukarıdaki örnekte, Porsche Evolution, her görüntünün ön planında yeni bir araba modeli ile arka planda zaman içindeki değişiklikleri gösterir. Müzik de on yılla birlikte değişir.

Sitenin tasarımı, kullanıcıları bir sonraki arabanın nasıl görüneceğini merak ettiğiniz için kaydırmaya devam ediyor. Bu teknik hem kronolojik hem de ters kronolojik sırada çalışır - daha önceki modelleri izlemeye döndüğünüzde müzik bile çağa uygun bir parça çalar.

Sonance, uzaydaki değişimi göstermek için bir paralaks efekti kullanır. Burada, paralaks etkisi genel gezinme düzeninin bir parçasıdır ve kullanıcıya hiyerarşide nerede olduğunu gösterir.

2. Kaydırma kullanımını teşvik eder

Paralaks etkisinin etkileşim yaratabilmesinin nedeni, kaydırma kullanımını teşvik etmesi ve kullanıcıyı tasarımla daha uzun süre etkileşime girmeye zorlamasıdır.

Paralaks efektlerini kullanan çok sayıda tasarım, kullanıcının tasarımla etkileşime nasıl başlayacağını ve bundan sonra ne yapacağını anlamasına yardımcı olan küçük ama dikkat çekici bir ipucu içerir.

Etkileşimi teşvik etmek için, Walking Dead web sitesi farklı bir şey kullanıyor - kaydırma, kullanıcıyı çizgi roman tarzı yatay ekranlarda yönlendiriyor.

3. Hareket ve renk

Paralaks efektlerini kullanmanın en ilginç yollarından biri, çeşitli içerik “panellerinde” renk kullanmaktır. Renk değişimi ve animasyon yeni bir şey ifade edebilir. Ayrıca, renk kullanıcıların dikkatini çok iyi çekiyor.

Werkstatt web sitesi, ana tasarım için beyaz ve griyi ve öğeler ile metin arasındaki paralaks katmanlarını kullanır ve fareyle üzerine gelme her projeye hayat ve renk getirir.

4. Bilgi asimilasyonunun iyileştirilmesi

Paralaks efektleri, karmaşık bilgilerin özümsenmesini basitleştirmeye veya büyük metin bloklarının okunabilirliğini artırmaya yardımcı olabilir. Yukarıdaki örnekler, bu kavramın nasıl uygulanabileceğine dair iki farklı örnek göstermektedir.

Melanie David'in sitesinin "hakkında" sayfasında uzun bir giriş var ve soldaki "Hakkında" gezinme öğesi, metin kayarken hareket etmiyor. Metin bittiğinde sayfanın her iki bölümü de yeni bir bölüme gider. Bu, metin bloğunun öngörülebilir içerik parçasından daha uzun olduğu durumlar için harika bir çözümdür.

Le Duc restoran, menünün her bölümü için ayrı bloklar kullanır. Animasyon oldukça basittir ve bilgileri daha iyi özümsemeye yardımcı olur.

5. Dijital gerçekliği görselleştirin

Paralaks efektlerini uygulamanın en iyi yollarından biri, kullanıcının göremediklerini görselleştirmesine yardımcı olmaktır. Tasarımcılar, daha gerçekçi bir deneyim yaratmak için 3D ve paralaks animasyonunun bir kombinasyonunu giderek daha fazla kullanıyor.

Paralaks animasyonu kullanan bir sitenin klasik bir örneği Seattle Space Needle sitesidir. Ziyaretçiye şehrin kuşbakışı görünümünden nasıl görüneceğini göstermek için yukarı kaydırmayı kullanırlar.

Paralaks kaydırma, sizi binaya götürür, CTA mesajlarını ve yüksekliği gösteren mükemmel bir gezinme çubuğunu gösterir. Bu tasarım, kullanıcıya animasyonlu efektler kullanılmadan hayal edilmesi zor olacak bir şey gösterir.

Çözüm

Paralaks efektleri modaya uygun ve eğlenceli olsa da, tüm projeler için çalışmayacaktır. Bazı kullanıcıların bu kadar çok animasyon içeren bir sitede gezinmeyi zor bulacağını da unutmamak gerekir.

Paralaks efektlerini kullanmadan önce kullanıcılarınızı ve tercihlerini tanıyın. Ana sayfadan başlayın ve her şeyin olması gerektiği gibi çalışıp çalışmadığını görmek için analizlere bakın (sitede geçirilen süreyi artırmak, her şeyin yolunda gittiğine dair iyi bir işaret olacaktır).

İçeriğinizle iyi çalıştığında paralaks kullanın.

Carrie Cousins ​​tarafından çevrildi

HTML5'in (World Wide Web'de içerik yapılandırmak ve sunmak için yeni bir standart) ve CSS3'ün (nesnelerin görünümünü tanımlamak için geliştirilmiş bir dil sürümü) ortaya çıkması ve yaygın olarak kullanılmasıyla, daha ilginç ve akılda kalıcı tasarımlar oluşturmak mümkün hale geldi. istisnasız herkes için öğeler, elbette dahil olmak üzere İnternet sayfaları ve açılış sayfaları.

Paralaks kaydırma (İngilizce paralaks kaydırmadan - web tasarımında: perspektifteki arka plan görüntüleri ön plandaki öğelerden daha yavaş hareket ettiğinde, öncelikle bilgisayar grafiklerinde kullanılan özel bir teknik) - bu, modern web tasarımının ileri teknolojilerinden biridir. Ancak aşırı kullanımı sitenin kullanılabilirliğini azaltabilir ve dönüşüm oranlarında düşüşe neden olabilir.

Bugün sizin için benzersiz bir paralaks sitesi seçimi hazırladık ve bu etkiyi kullanan en başarılı açılış sayfalarının örneklerini tanımanızı tavsiye ediyoruz. Bazıları sanat eseri gibi görünüyor, bazıları olağanüstü bir formatla şaşırtıyor, ancak hepsi dikkatinize değer. Şimdi örneklerle paralaks ve ne olduğuna bir göz atalım.

1. Düz tasarım ve Gerçekçilik

Hangi taraftasın?

Microsoft, Google ve Apple gibi devlerin de yardımıyla (düz tasarım) göz açıp kapayıncaya kadar sezonun hiti ve yüzlerce haber kaynağı ve blogda tartışma konusu oldu. Web tasarımı alanında bir tür atılım olarak algılandı ve büyük olasılıkla gerçekten öyleydi. Etkileşimli ajans sağlam, müşterilerinin dikkatini sanal tasarımın gelişimindeki bu oldukça sıra dışı aşamaya çekmeye karar verdi ve interaktif bir yolculuk hazırladı ve ona “Düz tasarım ve gerçekçilik” adını verdi. Bütün bunlar, elbette, yeni bir etkinin yardımı olmadan yaratıldı.

Ajansın yaratıcı direktörü Alejandro Lazos, en önemsiz şeyin bir HTML5 oyunu ile paralaks kaydırmayı birleştirmek olduğunu açıklıyor.

"Bütün eylemin sürekli olmasını istedik ve kullanıcılar durmadan baştan sona hareket edebildi. Bunu yapmak için, url üzerinden veri aktarımını ve arka planda verileri güncellemeyi mümkün kılan ve kullanıcıya gecikmeden uygun sayfayı sağlayan ajax teknolojisini kullandık. "

2. Sony

Böyle bir şey görmediniz!

Muhtemelen dünyadaki hiç kimse ürünlerini Sony'nin yaptığı gibi sunmayı bilmiyor. Sunulan açılış sayfası, Sony'nin “Taşıyın” kampanyasının bir parçasıdır ve hakkında şunları söylerler:

"Bize bir şekilde kobay deniyordu, çünkü tanıttığımız tüm yenilikler rakip şirketler tarafından hemen benimsendi. Bizi incitmek istediler ama biz bunu iltifat olarak aldık. Sanatçıların ve mühendislerin işbirliği her zaman bir deneydir, ancak ancak o zaman yarın ileriye doğru bir adım atacağınızı umabilirsiniz."

3. Kosta Kahvesi

Graphite Digital, şirketin ürünlerini en anlamlı şekilde temsil eden illüstrasyonları seçti

Bu etkileyici tek sayfalık sayfa, Brighton ajansı Graphite Digital'in beynidir. Yakın geçmişte ajans, Costa Coffee ürününü parlak ve ilginç bir şekilde sunmakla görevlendirildi.

Çalışmanın sonucu tüm övgüleri hak ediyor. Açılış sayfası muhteşem görünüyor. Her türlü etkileşimli öğe ve animasyonlu resimlerle doludur.

4. Otoyol Bir

Büyük resim ağırlığı, geliştiriciler için büyük bir sorun haline geldi

Newcastle acentesi Shout Digital tarafından lüks bir tatil ve balayı şirketi olan seyahat acentesi Exsus için tasarlanan bu çarpıcı mikrosite, bu konunun bir başka harika örneğidir. Retro tarzdaki animasyonları anında dikkatinizi çeker ve jeneriğin sonuna kadar peşini asla bırakmaz.

Tüm ünlü California sahillerini ziyaret etmek için klasik bir 1959 Cadillac Eldorado sürün. İlk bakışta, tüm efektler basit görünüyor, ancak kaydırmaya başladığınızda gerçek sihir önünüzde açılacak.

5. Paranızı Önemli Hale Getirin

Mali durumunuzu Make Your Money Matter'ın önerdiği şekilde yönetin

Birçok insan para ve kişisel finans konusuyla ilgileniyor, bu nedenle New York dijital ajansı Firstborn, bir kredi birliği için sipariş hazırlarken geleneksel bir formata yenilikçi bir format tercih etti.

Hedef kitleyi bir kredi birliğinin faydaları (ve bankaların dezavantajları) hakkında bilinçlendirmek amacıyla pazarlamacılar, bir kredi birliğinin nasıl çalıştığını, nerede bir kredi birliğinin nerede bulunacağını erişilebilir ve ilginç bir şekilde açıklayan harika bir açılış sayfası oluşturdular. organizasyon ofisleri ve çok daha fazlası. Ayrıca bankaların yatırımlarınızdan elde edeceği karı hesaplayacak bir hesap makinesi bulunmaktadır.

6. Döngü

Açılış sayfası size mevcut tüm bisiklet türlerini gösterecektir.

Çinli bilgeler, "Sen ne yersen osun" derler. Tasarımcılar ve bisiklet tutkunları Romain Bourdieux ve Thomas Pomarelle için bu ünlü bilgelik "Sürdüğünüz şeysiniz"dir. Ortak yazarları olan web siteleri, yalnızca yeni moda kaydırma ile değil, aynı zamanda harika bir mizah anlayışı ve birinci sınıf çizimlerle sizi şaşırtacak.

Görünüşe göre geliştiriciler tek bir bisiklet tipini kaçırmadılar ve onları her ziyaretçinin bir tane satın alıp milyonlarca dolarlık alt kültüre katılmaya istekli olacağı şekilde sunmaya çalıştılar.

7. Lexus

Evde rahat koltuğunuzda otururken arabayı deneyebilirsiniz.

Bu site sayesinde Lexus serisinden yeni bir modeli evinizin rahatlığında deneyebilirsiniz. Amaze dijital danışmanlık ajansı tarafından geliştirilen interaktif video, size Lexus IS otomobilinin içi ve dışı hakkında eksiksiz ve yüksek düzeyde görsel bilgiler sağlayacaktır. Varlığın etkisi sağlanır.

Bu sonucu elde etmek için, pazarlama ekibinin arabayı çeşitli manzaraların arka planına karşı yakalaması ve kilit noktaların her birinde çevredeki görünümü taraması gerekiyordu. HTML5 teknolojisi sayesinde, açılış sayfası hem bilgisayarlarda hem de akıllı telefonlarda çalışır ve otomobil tanıtımını her zamankinden daha başarılı hale getirir.

Amaze Ticari Direktörü Wendy Stonefield şunları söylüyor: “HTML5 kullanmak birkaç hedefe ulaşmamızı sağladı. İlk olarak, otomobilin ve işlevsel özelliklerinin görsel bir gösterimidir. İkincisi, hiçbir modern projenin onsuz yapamayacağı etkileşimdir: bu durumda, kullanıcıların otomobilin iç ve gövdesinin rengini seçmelerine izin veriyoruz. Videoları oluştururken, sofistike izleyiciye odaklandık - ve bugün var olan teknolojilerle bu mümkün olandan daha fazla hale geldi. Lexus IS'yi gerçekte olduğu gibi gösterdik."

8. Ayakkabılarımdaki Hayat

Ayakkabılarımda Yaşam (İngilizce'den - başka birinin gözünden), ana görevi HIV bulaşmış insanlara karşı korku ve önyargıyı ortadan kaldırmak ve genç nesli HIV ve AIDS hakkında bilinçlendirmek olan iddialı bir projedir. Londra merkezli Traffic ajansı, genç bir kitlenin dikkatini çekecek ve güvenlerini kazanacak bir açılış sayfası tasarlamakla görevlendirildi ve bununla harika bir iş çıkardılar.

Kurumsal yazı tipi Houshka Rounded Medium, sayfanın daha canlı ve daha ilginç görünmesini sağlayan yazı tipi-yüz sözdizimi desteğiyle uygulandı. Sarı kullanımıyla birlikte diğer dekoratif unsurlar, kaynağı estetik açıdan hoş hale getirdi.

9. Canavar

Ünlü halk şarkıcısının yeni açılış sayfası şiir okuyor ve onlara inanılmaz görüntülerle eşlik ediyor

Laura Marling'in yeni albümü A Creature I Don "t Know"u tanıtmak için Londra merkezli dijital ajans Studio Juice, şiirlerin enfes çizimler ve etkileyici animasyonlar eşliğinde okunduğu harika bir açılış sayfası geliştirdi.

Böyle bir mucize yaratmak için, animasyonların film müziği ile senkronize edildiği ve hızlarının daha önce belirtilen parametrelerle eşleştiği yeni anlamsal öğeler ve nitelikler kullanıldı.

10. Laboratuvar

Alzheimer hastalığı araştırmalarında Birleşik Krallık'ın önde gelen kurumu olan Alzheimer's Research, çalışmalarını ve sonuçlarını ilgi çekici ve erişilebilir bir şekilde sunmaya kararlıdır. Bunun için The Lab kaynağı oluşturuldu.

Sayfada, her kullanıcı kurumun laboratuvarlarını ve kliniğini tanıma fırsatı bulur ve kısa bir formda açılır ipuçları ekranda gösterilenleri açıklar. Bunlardan herhangi birine tıklarsanız, daha ayrıntılı bilgi alırsınız. Bilim adamlarının teorilerini nasıl hayata geçirdiğini ve milyonlarca insana nasıl umut verdiğini gösteren en iyi örnek.

11. Beyniniz Neden Infographics İstiyor?

İnfografikler hakkında bilgi grafikleri!

NeoMam Studios, bilgi sunma yöntemi olarak infografiklerin ana avantajlarını vurgulayan mükemmel bir paralaks kaydırmalı açılış sayfasına sahipti.

Şirketin yöneticisi Danny Ashton, "Geliştiricilerimizin uygulamak zorunda olduğu en zor şey paralaks kaydırmadır," deneyimini paylaşıyor. "Mevcut tüm kitaplıkların önemsiz olduğunu düşündüler, bunun yerine kendi kitaplıklarını oluşturdular."

12.5 derece

Bu kaynağın ana özelliği, sayfalarının her birinin kendi kaydırma mekanizmasına sahip olmasıdır. Herkes! Bu çok komik ve çok başarılı bir yaklaşımdır ve bu aynı zamanda bu teknolojinin dahiyane bilgi sunum biçimleri icat etmenize izin verdiğini kanıtlamaktadır.

13. Atlantis Dünya Fuarı

Burada olağandışı kaydırma, arsa için olduğu kadar eğlence için de çalışmıyor

Bu çevrimiçi bilgi grafiği, paralaks kaydırmayı yalnızca bilgileri daha verimli bir şekilde sunmak için değil, aynı zamanda canlandırmak ve belirli bir arsaya sığdırmak için kullanan Frank Chimero tarafından geliştirilmiştir. akrobasi!

14. Her son damla

Temiz su eksikliğinin küresel sorunu hakkında bilgi edinin!

Animasyon stüdyosu Nice & Ciddi, bu açılış sayfasını gezegendeki temiz su kıtlığı sorunu hakkında halkı bilinçlendirmek için tasarladı. Suyu nereye harcıyoruz? Nereden kurtarabiliriz? Nasıl yapılır? Bu problemle ilgili her şeyi öğreneceksiniz. Her son damla.

15. Yaşayan Söz

Dijital ajans Tribal, Living Word çeviri bürosunun çevrimiçi temsilini güncellemek ve onu bilgilendirici ve ilginç hale getirmekle görevlendirildi. Sonuca kendiniz hayran olabilirsiniz, ancak hemen İngilizlerin olağandışı bir şey bulmadığını, ancak her şeyi düzgün ve temiz bir şekilde yaptıklarını söyleyelim.

16. Madwell

Paralaks kaydırma, Madwell'in açılış sayfasına derinlik katıyor

New York merkezli iş geliştirme ajansı Madwell, portföyünü sunmak için bir açılış sayfası kullanıyor. Paralaks kaydırma, düzenledikleri eylemde bir tür zevktir: sonuçta ortaya çıkan 3B efekt, yaratımlarına derinlik katar.

17. Jacksonville Şehir Merkezinde Sanat Yürüyüşü

Jacksonville Downtown Art Walk, Jacksonville, Florida'da geleneksel bir aylık sanat ve kültür etkinliğidir. Festival 15 bloğa yayılıyor ve onlarca galeri, müze ve bardan oluşuyor. Bütün bunlara sokak aktörleri ve müzisyenler eşlik ediyor. Bu etkinlikle ilgili güzel bir web sitesi, evinize neşeli bir ruh hali getirebilir.

18. Von Hollandalı

Moda markası Von Dutch, kurucusunun inanılmaz hayat hikayesini web sitesinin sayfalarından anlatıyor. Kuşkusuz, trend olmak için site için yeni çıkmış bir kaydırma türü kullanıldı. Sayfada gezinirken, resimler ve simgeler yukarı ve aşağı yüzer ve siz yokken birisinin monitörünüze su döktüğü izlenimini verir.

19. Fannabi

Fanabee, müziğe düşkün olanlar için değil, daha çok onu toplayanlar için oluşturulmuş bir açılış sayfasıdır. Bu hizmet ile topladıklarınızın (CD, poster, T-shirt vb.) bir listesini yayınlayabilir ve eksiklerinizi bulabilirsiniz.

20. Peugeot Hibrit4

Yeni teknolojilerin yeni bir şekilde sunulması gerekiyor, değil mi?

Otomobil devi Peugeot (Peugeot) tarafından görevlendirilen çevrimiçi çizgi roman, şirketin iki görevi aynı anda yerine getirmesini sağlıyor: ilk olarak, yeni Peugeot Hybrid4 mekanizmasını hedef kitlenin dikkatine oldukça etkili bir şekilde sunuyor ve ikincisi üzerinde çalışıyor. hem ürünün hem de şirketin imajı: Formatları cesurca deneyen ve bireyselliğini unutmayan Peugeot'ya katılmak artık daha da prestijli hale gelecek.

21. Kültürel Çözümler

Cultural Solutions, adından da anlaşılacağı gibi sanat konularıyla ilgilenen bir danışmanlık ajansıdır. Şirket logosu, birbiri üzerine bindirilmiş çok renkli dairelerden oluşur. Bu yüzden sitenin ana sayfasında bu daireler paralaks etkisi yardımıyla oynanmaktadır. Daireler farklı hızlarda hareket eder ve bu da derinlik ve hacim ekler. Sonuç, özlü, ancak çok geniş ve şık bir ifadedir.

22. jQuery Konferansı

jQuery Konferansı web sitesinin geliştiricileri asıl şeyi unutmazlar: bilgilendiricilik ve gösteriş arasındaki doğru dengeyi korurlar.

jQuery konferansı için özel olarak oluşturulan site, kurgu ile yürütülmektedir. Sayfayı aşağı kaydırırken, jquery'nin paralaks kaydırması farklı animasyonlar zincirini tetikler: soldan sağa giden bir bisiklet veya bir köpekbalığını kovalayan martı sürüsü. Genel olarak, orijinaldir ve efektlerle aşırı yüklenmez: sonuçta, asıl şey sadece şaşırtmak değil, aynı zamanda duyulmaktır.

23. Şekil

Yaratıcı ajans Shape, açılış sayfasında oldukça özlü bir biçimde, faaliyetlerinin ana aşamalarından bahsediyor. Güzel görseller ve animasyonlar netlik katıyor.

24. Nintendo

Tanınmış bir Japon şirketi, yeni Mario Kart oyun serisini hedef kitleye tanıtmak için oyunu dünya çapında kısa bir gezi formatında anlatan bir açılış sayfası geliştirdi. Açılış sayfasının tasarımı ve renk şeması, oyunun stilini kopyalar ve yol boyunca çocukluktan tanıdık karakterlerle tanışacaksınız.

25. İçecekleri Etkinleştir

Sadece kapağı sökün ve hareket başlayacak

Activate Drinks, güçlendirilmiş içeceklerin bir distribütörüdür ve ürünlerini tanıtmak için her açıdan ilgili bir kaynak geliştirmiştir. Önce şişenin kapağını açıyorsunuz (tabii ki sayfayı kaydırıyorsunuz) ve sonra kendinizi hızlı bir baloncuk kasırgasının içinde buluyorsunuz. Üç seviyeli baloncuk yerleşimi, monitörde bir 3D efekti ve su sıçramasına benzer bir his yaratır.

26. Beyaz Saray'ın Irak Zaman Çizelgesi

Olağandışı kaydırma, yalnızca kampanyanın estetik yönünü geliştirmek için değil, aynı zamanda ABD hükümeti söz konusu olduğunda, sayfaya anlam ve duygu katmak için de kullanılır. Tüm içeriğin, alttaki resimlerden çok daha hızlı kaydırıldığını fark edebilirsiniz. Bu, okuyucunun dikkatini tam olarak ziyaretçilerin duyguları üzerinde etkisi olan bu çizimler üzerinde tutmak için bilerek yapılır.

27. Dirgen Kapak Hikayeleri

Ünlü müzik sitesi Pitchfork, iddialı Cover Stories projesiyle büyük ses getirdi. İnternet kaynağı, basılı bir parlak derginin bazı özelliklerini elde etti, ancak site için paralaks efektinin kullanılması, etkileşimli videolar, röportajlar ve benzersiz fotoğraflar, onu başka hiçbir şeye benzemez hale getirdi. Hareketli portre fotoğrafları, duygulu metinler ve mükemmel uyumlu bir film müziği - çok anlamlı ve zarif.

28. Soleil Noir 2012 | Biz inanıyoruz...

Fransızlardan Soleil Noir'den büyüleyici minimalizm

Fransızlar tarafından Soleil Noir'den tasarlanan bu ilginç açılış sayfası aslında bir Yeni Yıl kartı. Burada karmaşık bir şey bulamayacaksınız: baş döndürücü paralaks kaydırma, çizimlerde minimalizm, özlü ifadeler - ama bu basitlik büyüleyici.

29. Oakley

Oakley, çarpıcı paralaks kaydırmayı etkileyici fotoğrafçılıkla birleştiriyor

Oakley, ünlü bir gözlük ve gözlük tedarikçisidir ve bu kaynak özellikle yeni Airbrake MX gözlük modelini tanıtmak için geliştirilmiştir. Açılış sayfası, ürünü mükemmel bir şekilde sunan çarpıcı paralaks kaydırma ve etkileyici fotoğrafları birleştirir.

30. Jason Kenny OBE

Bisiklette üç kez Olimpiyat ve iki kez dünya şampiyonu olan Jason Kenny'nin açılış sayfası

Bu yılın başlarında, Bristol pazarlama ajansı Fiasco Design, 3x Olimpiyat ve 2x Dünya Bisiklet Şampiyonu Jason Kenny için bu harika açılış sayfasını tasarladı. Ajansın kurucu ortağı Ben Steers şöyle diyor: "Referans şartlarına dayanarak, dikey kaydırma ve paralaks ile tek sayfalık bir site oluşturmaya karar verdik."

31. La Moulade

Gezinme çubuğu, sayfanın istediğiniz alanına hızlı ve kolay bir şekilde gitmenizi sağlar.

Animasyonları ve ses efektlerini tetiklemek için kaydırma çubuğunun konumunu kullanan artan sayıda açılış sayfası arasında, Fransız ajansı La Moulade'nin oluşturulması, sayfadaki konumunuzun oldukça sıra dışı göstergesiyle öne çıkıyor. En üste yerleştirilir ve sitenin herhangi bir bölümüne de erişmenizi sağlar.

32. Yürüyen Ölü

En zor şey, tüm teknolojilerin başarılarını bir araya getirmektir.

Baş Tasarımcı Gavin Beck, proje üzerinde çalışırken edindiği izlenimlerini "Her şeyden önce, biz de bu gösterinin hayranıyız." “Planımız, dizinin hayranlarının takdir edeceği ve üzerinde çalışacağı The Walking Dead dünyasına uygun bir web sitesi oluşturmaktı. Hedeflerimize ulaşmak için HTML5, CSS3, JavaScript / jQuery, Web Audio / HTML5 Audio ve tabii ki paralaks kaydırma gibi yeni geliştirmeler kullandık. En büyük zorluk, tüm bu teknolojilerin birlikte çalışmasını ve her türlü platformda kullanılabilir olmasını sağlamaktı."

33. New York Times: Domates Konservesi Blues

Bu, çevrimiçi gazeteciliğin geleceği olabilir mi?

İnsanların gazete ve dergi okumakla yüklenmediği bir çağda, pek çok gazeteci okurun dikkatini basılı söze nasıl çekeceğini merak ediyor. Krizin üstesinden gelmek için seçeneklerden biri, dergi makalelerinin ve hikayelerinin yeni bir sunum biçimini geliştiren Amerikan gazetesi The New York Times tarafından önerildi - web tasarımı alanındaki en son gelişmeler kullanılarak oluşturulan tek sayfalık bir site ve Atilla Futaki'nin çizimleriyle süslenmiştir.

Sayfayı kaydırmaya başladığınızda, çizimler hareket edecek ve sizi açıklanan eylemin içine çekecektir.

34. Sağlık Hizmeti Ödemeleri

Karmaşık bir şey yok gibi görünüyor, ama oldukça eğlenceli görünüyor

Sağlık kuruluşu ister kamu ister özel olsun, bu kuruluşların liderleri artan tazminat ödemeleri hacminden giderek daha fazla endişe duymaktadır. Sunulan infografikler tam olarak bu sorunu gözler önüne sermekle birlikte paralaks ile kendine dikkat çekiyor.

Açılış sayfasını aşağı kaydırmaya başladığınızda, ekranda bir sağlık uzmanı belirecek, koridorda yürüyüp önüne sedyeyi itecek. Her biri Birleşik Krallık Ulusal Sağlık Sistemi tarihinde belirli bir yılı temsil eden bölümden bölüme geçer. Pop-up'lar, bu yıllarda maksimum tazminat ödemelerinin ne kadar yapıldığı hakkında bilgi sağlar. Karmaşık bir şey yok gibi görünüyor, ama oldukça eğlenceli görünüyor.

Bu açılış sayfasını geliştiren ajansın bir çalışanı, çalışmayla ilgili izlenimlerini paylaşıyor: "Bu siteyi oluşturmak için HTML5, CSS3 ve JavaScript'te yeni teknolojiler uyguladık. Animasyonlar önemli bir unsur olduğundan, esas olarak “skrollr” animasyon kitaplıklarını kullandık. Her elemanı elle boyadık ve CSS3 desteği ile son rötuşları ekledik."

35. Biz Açıyoruz

Farklı kaydırma türlerinin mükemmel oyunu

Bu kaynak, Norveçli Unfold ajansı tarafından oluşturulmuştur ve sonsuz kaydırma ve paralaks kaydırma gibi efektlerin bir kombinasyonunun bir örneğidir. Sağ üst köşede gizlenmiş olan gezinme çubuğu, sitede nerede olduğunuz hakkında size her zaman bir fikir verecek ve ilgilendiğiniz alana hızlı bir şekilde geçmenize olanak sağlayacak ve sitenin sonuna kaydırırsanız , kaydırma çubuğunun otomatik olarak yukarı hareket edeceğini fark edeceksiniz ve siteyi baştan aşağı kaydırmaya devam edeceksiniz.

36. Tasarruf Mücadelesi

Bu açılış sayfasını oluşturmak için geliştiriciler, ziyaretçilerin sayfadaki olayları "kaydırabildiği" skrollr.js eklentisini kullandı. Bu, geçişleri yumuşatmak ve güçlü bir kullanıcı arabirimi oluşturmak için daha fazla zaman sağlayarak yüksek hızlı modellemeye olanak tanır. Animasyonlar oluşturmak için CSS 3D teknolojisi kullanıldı.

Stellar.js eklentisi

Stellar.js, kaydırılabilir herhangi bir nesneye paralaks efekti uygulayabileceğiniz bir eklentidir. Bu eklenti artık desteklenmese de, kararlılığı ve jQuery'nin en son sürümleriyle uyumluluğu nedeniyle birçok geliştirici tarafından kullanılmaktadır.

Bir başka kullanışlı özellik de jQuery kitaplığı olmadan çalışabilme yeteneğidir. Bu nedenle, temelinde oluşturulan açılış sayfaları daha hafiftir ve daha hızlı yüklenir.

Çözüm

Dünya durmuyor ve her gün web tasarımı alanında yeni sanat eserleri ortaya çıkıyor. Bu kahramanlar arasında olacak mısın? Bu mükemmel teknolojileri benimserseniz çok kolay. Ancak asıl şeyi unutmayın: herhangi bir gömülü efekt, dönüşümü artırmalıdır! Aksi takdirde, sadece ihtiyacınız yok.

LPgenerator platformu, daha doğrusu görsel düzenleyicimiz, paralaks efektlerini destekler; LP Store açılış sayfalarındaki şablonlarla kendiniz görün