Önceki makaleden devam: Kullanıcı arabiriminin görmesi gereken 8 HTML + CSS becerisi (2. bölüm)
Orijinal: https://blog.csdn.net/TriDiamond6/article/details/105222289
5. Resim paralaks etkisi
Bu süper havalı efekt resmi web sitesinde çok popülerdir.Bu efekt kullanıcılara görsel bir etki getirebilir ve ayrıca web sitemize canlılık getirebilir. Sıradan web sayfası resimleri web sayfasıyla birlikte kayacak, ancak görsel efekt resmi altta sabitlenecek ve yalnızca resmin bulunduğu penceredeki öğeler hareket edecektir.
Yalnızca CSS kullan
Yanılmıyorsunuz, bu efekt sadece CSS ile kolayca elde edilebilir! Yalnızca arka plan ekini kullanmamız gerekir: bir CSS arka plan görüntüsünün sabit özelliği, bu özellik arka planı görünüm alanına göre düzeltir. Bir öğe kaydırma mekanizmasına sahip olsa bile, arka plan öğenin içeriğiyle birlikte kaymayacaktır.
Gerçekleşme teorisi:
1. Arka plan ekleyin: url () ve arka plan boyutu: resmi içeren öğeyi örtün (ikinci öznitelik resmi kapak olarak tanımlamak için uygundur, böylece resim boyutu otomatik olarak uyarlanabilir ve resmin tamamı büyük bir ekranda görüntülenir. )
2. Ardından özellik arka plan ekini ekleyin: düzeltildi
3. Son olarak, bu öğeye bir yükseklik:% 100 veya herhangi bir yükseklik: 400 piksel ekleyin
Bu kadar basit! Şüphe etmeyin, sadece kodu yükleyin, herkes kendiniz deneyebilir!
HTML
< div class = "sarmalayıcı" > < div class = "paralaks-img" > < / img > < p > Buraya bir sürü metin girin, daha fazlasını elde etmeye çalışın < / p > < / div >CSS
.wrapper { yükseklik: 100wh; } .parallax-img { arka plan eki: sabit; arka plan konumu: merkez; arka plan tekrarı: yineleme yok; arka plan boyutu: kapak; yükseklik:% 100; arka plan resmi: url (" } p { yazı tipi boyutu: 20px; dolgu: 1.5rem 3rem; minimum yükseklik: 1000 piksel; // Metin içeriğiniz yeterli olmadığında, efekti görmek için yeterli yüksekliği de tutabilirsiniz, elbette, yeterli metne sahipseniz, buna ihtiyacınız olmaz }Bilgi özeti
- background-attachment: sabit - arka planı görünüm alanına göre düzeltin. Bir öğe kaydırma mekanizmasına sahip olsa bile, arka plan öğenin içeriğiyle birlikte kaymayacaktır.
- background-size: cover - Resmin boyutu otomatik olarak uyarlanabilir ve resmin tamamı büyük bir ekranda görüntülenir.
CSS + JavaScript kullanın
Bazı çocukların ayakkabıları bu durum karşısında şok olmayabilir veya yine de yeterince heyecan verici olmadıklarını hissedebilirler. O halde ileri bir örneğe gelelim Yukarıdaki örnekte, resim kayarken sabitlenmiştir. JavaScript yardımı eklersek, bu sayfayı takip eden pencere görüntüsünün yavaşça kaymasını sağlayarak etkiyi daha dinamik ve daha etkili hale getirebiliriz.
Gerçekleşme teorisi
Öncelikle tipografiden bahsedelim, çünkü sayfayı kaydırdığımızda görüntüyü dengelemek için JavaScript kullanmamız gerekiyor, bu yüzden görüntüyü bir hıza göre yukarı veya aşağı hareket ettirebilmemiz için görüntüye bir CSS özelliği vermemiz gerekiyor. Bu örnekte, tüm resimleri bir div içine sarıyoruz, sınıf adı block. Bu div'e göreceli konumlandırma özelliği konumu verilir: göreli Bu zamanda, ona bir resim ekleyebilir ve sonra resmin mutlak olarak div kutusunda konumlanmasını sağlayabiliriz: mutlak.
Ancak resim çok büyük olabilir, resmi tanımladığımız kutuyu aşmamalıyız, bu nedenle div'imiz de taşma verir: gizli ve yükseklik:% 100. Bu şekilde, div kutusunu aşarsa resim gizlenecektir.
Düzen kodu aşağıdaki gibidir:
< div class = "blok" > < img src = "https://unsplash.it/1920/1920/?image=1005" data-speed = "- 1" class = "img-parallax" / > < h2 > Paralaks hız -1 < / h2 > < / div > < div class = "blok" > < img src = "https://unsplash.it/1920/1920/?image=1067" data-speed = "1" class = "img-parallax" / > < h2 > Paralaks hız 1 < / h2 > < / div > html, body { kenar boşluğu: 0; dolgu: 0; yükseklik:% 100; genişlik:% 100; yazı tipi ailesi: 'Amatic SC', el yazısı; } .blok{ genişlik:% 100; yükseklik:% 100; konum: göreceli; taşma: gizli; yazı tipi boyutu: 16px; } .block h2 { konum: göreceli; Ekran bloğu; metin hizalama: merkez; kenar boşluğu: 0; üst:% 50; dönüştürme: translateY (-50%); yazı tipi boyutu: 10vw; Beyaz renk; yazı tipi ağırlığı: 400; } .img-parallax { genişlik: 100vmax; z-endeksi: -1; konum: mutlak; üst: 0; sol:% 50; dönüşümü: çevir (-50%, 0); işaretçi olayları: yok }Bu düzeni elde etmek için, kaydırdığınızda resim hareket etmeyecektir. Çünkü son adım, resmin canlandırılması için JavaScript'in yardımını eklemektir.
< script src = "https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" > < /senaryo > < senaryo > // her resim öğesini almak için döngü yapın $ (". img-parallax"). her biri (function () { var img = $ (bu); var imgParent = $ (bu) .parent (); function parallaxImg () { var hız = img.data ("hız"); / / Her resim için ayarlanan ofset hızını alın var imgY = imgParent.offset (). Top; // Resim kutusunun Y konumunu alın var winY = $ (this) .scrollTop (); // Geçerli slaytı al Pozisyon var winH = $ (this) .height (); // Tarayıcı penceresinin yüksekliğini alın var parentH = imgParent.innerHeight (); // Görüntü kutusunun iç yüksekliğini alın // Tarayıcı penceresinin alt kısmının konumu var winBottom = winY + winH; // Mevcut resmin tarayıcı penceresine girip girmeyeceği (winBottom > imgY galibiyet < imgY + parentH) {// Resmin hareket etmeye başlaması gereken konumu hesaplayın var imgBottom = (winBottom-imgY) * speed; // Resmin hareket etmeyi durdurması gereken konumu hesaplayın var imgTop = winH + parentH; // Baştan sona hareket edin Hareketin yüzdesi (başlangıç ve bitiş pikselleri + hareket hızına göre) var imgPercent = (imgBottom / imgTop) * 100 + (50-speed * 50);} img.css ({top: imgPercent + "%", transform: "translate (-50%, - "+ imgPercent +"%) ",});} $ (belge) .on ({kaydırma: function () {parallaxImg ();}, hazır: function () {parallaxImg ();} ,});}); < /senaryo >Bilgi özeti
- pozisyon: göreli - Göreli konumlandırma.
- pozisyon: mutlak - Mutlak konumlandırma.
- overflow: hidden - Gerekirse içerik, dolu kutuya sığacak şekilde kırpılır. Kaydırma çubuğu sağlanmaz.
6. Kırpılmış görüntünün animasyonu
CSS3'ten önce görüntüleri kırpmanın uygulanması da oldukça zordur. Artık kırpmayı başarmak için çok kullanışlı ve basit iki CSS3 özelliğimiz var, yani nesne sığdır ve nesne konumu Bu iki özellik, görüntünün en boy oranını etkilemeden görüntünün boyutunu değiştirmemize izin verir.
Elbette, görüntü kırpma işlevini gerçekleştirmek için görüntü işleme araçlarını kullanabilir veya JavaScript ve diğer eklentileri kullanabiliriz. Ancak CSS3 özellikleri nedeniyle, sadece kırpmakla kalmıyoruz, aynı zamanda resmin dinamik etkisini yaratmak için kırpılmış özellikleri de kullanabiliriz.
Örneğimizi daha basit hale getirmek için kullanıyoruz < giriş türü = "onay kutusu" > Checkbox öğesi, böylece başlangıç efektini tetiklemek için işaretli sözde sınıfını kullanabiliriz. Yani örnekte JavaScript'in yardımına hiç ihtiyacımız yok.
Uygulama prensibi:
1. Önce, resme bir genişlik ve yükseklik verin: 1080px ve genişlik: 1920px.
İkinci olarak, girdi seçildiğinde img etiketinin stil değişikliğini kilitlemek için CSS seçiciyi kullanın. Seçildiğinde, görüntü için yeni bir genişlik ve yükseklik ayarlayın, burada her 500 piksele genişlik ve yüksekliği veriyoruz: genişlik: 500 piksel, yükseklik: 500 piksel.
3. Ardından, genişlik ve yükseklik değiştirildiğinde resmin animasyonlu bir geçiş efekti olmasını sağlamak için bir geçiş efekti ve zaman ekledik: geçiş: genişlik 2s, yükseklik 4s ;.
4. Son olarak, resmin en boy oranını korumak için nesne sığdır: kapak ve nesne konumu: sol üst niteliği ekleyin ve işiniz bitti!
Tamamlanan koda bir göz atalım:
Kırpılan resmi kontrol edin < input type = "onay kutusu" / > < br / > < img src = "https://img-blog.csdnimg.cn/2020032122230564.png" alt = "Rastgele" / > input { dönüşümü: ölçek (1.5); / * Sadece onay kutusunun boyutunu büyütmek için kullanılır * / kenar boşluğu: 10px 5px; renk: #fff; } img { genişlik: 1920px; yükseklik: 1080px; geçiş: 0s; } / * Css seçici, onay kutusu seçildiğinde durumu kilitler * / girdi: işaretlendi + br + img { genişlik: 500px; yükseklik: 500px; nesne uyumu: kapak; nesne konumu: sol üst; geçiş: genişlik 2s, yükseklik 4s; }Bilgi özeti
object-fit - CSS özelliği, değiştirilebilir öğenin içeriğinin, yüksekliği ve genişliğine göre belirlenen kutuya nasıl sığması gerektiğini belirtir.
object-position - Öğe çerçevesindeki değiştirilen öğenin içerik nesnesinin hizalamasını değiştirmek için kullanılır.
geçiş - geçiş, bir öğe farklı durumlar arasında geçiş yaptığında farklı geçiş efektleri tanımlayabilir.
7. Karışık mod (Karışım)
Photoshop kullanmış biri harman moduna aşina ise, hepimiz harman modunun çok güçlü olduğunu biliyoruz ve aynı zamanda p-resimlerde çok yaygın olarak kullanılan bir işlevdir. Ancak doğrudan tarayıcının CSS'sinde kullanılabileceğini hiç hayal ettiniz mi? Bizim için, bizim için resim yapmak için tasarımcılara ihtiyacımız yok ve ön ucumuz da karma mod elde edebilir.
CSS'de arka plana sadece bir harmanlama modu ekleyemiyoruz, herhangi bir elemanın arka planına bir harmanlama modu ekleyebiliriz, böylece daha önce aklınıza gelmeyen birçok efekt ve tipografi yapabilirsiniz.
Bir öğeye bir karışım modu eklemek için, yalnızca bir CSS özelliği karışım-karışım modu kullanmamız gerekir.
Basit gerçekleştirme ilkesi:
İlk önce sadece bir h1 başlık etiketi eklememiz gerekiyor
< h1 > Karıştırma modu: renk soldurma < / h1 >Daha sonra mix-blend-mode'daki color-soldurma modunu h1 etiketine ekliyoruz, ancak arka plan rengini eklememiz gerektiğine dikkat edilmelidir: body ve html için beyaz, yoksa bu etkinin geçersiz olacağını göreceksiniz. H1 bir renk vermediğimizden, üst seviyeden otomatik olarak miras alınacak ve harmanlama modu arka plan rengini filtreliyor, bu nedenle gövde ve html'nin bir arka plan rengine sahip olması gerekiyor.
h1 { mix-blend-mode: renk soldurma; yazı tipi ailesi: yahei; yazı tipi boyutu: 5rem; metin hizalama: merkez; kenar boşluğu: 0; dolgu: 20vh 200px; renk: # D1956C; } html, body { kenar boşluğu: 0; arka plan rengi: beyaz; } vücut { arka plan resmi: url (https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1ixid=eyJhcHBfaWQiOjEyMDd9auto=formatfit=cropw=3302q=80); arka plan tekrarı: yineleme yok; arka plan boyutu: kapak; min-yükseklik: 100vh; taşma: gizli; }Çeşitli özel efektler oluşturmak için h1 etiketinin arka plan görüntüsünü ve yazı tipi rengini değiştirin.
Bilgi özeti
- mix-blend-mode - CSS özelliği, öğenin içeriğinin, öğenin hemen üst öğesinin içeriği ve öğenin arka planıyla nasıl karıştırılması gerektiğini açıklar.
8. Şelale düzeni
CSS Grid ve Flexbox, çeşitli duyarlı mizanpajları uygulamamızı daha kolay, daha kolay ve daha hızlı hale getiriyor ve mizanpajda hızlı ve rahat bir şekilde yatay ve dikey oynatma uygulamamıza izin veriyor. Ancak geçmişi hatırlamak oldukça zor.
Bu yeni düzen yöntemleri, şelale akış düzeni gibi önceki birçok düzen problemini çözmemize izin verse de, onlarla basitçe uygulanamazlar. Çünkü şelaleler genellikle aynı genişliğe sahip olmakla birlikte yüksekliği resme göre uyarlanabilir. Ve resmin konumu da yukarıdaki resmin konumu ile belirlenir.
Aslında, şelale akış düzenini elde etmenin en iyi yolu, çoğu dergideki metin sütunlarını dizmek için kullanılan CSS sütun özellik paketini kullanmaktır. Ancak şelalelerin döşenmesi için de özellikle yararlıdır. Daha önce şelale akışını uygulamak gerektiğinden, görüntünün yüksekliğini hesaplamak ve ardından her görüntünün konumunu ve konumunu belirlemek için JavaScript'in yardımına sahip olmak gerekiyordu, bu nedenle artık sütun özellikleriyle, saf CSS kullanılarak uygulanabilir.
Uygulama prensibi:
Bu düzeni elde etmek için, önce tüm içeriği bir div öğesinde sarmamız ve ardından bu öğeye sütun genişliği ve sütun aralığı niteliklerini vermemiz gerekir.
Ardından, herhangi bir öğenin iki sütun arasında bölünmesini önlemek için, sütun sonu: her öğeye kaçının.
Büyülü efekt mükemmel bir şekilde elde edildi, sıfır JavaScript.
Koda bir göz atalım:
< div class = "sütunlar" > < şekil > < img src = "https://source.unsplash.com/random?city" alt = "" / > < / şekil > < şekil > < img src = "https://source.unsplash.com/random?night" alt = "" / > < / şekil > < şekil > < img src = "https://source.unsplash.com/random?developer" alt = "" / > < / şekil > < şekil > < img src = "https://source.unsplash.com/random?building" alt = "" / > < / şekil > < şekil > < img src = "https://source.unsplash.com/random?water" alt = "" / > < / şekil > < şekil > < img src = "https://source.unsplash.com/random?coding" alt = "" / > < / şekil > < şekil > < img src = "https://source.unsplash.com/random?stars" alt = "" / > < / şekil > < şekil > < img src = "https://source.unsplash.com/random?forest" alt = "" / > < / şekil > < şekil > < img src = "https://source.unsplash.com/random?girls" alt = "" / > < / şekil > < şekil > < img src = "https://source.unsplash.com/random?working" alt = "" / > < / şekil > < / div > .columns { sütun genişliği: 320px; sütun aralığı: 15px; genişlik:% 90; maksimum genişlik: 1100 piksel; kenar boşluğu: 50px otomatik; } .columns şekil { ekran: satır içi blok; kutu gölgesi: 01px 2px rgba (34, 25, 25, 0.4); sütun-içi: kaçının; kenarlık yarıçapı: 8px; } .columns figure img { genişlik:% 100; yükseklik: otomatik; kenar boşluğu alt: 15px; kenarlık yarıçapı: 8px; }Bilgi özeti
sütun genişliği - CSS özelliği, optimum bir sütun genişliği önerir. Sütun genişliği, başka bir sütun eklemeden önce sütunun maksimum genişliğidir.
sütun genişliği - Bu CSS özelliği, öğe sütunları arasındaki boşluk (cilt payı) boyutunu ayarlamak için kullanılır.
column-break-inside - Nesnenin içinde kırık olup olmadığını ayarlayın veya alın.
sonuç olarak
Bu 8 ön uç ipucunun ve özel efektlerin herkese yardımcı olacağını ve az çok yeni bir ön uç bilgisini özümseyeceğini umuyorum. Aslında, bu makalede bahsedilen içeriklerin çoğu kazmaya ve öğrenmeye değer. Görece basit yaptığım bazı örnekler var ama aslında sınırsız olasılıklar var. Ön uç ayakkabılarını seven çocuklar, ön cephede daha derine inmeye devam edelim, aşkımız sonsuza dek yansın!
Sonunda size ön uca olan sevgimi ve tavrımı anlatmak istiyorum.
Geçtiğimiz birkaç yıl içinde ön yüze bakıldığında, gelişme gerçekten sıçramalar ve sınırlarla ilerledi.Ön uç dizgiden, H5 sayfaları olarak HTML5 + CSS3'ten ön uç bileşenleştirmeye kadar çeşitli UI çerçeveleri gökyüzünde uçuyor.
Başlangıçta çılgınlığın yanı sıra UI çerçevesini kullandım.İlk başta çok uygun buldum.Yeni bir projeye geldiğimde doğrudan bir UI çerçevesine gittim.Geliştirme hızı da çok hızlıydı. Ancak zamanla, ön uç geliştirmenin verileri işleme, arayüzleri yerleştirme ve etkileşimi gerçekleştirme haline geldiğini hissediyorum.
Bir gün, bazı yabancı ön uç tasarımlarını ve çerçevelerini okurken, aniden çoğu yerel ön uç geliştiricinin bazı ilginç düzenler ve özel efektler yapmak için CSS3'ü kullanmadığını fark ettim. Günümüzde, piyasadaki sistemler ve sayfaların hepsi aynıdır.Genel olarak, sistemleri ve uygulamaları oluşturmak için bazı iyi bilinen UI çerçeveleri kullanılmaktadır.Temel olarak, kendi başınıza birkaç tür dizgi vardır. Ön uç artık önceki ön uç değil ve ruhu yok.
Ancak, ön ucu öğrenmeye başladığımızda, bize en çok başarı duygusunu ve ön uçun özellikle ilginç olduğu hissini verdiğini hatırlayalım. Kendimizi mucizevi hissettiren düzen, özel efektler ve etkileşim türüdür. Çok güzel, çok havalı bir sayfa ve özel efektleri başarıyla hayata geçirdiğimiz duygusu bizi her geçen gün daha heyecanlandırıyor, heyecanlandırıyor.
Bununla birlikte, bazı şirketlerde, Ar-Ge departmanı hızlı geliştirme gerektirir ve UI tasarım departmanı da zamanla kontrol edilir ve kısıtlanır, bu nedenle yavaş yavaş UI çerçevesinin kısıtlamalarına girmiştir. Bu UI çerçeveleri etrafında sistemler ve uygulamalar tasarlayın ve geliştirin.
Ön ucu seven bir geliştirici olarak, çoğu projede sayfa etkileşimli özel efektleri dizmek ve uygulamak konusunda hala ısrar ediyorum. Ardından, temel olarak bazı küçük bileşenlerin ve ortak bileşenlerin hızlı uygulanmasını azaltmak için UI çerçevesini bir yardımcı olarak kullanın. (Association for Pursuit of Perfection and Appearance'ın programcısı olduğum söylenebilir)
Telif hakkı bildirimi: Bu makale, CSDN blog yazarı "Üç Elmas" ın orijinal makalesidir ve CC 4.0 BY-SA telif hakkı sözleşmesine uygundur. Lütfen orijinal kaynak bağlantısını ve yeniden basım için bu bildirimi ekleyin.
Orijinal bağlantı: https://blog.csdn.net/TriDiamond6/article/details/105222289
