Garis-Garis Latar Belakang Animasi Yang Bertransisi di Hover

Seberapa sering Anda meraih CSS background-size Properti? Jika Anda seperti saya — dan mungkin banyak orang front-end lainnya — biasanya saat itulah Anda background-size: cover gambar untuk mengisi ruang seluruh elemen.

Nah, saya diberikan tantangan menarik yang membutuhkan ukuran latar belakang yang lebih canggih: garis latar belakang yang bertransisi saat melayang. Lihat ini dan arahkan dengan kursor Anda:

Ada lebih banyak hal yang terjadi di sana selain ukuran latar belakang, tetapi itulah trik yang saya perlukan untuk membuat garis-garis menjadi transisi. Saya pikir saya akan menunjukkan kepada Anda bagaimana saya sampai di sana, bukan hanya karena menurut saya itu adalah efek visual yang sangat bagus, tetapi karena itu mengharuskan saya untuk berkreasi dengan gradien dan mode campuran yang menurut saya mungkin Anda nikmati.

Mari kita mulai dengan penyiapan yang sangat mendasar agar semuanya tetap sederhana. Aku sedang berbicara tentang satu

dalam HTML yang ditata sebagai kotak hijau:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

Menyiapkan garis-garis latar belakang

Jika pikiran Anda langsung tertuju pada gradien linier CSS saat Anda melihat garis-garis itu, maka kita sudah berada di halaman yang sama. Kita tidak bisa benar-benar melakukan pengulangan gradien dalam kasus ini karena kita ingin garis menempati jumlah ruang yang tidak rata dan mentransisikannya, tetapi kita dapat membuat lima garis dengan merantai lima latar belakang di atas warna latar belakang yang ada dan menempatkannya di atas -kanan wadah:

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

Saya membuat garis horizontal, tapi kita juga bisa vertikal dengan pendekatan yang kita bahas di sini. Dan kita dapat sedikit menyederhanakannya dengan properti khusus:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

Jadi, --gt nilai adalah gradien dan --n adalah konstanta yang kami gunakan untuk menyenggol garis ke bawah sehingga diimbangi secara vertikal. Dan Anda mungkin telah memperhatikan bahwa saya belum menetapkan gradien yang sebenarnya, melainkan garis-garis hitam pekat di linear-gradient() fungsi — itu disengaja dan kita akan membahas sedikit tentang mengapa saya melakukannya.

Satu hal lagi yang harus kita lakukan sebelum melanjutkan adalah mencegah latar belakang kita terulang kembali; jika tidak, mereka akan menyusun dan mengisi seluruh ruang:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

Kita bisa mengatur background-repeat dalam background steno, tetapi saya memutuskan untuk menguraikannya di sini agar mudah dibaca.

Mengimbangi garis-garis

Kami secara teknis memiliki garis-garis, tetapi cukup sulit untuk mengatakannya karena tidak ada jarak di antara garis-garis itu dan menutupi seluruh wadah. Ini lebih seperti kita memiliki kotak hitam yang solid.

Di sinilah kita bisa menggunakan background-size Properti. Kami ingin mengatur tinggi dan lebar garis dan properti mendukung sintaks dua nilai yang memungkinkan kami melakukan hal itu. Dan, kita dapat merantai ukuran tersebut dengan koma yang memisahkannya dengan cara yang sama seperti yang kita lakukan background.

Mari kita mulai dengan mengatur lebar terlebih dahulu. Menggunakan sintaks nilai tunggal untuk background-size atur lebar dan default tingginya auto. Saya menggunakan nilai yang benar-benar arbitrer di sini, jadi atur nilainya sesuai dengan yang terbaik untuk desain Anda:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

Jika Anda menggunakan nilai yang sama dengan saya, Anda akan mendapatkan ini:

Sepertinya kita tidak mengatur lebar untuk semua garis, bukan? Itu karena auto tinggi perilaku sintaks nilai tunggal. Garis kedua lebih lebar dari yang lain di bawahnya, dan menutupi mereka. Kita harus mengatur ketinggian agar kita dapat melihat pekerjaan kita. Mereka semua harus memiliki ketinggian yang sama dan kita benar-benar dapat menggunakan kembali milik kita --n variabel, sekali lagi, untuk menjaga hal-hal sederhana:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

Ah, jauh lebih baik!

Menambahkan celah di antara garis-garis

Ini adalah langkah yang benar-benar opsional jika desain Anda tidak memerlukan celah di antara garis-garis, tetapi milik saya melakukannya dan tidak terlalu rumit. Kami mengubah ketinggian setiap garis background-size sedikit, mengurangi nilainya sehingga tidak memenuhi ruang vertikal penuh.

Kita dapat terus menggunakan milik kita --n variabel, tetapi kurangi jumlah kecil, katakanlah 5px, Menggunakan calc() untuk mendapatkan apa yang kita inginkan.

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

Itu banyak pengulangan yang bisa kita hilangkan dengan variabel lain:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Masking dan blending

Sekarang mari kita tukar palegreen warna latar belakang yang telah kami gunakan untuk tujuan visual hingga saat ini untuk warna putih.

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

Pola hitam putih seperti ini sangat cocok untuk masking dan blending. Untuk melakukan itu, pertama-tama kita akan membungkus

dalam wadah induk baru dan perkenalkan yang kedua

di bawahnya:

Kami akan melakukan sedikit pemfaktoran ulang CSS di sini. Sekarang kami memiliki wadah induk baru, kami dapat meneruskan wadah tetap width dan height properti yang kami gunakan di

di sana:

section {
  width: 500px;
  height: 500px;
} 

Saya juga akan menggunakan CSS Grid untuk memposisikan keduanya

elemen di atas satu sama lain. Ini adalah trik yang sama yang digunakan Temani Afif untuk membuatnya galeri gambar super keren. Idenya adalah kita menempatkan kedua div di atas wadah penuh menggunakan grid-area properti dan sejajarkan semuanya ke tengah:

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

Sekarang, lihat ini. Alasan saya menggunakan gradien padat yang berubah dari hitam menjadi hitam sebelumnya adalah untuk menyiapkan kita untuk menutupi dan memadukan keduanya

lapisan. Ini bukan penyamaran yang sebenarnya dalam artian kita menyebutnya mask properti, tetapi kontras antara lapisan mengontrol warna apa yang terlihat. Area yang ditutupi oleh warna putih akan tetap putih, dan area yang ditutupi oleh warna hitam akan tembus. Dokumentasi MDN tentang mode campuran memiliki penjelasan yang bagus tentang cara kerjanya.

Agar itu berfungsi, saya akan menerapkan gradien nyata yang ingin kita lihat pertama kali

sambil menerapkan aturan gaya dari inisial kami

pada yang baru, menggunakan :nth-child() pemilih semu:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Jika kita berhenti di sini, kita sebenarnya tidak akan melihat perbedaan visual dari apa yang kita miliki sebelumnya. Itu karena kami belum melakukan pencampuran yang sebenarnya. Jadi, mari kita lakukan itu sekarang menggunakan screen modus campuran:

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

Saya menggunakan warna background beige pada demo yang saya tunjukkan di awal artikel ini. Pewarnaan off-white yang sedikit lebih gelap memungkinkan sedikit warna merembes melalui sisa latar belakang:

Efek melayang

Bagian terakhir dari teka-teki ini adalah efek hover yang memperlebar garis menjadi lebar penuh. Pertama, mari tulis pemilih kita untuk itu. Kami ingin ini terjadi ketika wadah induk (

dalam kasus kami) melayang. Saat melayang, kami akan mengubah ukuran latar belakang dari garis-garis yang ada di detik

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

Kami ingin mengubah background-size garis-garis dengan lebar penuh wadah sambil mempertahankan ketinggian yang sama:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

Itu "menjepret" latar belakang ke lebar penuh. Jika kita menambahkan sedikit transition untuk ini, maka kita melihat garis-garis melebar saat melayang:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

Inilah demo terakhir itu sekali lagi:

Saya hanya menambahkan teks di sana untuk menunjukkan seperti apa rasanya menggunakan ini dalam konteks yang berbeda. Jika Anda melakukan hal yang sama, pastikan ada cukup kontras antara warna teks dan warna yang digunakan dalam gradien agar sesuai. pedoman WCAG. Dan sementara kami membahas secara singkat tentang aksesibilitas, itu sangat berharga mempertimbangkan preferensi pengguna untuk mengurangi gerakan ketika datang ke efek hover.

Itu bungkus!

Cukup rapi, bukan? Saya pasti berpikir begitu. Apa yang saya suka tentang ini, juga, adalah cukup dapat dipertahankan dan disesuaikan. Misalnya, kita dapat mengubah tinggi, warna, dan arah garis dengan mengubah beberapa nilai. Anda bahkan dapat memvariasikan beberapa hal lagi di sana — seperti warna dan lebar — untuk membuatnya lebih dapat dikonfigurasi.

Saya sangat tertarik jika Anda melakukan pendekatan ini dengan cara yang berbeda. Jika demikian, silakan bagikan di komentar! Akan menyenangkan untuk melihat berapa banyak variasi yang dapat kami kumpulkan.