Kartları kaydırırken üst üste dizme tekniğini mutlaka görmüşsünüzdür.

Bu makalede, bunu saf CSS (ve daha fazla güzellik için biraz JS) ile kendimiz yapmayı öğreneceğiz ve gerçekten çok basit olduğundan emin olacağız.

Saf CSS ile başlayarak…

Bunun için Codepen kullanmanızı öneririm çünkü birer HTML, CSS ve JS dosyasına ihtiyacımız var. İşte temel işaretleme ve stiller içeren kalem . Kartları ortalamak için bir kap ve her biri 6 karttan oluşan iki blok var. Her kartın bir başlığı ve bazı metinleri vardır. Ayrıca kartlarımızın güzel görünmesi için temel stiller var. Gayet basit.

Şimdi, sonuç penceresinde kartlarımızı kaydırabiliriz, ancak kesinlikle birbirlerinin üzerine yığılmazlar. Onlara bunu nasıl yaptırabiliriz?

Aslında, temel yığınlamayı sadece iki satırlık CSS ile yapabiliriz!

Şimdi kartlar birikiyor ve - yalan söylemiyordum - tek yaptığımız kelimenin tam anlamıyla iki satır CSS yazmaktı! Bu nasıl mümkün olabilir? nedir position: sticky? Basitçe söylemek gerekirse, bu, öğenin en yakın kayan atasına göre belirli bir uzaklığa ulaşana kadar normal davrandığı ve bu noktada sabitlenmiş gibi davrandığı anlamına gelir. En iyi yanı, yapışkan bir öğenin her zaman ebeveyninin içinde kalmasıdır, bu nedenle ebeveyn konumunu değiştirene kadar sabit davranır - bu nedenle kartlar, içinde bulundukları blokla birlikte görünümün dışına kayar. Başlangıçta kafa karıştırıcı olabilir. , işte daha resmi bir açıklama için bir bağlantı .

Bu çözümle ilgili tek sorun, artık kartların birbiriyle tamamen örtüşmesidir.

Onları mükemmel güzelliğe dönüştürmek istiyorsak, biraz JS'ye ihtiyacımız var.

… biraz JS ekleyerek…

transformOfseti korumak için, bloktaki konumuna göre her kartın özelliğini ayarlayacağız .

İlk olarak, haritanın tüm bloklarını seçiyoruz. Bundan sonra, özelliği her bir kartın ofsetini ayarlamak için padding-bottomkullanacağımız için, özelliği kullanarak bloğun altındaki alanı koruyoruz . transformSon olarak, tüm alt öğeleri arasında dolaşıyoruz ve özelliği manuel olarak her bir alt öğenin dizinini kullanacak transformşekilde ayarlıyoruz.translateY

Artık kartlarımız istediğimiz gibi istifleniyor!

İşte son kalem .

…yığın kartlarını bir React bileşeni olarak uygulamak

Yazdığınız JS'ye baktığınızı ve "Peki, onu React/Vue/Next-great-thing uygulamamda nasıl kullanırım?" diye düşündüğünüzü anlıyorum.

Aslında, daha da basit. Aşağıdaki koda bakın.

Fazladan bir betiğe ihtiyacınız yok çünkü kartları işlemek için hareket halindeyken satır içi stiller yazmanıza izin veren bir döngü kullanıyorsunuz.

İşte bu kadar basit! Ve kartları istiflemek için yapışkan konumlandırmayı kullanmanın tek yolu bu değil. Biraz hayal gücüyle ne gibi ilginç sonuçlara ulaşılabileceğini görün .

Bu makaleyi beğendiyseniz, yeni içerikleri kaçırmamak için takip edin ve abone olun!

İyi günler!

PlainEnglish.io'da daha fazla içerik .

Haftalık ücretsiz bültenimize kaydolun . Bizi Twitter , LinkedIn , YouTube ve Discord'da takip edin .

Yazılım başlangıcınızı ölçeklendirmekle ilgileniyor musunuz ? Devreyi kontrol edin .