Kad yang disusun dengan kedudukan melekit dan sasaran sass

Baru -baru ini, saya dapati elemen reka bentuk yang menawan di laman web Corey Ginnivan: timbunan kad yang secara dinamik meletakkan semula diri mereka semasa anda menatal.

Pada mulanya, saya menganggap ini memerlukan JavaScript yang luas. Walau bagaimanapun, saya dengan cepat menyedari penyelesaian yang elegan terletak pada position: sticky dan sentuhan sass. Daripada mereplikasi pendekatan Corey, saya memutuskan untuk membuat versi saya sendiri.

Pertama, mari kita tentukan gaya kad asas:

 badan {
  Latar Belakang: Linear-Gradient ( #e8e8e8, #e0e0e0);
}

.Wrapper {
  Margin: 0 Auto;
  Max-Width: 700px;
}

.card {
  latar belakang warna: #fff;
  Sempadan: 1px pepejal #ccc;
  Radius sempadan: 10px;
  box-shadow: 5px 5px 5px rgba (0, 0, 0, 0.1);
  Warna: #333;
  Padding: 40px;
}

Untuk mencapai kesan melekit, kami menggunakan position: sticky dan menetapkan offset atas:

 .card {
  Kedudukan: melekit;
  Atas: 10px;
  / * gaya kad lain */
}

Ini mewujudkan tingkah laku melekit awal. Untuk mensimulasikan kesan yang disusun, kami memanfaatkan gelung @for Sass:

 @for $ i dari 1 hingga 8 {
  .Card: nth-child (#{$ i} n) {
    Atas: $ i * 20px;
  }
}

Gelung ini menyesuaikan harta top untuk setiap kad, mewujudkan ilusi penyusunan.

Pendekatan ini menghasilkan hasil yang menarik secara visual. Penambahbaikan selanjutnya termasuk menyesuaikan warna bayang-bayang dan warna kad untuk estetika yang dipertingkatkan.

Walau bagaimanapun, saya ingin meneroka susun atur alternatif. Diilhamkan oleh reka bentuk lain di laman web ini, saya bereksperimen dengan susunan mendatar menggunakan Flexbox:

 .Wrapper {
  Paparan: Flex;
  limpahan-X: tatal;
}

.card {
  Ketinggian: 60VH;
  Min-lebar: 50VW;
  Kedudukan: melekit;
  Atas: 5VH;
  Kiri: 10VW;
}

Untuk menambah elemen yang dinamik, rawak, saya memasukkan fungsi random() sass ke dalam gelung:

 @for $ i dari 1 hingga 8 {
  .Card: nth-child (#{$ i} n) {
    Kiri: $ i * 20px Random (200) * 1px;
    Atas: $ i * 1px rawak (130) * 1px;
    Transform: Putar (Rawak (3) - 2 * 1Deg);
  }
}

Pengubahsuaian ini memperkenalkan offset rawak dan putaran kepada setiap kad, menghasilkan persembahan yang lebih suka bermain dan dinamik.

Kuasa dan fleksibiliti position: sticky jelas ditunjukkan dalam contoh -contoh ini.

Atas ialah kandungan terperinci Kad yang disusun dengan kedudukan melekit dan sasaran sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!