Benzersiz tasarımlar için divi’de animasyon ve paralaks nasıl birleştirilir
İster yiyecek hazırlıyoruz, ister web siteleri tasarlıyor olsak da, malzemeler lezzetli yemekleri veya güzel siteleri garanti etmeyecektir. Tüm farklılıkları yaratan öğeleri ne kadar iyi birleştiririz. Bu öğreticide, görüntünün animasyonunu ve paralaksını daha önce hiç düşünmemiş olabileceğiniz bir şekilde nasıl birleştireceğinizi göstereceğim. Bilmiyorsanız, Animasyon, sayfaları yüklerken herhangi bir Divi öğesine eklenebilen varsayılan bir Divi özelliğidir. Paralaks ayrıca, kaydırma sırasında arka plan görüntüsünüze benzersiz bir hareket eklemenizi sağlayan bir Divi seçeneğidir.
Bugün, animasyon ve paralaksını çeşitli yaratıcı şekillerde birleştirmek için Divi’nin varsayılan tasarım ayarlarını kullanacağız. Bu kombinasyon, sayfayı aşağı kaydırdığınızda şaşırtıcı görünen güzel bir animasyonlu paralaks görüntüleri düzeni oluşturmak için mucizevi bir şekilde çalışır. Başlayalım! Gizlice göz atma
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntü. Bu öğretici için kullanılan görüntüyü Divi Life Coach düzeni paketinde bulabilirsiniz.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Tasarım konseptinin arkasındaki temel fikrin temel fikri, arka plan görüntüsünde CSS paralaksının kullanımına odaklanmıştır. Paralaks CSS’nin çalışma şekli nedeniyle, paralaks görüntüleri kalacak ve kullanan öğelerin boyutu ne olursa olsun tarayıcı penceresini otomatik olarak dolduracaktır. Hala aynı paralaks görüntüsünü Divi’deki çeşitli öğelerde kullanmanıza ve daha sonra bu öğeleri animasyon kullanarak hareket ettirmenize izin veren görüntünün doğası. Animasyon tamamlandığında, kullanılan paralaks arka plan görüntüsü, sayfayı aşağı kaydırırken beklendiği gibi eşleşir ve çalışır.
Bölüm 1: Divi Animasyonu ve Paralaks Tasarımı Oluşturma (Sürüm 1) İki sütunla (1/2 1/2) yeni bir parça oluşturun. Modülümüzü eklemeden önce bölüm ve satırda bazı ayarlamalar yapalım. İlk bölüm ve satır ayarlarını güncelleyin, bölüm ayarlarını açın ve varsayılan dolguyu aşağıdaki gibi kaldırın: Dolgu: 0px üst, 0px aşağıda Ardından satır ayarlarını açın ve Paralax arka plan resmini verin. Arka Plan Görüntü: [Görüntü Yükle] Paralax’ı kullanın Efektler: Evet Paralax Yöntemi: CSS Burada Paralaks yöntemi CSS olarak işlev görmesi için ayarlanmalıdır. Genişlik:% 100 maks. Uygun bir paralaks arka plana sahip bir metin modülü ekleyin Şimdi tasarıma metin modüllerimizi eklemeye başlamaya hazırız. İlk metin modülü bu tasarımın anahtarıdır. Aynı arka plan görüntüsünü ve paralaks CSS’yi metin modülüne uygulayarak, gerçekten benzersiz bir etki için animasyonlarla yaratıcı olabiliriz. Lütfen ve sütun 1’e yeni bir metin modülü ekleyin. Ardından metin modülünün ayarlarını şu şekilde güncelleyin: Vücut Dolgu:
Merhaba!
Ben Jane … benim hakkımda Ardından, hatta eklediğiniz aynı CSS Paralaks Arka Plan Görüntü Metin Modülünü verin.
Arka Plan Görüntü: [Resim Yükle] Paralax’ı kullanın Efektler: Evet Paralax Yöntemi: CSS Metin Yazı Tipi: FIRA SANS Ağırlık Ağırlık Metin Yazı Tipi: Hafif Metin Renk Metin: #fffff Metin Boyutu Metin: 70px Yüksek Satır Metin: 1EM
Yazı Tip Stili Bağlantı: Lower Line (U) Bağlantı Metni Rengi: #FFFFFF (Varsayılan), #881E67 (Nokta İmleç) Metin Boyutu Bağlantı: 30px Bağlantı Harflerinin Mesafesi: 2px Dolgu:% 20 üst,% 20 alt,% 10 sol,% 10 sağ kenarlık genişliği: 20px Sınır Renk: #ffffff. Opaklık Başlat Animasyon:% 20 Şimdiye kadar etkiye bakalım … Animasyonlu metin modülünün arka plan görüntüsünün satırın arka planından uygun bir yerde nasıl durduğunu unutmayın. Bunun nedeni, her ikisinin de aynı arka plan görüntüsünü Paralax CSS efekti ile paylaşmasıdır. Bu noktada gerçek bir paralaks arka plan görüntüsü olan ikinci bir metin modülü ekleyin Bir sonraki metin modülünü eklemeye hazırız. Bir sonraki, gerçek paralaks efekti kullanarak farklı bir arka plan görüntüsüne sahip olacak. Biz de bazı animasyonlar sağlayacağız. Sütun 2’ye yeni bir metin modülü ekleyin. Ardından, vücudun içeriğini “blogum” kelimesiyle güncelleyin. Ardından, gerçek bir paralaks yöntemine sahip bir arka plan görüntüsü ekleyin. Arka Plan Görüntü: [Resim Yükle] Paralax’ı kullanın Efektler: Evet Paralax Yöntem: True Paralax Metin Yazı Tipi: FIRA Mono Metin Yazı Tipi Stil: TT Metin Tesviye Metin: Orta Renk Metin Metin: #FFFFFF Harflerin Alanı Metin: 10 Piksel Genişlik: 320 Piksel Maks: 320px Modül Hizalama: Merkez Marj: (Masaüstü): -5VW üst, 4VW alt kenar boşluğu (tablet ve cep telefonu): 3VW Üst Dolgu: 70px üst, 70px aşağıda Sınır Genişliği: 20px Renk Sınır: #ffffff Animasyon Stili: Slayt Animasyon Yönü: Gecikme Altında Animasyon: 200ms Üçüncü bir metin arka plan görüntüsüne sahip üçüncü bir metin modülü oluşturma Üçüncü bir metin modülü oluşturmak için sütun 2’de yeni oluşturduğunuz metin modülünü çoğaltın. Sonra arka plan görüntüsünü aynı tutacağız, ancak paralaks etkisini paralaks yöntemi CSS ile güncelleyeceğiz. Genişlik: 240px maksimum genişlik: 240px modül hizalama: Sol kenar boşluğu: 0px alt dolgu: 170px üst, 170px dip, 95px sol, 95px Daha uzun modül tasarımıyla eşleşen dikey bir metin ekranı oluşturmak için doğru özel genişlik ve sağ ve sol dolgu kullanılır. Sonra animasyonun yönünü güncelleyin, aşağı değil. Animasyon yönü: yukarı Nihai sonuç şimdi sonucuna bakalım. Bölüm 2: Animasyon ve Paralax Tasarım Oluşturma (Sürüm 2) Bu sonraki tasarım, modülün ilk animasyonundan sonra satırlar için bir paralaks arka plan görüntüsü yükleyerek benzersiz bir animasyon ekleyecektir. Bunu yapmak için, içeriğin arkasında hareket edecek Paralax CSS arka plan görüntüsü için katı ayrı satırlar kullanmamız gerekir. Ve arka planın bir kısmı ilk başta ortaya çıkacağından, Row animasyonundan önce içeriğimiz için özel bir arka plan rengi ekleyebiliriz. İşte nasıl yapılacağı. İlk olarak, çerçeve görüntü görüntüleme modunu uygulayın. Ardından metin modülünüzü içeren satırları kopyalayın. Şimdi iki özdeş çizginiz olacak. Ardından, metin modülünü üst sıradaki silin. Gerçekten yapmak istediğimiz şey en üst düzey tasarımlarımızı başlatmak. Ardından, üst sıra için ayarları şu şekilde güncelleyin: Yükseklik: 900px (masaüstü), 2000px (tablet ve cep telefonu) Dolgu: 0px üst, 0px daha düşük animasyon stili: Slayt animasyon yönü: Sağ animasyon süresi: 1250ms Gecikme Animasyonu: 1800ms Boş satırın varsayılan olarak yüksekliği olmayacağından yükseklik satır seti veriyoruz. Bu nedenle, ikinci satır içeriğinizi içerikle kapsamak için satırın yüksekliğinin yeterli olduğundan emin olmanız gerekir. Ayrıca, metin modülü göründükten sonra içeriğin arkasına kayması için gecikme ile animasyon satırları veriyoruz. Şimdi yapmamız gereken iki satır üst üste binmek, negatif bir marj kullanarak alt çizgiyi taşımaktır, böylece arka plan animasyonumuzla üst satırın üst üste binmesi. Alt satır için ayarları açın ve marjı aşağıdaki gibi güncelleyin: Marj: -900px üst (masaüstü), -2000px (tablet ve cep telefonu) sonra üst satır için CSS paralaks yöntemi ile arka plan görüntüsünü çıkarın çünkü üst satırı kullanacağız Bunun yerine arka plan görüntüsü. İşte şimdiye kadar bir tasarım. İlk satırdaki gecikmiş arka plan animasyonuna ve sütun 1’deki metin modülü için paralaks arka planının mükemmel bir şekilde nasıl eşleştiğine dikkat edin. Arka Plan Renkleri Ekleme Parçası Başlangıç Arka Plan Renk Metin Modülünü Vermek için Satır Animasyonundan önce, arka plan rengini o bölüme verebilirsiniz. Bölüm ayarlarını açın ve aşağıdakileri ekleyin: Arka planın sol rengi gradyan: RGBA (136,30,103,0.61) Gradyan Renk Doğru Arka Plan: #881E67 Gradyan Türü: Radyal
Nihai sonuç şimdi sonucuna bakalım. İsteğe bağlı karma modunuz ve animasyonlu kombinasyonunuz, ikinci satıra karışık modlar ekleyerek ve modül animasyonu ile birlikte çalışacak zoom animasyonu ekleyerek daha yaratıcı olabilir. Karışık Mod: parlaklık animasyon stili: yakınlaştırma Sonuçlar aşağıdadır. Ve cep telefonunda göründüğü şey bu.
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntü. Bu öğretici için kullanılan görüntüyü Divi Life Coach düzeni paketinde bulabilirsiniz.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Tasarım konseptinin arkasındaki temel fikrin temel fikri, arka plan görüntüsünde CSS paralaksının kullanımına odaklanmıştır. Paralaks CSS’nin çalışma şekli nedeniyle, paralaks görüntüleri kalacak ve kullanan öğelerin boyutu ne olursa olsun tarayıcı penceresini otomatik olarak dolduracaktır. Hala aynı paralaks görüntüsünü Divi’deki çeşitli öğelerde kullanmanıza ve daha sonra bu öğeleri animasyon kullanarak hareket ettirmenize izin veren görüntünün doğası. Animasyon tamamlandığında, kullanılan paralaks arka plan görüntüsü, sayfayı aşağı kaydırırken beklendiği gibi eşleşir ve çalışır.
Bölüm 1: Divi Animasyonu ve Paralaks Tasarımı Oluşturma (Sürüm 1) İki sütunla (1/2 1/2) yeni bir parça oluşturun. Modülümüzü eklemeden önce bölüm ve satırda bazı ayarlamalar yapalım. İlk bölüm ve satır ayarlarını güncelleyin, bölüm ayarlarını açın ve varsayılan dolguyu aşağıdaki gibi kaldırın: Dolgu: 0px üst, 0px aşağıda Ardından satır ayarlarını açın ve Paralax arka plan resmini verin. Arka Plan Görüntü: [Görüntü Yükle] Paralax’ı kullanın Efektler: Evet Paralax Yöntemi: CSS Burada Paralaks yöntemi CSS olarak işlev görmesi için ayarlanmalıdır. Genişlik:% 100 maks. Uygun bir paralaks arka plana sahip bir metin modülü ekleyin Şimdi tasarıma metin modüllerimizi eklemeye başlamaya hazırız. İlk metin modülü bu tasarımın anahtarıdır. Aynı arka plan görüntüsünü ve paralaks CSS’yi metin modülüne uygulayarak, gerçekten benzersiz bir etki için animasyonlarla yaratıcı olabiliriz. Lütfen ve sütun 1’e yeni bir metin modülü ekleyin. Ardından metin modülünün ayarlarını şu şekilde güncelleyin: Vücut Dolgu:
Merhaba!
Ben Jane … benim hakkımda Ardından, hatta eklediğiniz aynı CSS Paralaks Arka Plan Görüntü Metin Modülünü verin.
Arka Plan Görüntü: [Resim Yükle] Paralax’ı kullanın Efektler: Evet Paralax Yöntemi: CSS Metin Yazı Tipi: FIRA SANS Ağırlık Ağırlık Metin Yazı Tipi: Hafif Metin Renk Metin: #fffff Metin Boyutu Metin: 70px Yüksek Satır Metin: 1EM
Yazı Tip Stili Bağlantı: Lower Line (U) Bağlantı Metni Rengi: #FFFFFF (Varsayılan), #881E67 (Nokta İmleç) Metin Boyutu Bağlantı: 30px Bağlantı Harflerinin Mesafesi: 2px Dolgu:% 20 üst,% 20 alt,% 10 sol,% 10 sağ kenarlık genişliği: 20px Sınır Renk: #ffffff. Opaklık Başlat Animasyon:% 20 Şimdiye kadar etkiye bakalım … Animasyonlu metin modülünün arka plan görüntüsünün satırın arka planından uygun bir yerde nasıl durduğunu unutmayın. Bunun nedeni, her ikisinin de aynı arka plan görüntüsünü Paralax CSS efekti ile paylaşmasıdır. Bu noktada gerçek bir paralaks arka plan görüntüsü olan ikinci bir metin modülü ekleyin Bir sonraki metin modülünü eklemeye hazırız. Bir sonraki, gerçek paralaks efekti kullanarak farklı bir arka plan görüntüsüne sahip olacak. Biz de bazı animasyonlar sağlayacağız. Sütun 2’ye yeni bir metin modülü ekleyin. Ardından, vücudun içeriğini “blogum” kelimesiyle güncelleyin. Ardından, gerçek bir paralaks yöntemine sahip bir arka plan görüntüsü ekleyin. Arka Plan Görüntü: [Resim Yükle] Paralax’ı kullanın Efektler: Evet Paralax Yöntem: True Paralax Metin Yazı Tipi: FIRA Mono Metin Yazı Tipi Stil: TT Metin Tesviye Metin: Orta Renk Metin Metin: #FFFFFF Harflerin Alanı Metin: 10 Piksel Genişlik: 320 Piksel Maks: 320px Modül Hizalama: Merkez Marj: (Masaüstü): -5VW üst, 4VW alt kenar boşluğu (tablet ve cep telefonu): 3VW Üst Dolgu: 70px üst, 70px aşağıda Sınır Genişliği: 20px Renk Sınır: #ffffff Animasyon Stili: Slayt Animasyon Yönü: Gecikme Altında Animasyon: 200ms Üçüncü bir metin arka plan görüntüsüne sahip üçüncü bir metin modülü oluşturma Üçüncü bir metin modülü oluşturmak için sütun 2’de yeni oluşturduğunuz metin modülünü çoğaltın. Sonra arka plan görüntüsünü aynı tutacağız, ancak paralaks etkisini paralaks yöntemi CSS ile güncelleyeceğiz. Genişlik: 240px maksimum genişlik: 240px modül hizalama: Sol kenar boşluğu: 0px alt dolgu: 170px üst, 170px dip, 95px sol, 95px Daha uzun modül tasarımıyla eşleşen dikey bir metin ekranı oluşturmak için doğru özel genişlik ve sağ ve sol dolgu kullanılır. Sonra animasyonun yönünü güncelleyin, aşağı değil. Animasyon yönü: yukarı Nihai sonuç şimdi sonucuna bakalım. Bölüm 2: Animasyon ve Paralax Tasarım Oluşturma (Sürüm 2) Bu sonraki tasarım, modülün ilk animasyonundan sonra satırlar için bir paralaks arka plan görüntüsü yükleyerek benzersiz bir animasyon ekleyecektir. Bunu yapmak için, içeriğin arkasında hareket edecek Paralax CSS arka plan görüntüsü için katı ayrı satırlar kullanmamız gerekir. Ve arka planın bir kısmı ilk başta ortaya çıkacağından, Row animasyonundan önce içeriğimiz için özel bir arka plan rengi ekleyebiliriz. İşte nasıl yapılacağı. İlk olarak, çerçeve görüntü görüntüleme modunu uygulayın. Ardından metin modülünüzü içeren satırları kopyalayın. Şimdi iki özdeş çizginiz olacak. Ardından, metin modülünü üst sıradaki silin. Gerçekten yapmak istediğimiz şey en üst düzey tasarımlarımızı başlatmak. Ardından, üst sıra için ayarları şu şekilde güncelleyin: Yükseklik: 900px (masaüstü), 2000px (tablet ve cep telefonu) Dolgu: 0px üst, 0px daha düşük animasyon stili: Slayt animasyon yönü: Sağ animasyon süresi: 1250ms Gecikme Animasyonu: 1800ms Boş satırın varsayılan olarak yüksekliği olmayacağından yükseklik satır seti veriyoruz. Bu nedenle, ikinci satır içeriğinizi içerikle kapsamak için satırın yüksekliğinin yeterli olduğundan emin olmanız gerekir. Ayrıca, metin modülü göründükten sonra içeriğin arkasına kayması için gecikme ile animasyon satırları veriyoruz. Şimdi yapmamız gereken iki satır üst üste binmek, negatif bir marj kullanarak alt çizgiyi taşımaktır, böylece arka plan animasyonumuzla üst satırın üst üste binmesi. Alt satır için ayarları açın ve marjı aşağıdaki gibi güncelleyin: Marj: -900px üst (masaüstü), -2000px (tablet ve cep telefonu) sonra üst satır için CSS paralaks yöntemi ile arka plan görüntüsünü çıkarın çünkü üst satırı kullanacağız Bunun yerine arka plan görüntüsü. İşte şimdiye kadar bir tasarım. İlk satırdaki gecikmiş arka plan animasyonuna ve sütun 1’deki metin modülü için paralaks arka planının mükemmel bir şekilde nasıl eşleştiğine dikkat edin. Arka Plan Renkleri Ekleme Parçası Başlangıç Arka Plan Renk Metin Modülünü Vermek için Satır Animasyonundan önce, arka plan rengini o bölüme verebilirsiniz. Bölüm ayarlarını açın ve aşağıdakileri ekleyin: Arka planın sol rengi gradyan: RGBA (136,30,103,0.61) Gradyan Renk Doğru Arka Plan: #881E67 Gradyan Türü: Radyal
Nihai sonuç şimdi sonucuna bakalım. İsteğe bağlı karma modunuz ve animasyonlu kombinasyonunuz, ikinci satıra karışık modlar ekleyerek ve modül animasyonu ile birlikte çalışacak zoom animasyonu ekleyerek daha yaratıcı olabilir. Karışık Mod: parlaklık animasyon stili: yakınlaştırma Sonuçlar aşağıdadır. Ve cep telefonunda göründüğü şey bu.
