Siteniz için kayar yapışkan başlık (öğretici headroom.js)
Bu makale size web sitenize Headroom.js nasıl yükleneceğinizi gösterecektir. Bu, kullanıcı sayfayı eğittiğinde gizlenmiş, ancak kullanıcı eğitildiğinde görüntülenen kalıcı bir gölgelike sahip olmanızı sağlayan benzersiz bir JavaScript kitaplığıdır. Web sitesinde bulunan navigasyona sahip olmanın avantajını elde edersiniz, ancak kullanıcı içerik okumaya çalıştığında görünüm alanını almaz.
Aşağı kaydırdığında gizle, yukarı doğru kaydırıldığında görüntüleyin
Bu, gölgelik kullanımı açısından iki dünyanın en iyisidir ve bu makale bunu web sitenize nasıl entegre edeceğinizi gösterecektir. Bu örnek için, oksijen üreticisi ve wordPress kullanıyoruz, ancak HTML’ye erişebildiğiniz ve CSS aracılığıyla JavaScript’i yükleyebildiğiniz, sınıflar ekleyebildiğiniz sürece de bu öğreticide açıklanan yöntemi kendi sitenizde de kullanabilirsiniz. .
Ajansta Headroom.js’yi gerçekten seviyoruz ve temel olarak sabit başlık ayarlarına sahip web sitelerimizin her birine yüklüyoruz. Bu, tüm E-Niaga binalarımızı, birçok şirket web sitemizi ve daha fazlasını içerir. Burada kullanımın faydaları çok büyüktür ve eksiklik yoktur. Kafa alanının kütüphanesi, javascript vanilyasında yapılmış bağımlılık yoktur, bir kod nasıl yapacağınızı anlamasanız bile, sadece birkaç kilobayt ve dakikalar içinde kurulabilir. Bu tanıtımla, Headroom.JS’nin Oxygen Builder web sitesine nasıl kurulacağından bahsedelim.
Bir video eğitimi izlemek istiyorsanız, Headroom.js nasıl kullanılacağına dair 16 dakikalık bir kılavuzdur.
Bu içerik gibi mi? Kanalımıza abone olun!
İzotropik’e abone olun
Buradaki süreç çok basit. İlk olarak, JavaScript kütüphanesini yüklüyoruz, sonra CSS yüklüyoruz ve son olarak web sitesinde başlık öğelerini başlatıyoruz. Headroom.js nasıl çalışır, ancak yüklemeden önce bu kütüphanenin gerçekte nasıl çalıştığını tartışalım. JavaScript, kullanıcı aşağı doğru kaydırdığında, yukarı doğru kaydırdığında ve başlığın kapanışını sayfanın üstü veya altına ile tanımlar. Ardından, çeşitli CSS sınıfları uygular. Örneğin, kullanıcı CSS. Headroom – PIN altındaki antrenmanlar dinamik olarak uygulandığında. Kullanıcı sayfanın en üstüne eğitildiğinde, CSS. Headroom – üst sınıf. Daha sonra bu bireysel sınıfı alıyoruz, onlar için CSS yazıyoruz, daha sonra sınıf eklendiğinde uygulanır ve sınıf silindiğinde silinir. .Headroom’un – web sitesi başlığının ziyaretçilere görüntülenmesi gerektiği anlamına geldiğinden, bunu yapan CSS yazabiliriz. Bu açıklama ile, web sitenizde kaydırma yaparken gizli bir başlık almak için Headroom.js nasıl kullanılacağına dair öğreticimize gidelim. (Yalnızca oksijen üreticisi) Web sitenizi oluşturmak için oksijen üreticisini kullanmıyorsanız, başlığınızı hazırlayın. Oksijen üreticisini kullanırsanız, bu kütüphanede başlık oluşturucuyu kullanmayın. Aslında, başlık üreticisini asla kullanmamayı ve sadece bölümü yapmamasını, ana ayar paneli üzerinden başlık etiketini eklememesini ve içeriğinizi içine yerleştirmemesini öneririz. Bu, düzen üzerinde daha fazla kontrol sağlar.
Başlık üreticisinin iyi olmasının tek nedeni, yapışkan bir etki eklemesidir, ancak Headroom.js kütüphanesini kullanırsak mantıklı değildir. Daha fazla açıklama için, yukarıdaki oksijen üreticisi ve wordpress.instal Headroom.js için bu adımı ayrıntılı olarak açıklayan videoyu izleyin, video öğreticisinde, yalnızca gelişmiş komut dosyası girişine indirgenen JS sürümünü kopyalayıp ekleriz. . Bu saf javascript, bu yüzden tek yapmamız gereken WP_Footer dosyasına JavaScript parçaları eklemek.
Bu, gölgelik kullanımı açısından iki dünyanın en iyisidir ve bu makale bunu web sitenize nasıl entegre edeceğinizi gösterecektir. Bu örnek için, oksijen üreticisi ve wordPress kullanıyoruz, ancak HTML’ye erişebildiğiniz ve CSS aracılığıyla JavaScript’i yükleyebildiğiniz, sınıflar ekleyebildiğiniz sürece de bu öğreticide açıklanan yöntemi kendi sitenizde de kullanabilirsiniz. .
Ajansta Headroom.js’yi gerçekten seviyoruz ve temel olarak sabit başlık ayarlarına sahip web sitelerimizin her birine yüklüyoruz. Bu, tüm E-Niaga binalarımızı, birçok şirket web sitemizi ve daha fazlasını içerir. Burada kullanımın faydaları çok büyüktür ve eksiklik yoktur. Kafa alanının kütüphanesi, javascript vanilyasında yapılmış bağımlılık yoktur, bir kod nasıl yapacağınızı anlamasanız bile, sadece birkaç kilobayt ve dakikalar içinde kurulabilir. Bu tanıtımla, Headroom.JS’nin Oxygen Builder web sitesine nasıl kurulacağından bahsedelim.
Bir video eğitimi izlemek istiyorsanız, Headroom.js nasıl kullanılacağına dair 16 dakikalık bir kılavuzdur.
Bu içerik gibi mi? Kanalımıza abone olun!
İzotropik’e abone olun
Buradaki süreç çok basit. İlk olarak, JavaScript kütüphanesini yüklüyoruz, sonra CSS yüklüyoruz ve son olarak web sitesinde başlık öğelerini başlatıyoruz. Headroom.js nasıl çalışır, ancak yüklemeden önce bu kütüphanenin gerçekte nasıl çalıştığını tartışalım. JavaScript, kullanıcı aşağı doğru kaydırdığında, yukarı doğru kaydırdığında ve başlığın kapanışını sayfanın üstü veya altına ile tanımlar. Ardından, çeşitli CSS sınıfları uygular. Örneğin, kullanıcı CSS. Headroom – PIN altındaki antrenmanlar dinamik olarak uygulandığında. Kullanıcı sayfanın en üstüne eğitildiğinde, CSS. Headroom – üst sınıf. Daha sonra bu bireysel sınıfı alıyoruz, onlar için CSS yazıyoruz, daha sonra sınıf eklendiğinde uygulanır ve sınıf silindiğinde silinir. .Headroom’un – web sitesi başlığının ziyaretçilere görüntülenmesi gerektiği anlamına geldiğinden, bunu yapan CSS yazabiliriz. Bu açıklama ile, web sitenizde kaydırma yaparken gizli bir başlık almak için Headroom.js nasıl kullanılacağına dair öğreticimize gidelim. (Yalnızca oksijen üreticisi) Web sitenizi oluşturmak için oksijen üreticisini kullanmıyorsanız, başlığınızı hazırlayın. Oksijen üreticisini kullanırsanız, bu kütüphanede başlık oluşturucuyu kullanmayın. Aslında, başlık üreticisini asla kullanmamayı ve sadece bölümü yapmamasını, ana ayar paneli üzerinden başlık etiketini eklememesini ve içeriğinizi içine yerleştirmemesini öneririz. Bu, düzen üzerinde daha fazla kontrol sağlar.
Başlık üreticisinin iyi olmasının tek nedeni, yapışkan bir etki eklemesidir, ancak Headroom.js kütüphanesini kullanırsak mantıklı değildir. Daha fazla açıklama için, yukarıdaki oksijen üreticisi ve wordpress.instal Headroom.js için bu adımı ayrıntılı olarak açıklayan videoyu izleyin, video öğreticisinde, yalnızca gelişmiş komut dosyası girişine indirgenen JS sürümünü kopyalayıp ekleriz. . Bu saf javascript, bu yüzden tek yapmamız gereken WP_Footer dosyasına JavaScript parçaları eklemek.
Bunu göndermek için CDN’yi de kullanabilirsiniz: https://unpkg.com/headroom.js
Headroom.js’nin başlatılması aynı girişte, komut dosyasını da başlatırız. Ancak bu, JavaScript’in gerekli olduğu ve belirli öğelere çeşitli CSS sınıflarının uygulanmasının gerekli olduğunu söylüyor. Bu durumda, yalnızca kendisiyle ilişkili
Var options = {// PX’de dikey ofset Eleman ilk sıralanmadan önce ilk önce dengesiz: 0,} Bu sabit başlık slayt efekti uygulayan CSS ekle Slayt efekti kalıcı başlığımıza uygulamak için kullandığımız temel CSS’dir. Web sitesinde istediğiniz yere bunu ekleyin. .Headroom {Will-Change: Transform; -Webkit-Transition: -Webkit 200ms doğrusal; Geçiş: -Webkit -Transform 200ms doğrusal; -O-geçiş: 200 ms lineer dönüşüm; Geçiş: Dönüşüm 200 ms doğrusal; Geçiş: Dönüşüm 200ms lineer, -webkit -transform 200ms lineer; } .Headroom-pined {-webkit-transform: translatey (%0); -MS-Transform: Translatey (%0); Dönüşüm: Translatey (%0); } .Headroom-Ofpined {-Webkit-Transform: Translatey (%-100); -MS-Transform: Translatey (%-100); Dönüşüm: Translatey (%-100); } Ayrıca, kaydırma yaparken arka plan rengini dinamik olarak uygulayan, sayfanın üst kısmına yakın olduğunda tüm başlığın boyutunu değiştiren ve bu kütüphane tarafından uygulanan ek CSS sınıfını kaydırma yaparken veya çeşitli sayfada kullanan ek CSS de yazabilirsiniz. pozisyonlar. sayfa. Bu CSS, komut dosyası regülatörü, oksijen üreticisi için Universal CSS veya web sitenizin kullandığı herhangi bir stil sayfası eklemek için bir takip komut dosyası kullanabilirsiniz. Oksijen üreticisi için teklif içeriği, genellikle bir başlık ve altbilgi oluşturmak için catchall şablonunu kullanırız. Başlıklar ve altbilgiler arasında derin bir içerik bloğu var. İç içerik bloğunu başlığın yüksekliği ile telafi ediyoruz (üst kenar boşluğunu veya dolgu üstünü kullanabilirsiniz), çünkü bir şeyi çeşitli içeriği örtecek şekilde konumlandırır.
Bunu yukarıda belirtilen 200 piksel ofset seçeneğiyle birleştirerek, tüm içerik görünür ve doğru hizalanır.Sonuç Bu noktada, artık kullanıcı sayfayı eğittiğinde görünür olmayan sabit bir başlığınız var ve kullanıcı sayfayı eğittiğinde yeniden ortaya çıkıyor.Bu, kullanıcı deneyimi, web sitelerinin kullanımı ve eklemesi çok kolay olan genel çekici efektler için iyidir. Headroom.js’nin web sitenize uygulanması hakkında öğreticiler yararlıdır, sorularınız varsa, lütfen aşağıdaki yorumlar bölümüne başvurun .Ayrıca, YouTube kanalımıza abone olmayı ve oksijen oluşturucuya yapışkan başlıklar ekleme konusunda ek netlik için video eğitimini izlemenizi öneririz.
Bunu yukarıda belirtilen 200 piksel ofset seçeneğiyle birleştirerek, tüm içerik görünür ve doğru hizalanır.Sonuç Bu noktada, artık kullanıcı sayfayı eğittiğinde görünür olmayan sabit bir başlığınız var ve kullanıcı sayfayı eğittiğinde yeniden ortaya çıkıyor.Bu, kullanıcı deneyimi, web sitelerinin kullanımı ve eklemesi çok kolay olan genel çekici efektler için iyidir. Headroom.js’nin web sitenize uygulanması hakkında öğreticiler yararlıdır, sorularınız varsa, lütfen aşağıdaki yorumlar bölümüne başvurun .Ayrıca, YouTube kanalımıza abone olmayı ve oksijen oluşturucuya yapışkan başlıklar ekleme konusunda ek netlik için video eğitimini izlemenizi öneririz.
