Memindahkan Latar Belakang | Trik CSS – Trik CSS – Beragampengetahuan

Kami sering menganggap gambar latar belakang sebagai tekstur atau hal-hal yang memberikan kontras pada konten yang jelas—dengan kata lain, bukan konten yang sebenarnya.Jika itu konten, Anda mungkin meraihnya <img> Bagaimanapun, aksesibilitas dan yang lainnya.

tapi terkadang Lokasi atau skala Gambar latar belakang mungkin berada di antara kutub konten dan dekorasi. Konteks adalah raja, bukan? Jika kami mengubah posisi gambar latar belakang, ini mungkin menyampaikan lebih banyak konteks atau pengalaman.

bagaimana? Mari kita lihat beberapa contoh yang pernah saya lihat.

Saat kita mulai, saya akan mengingatkan Anda bahwa dalam demo ini ada sedikit perbedaan antara gambar yang digunakan untuk dekorasi dan gambar yang digunakan sebagai konten. Perbedaan memengaruhi aksesibilitas tanpa mengumumkan latar belakang ke pembaca layar.Jika gambar Anda benar-benar gambar maka mungkin pertimbangkan <img> dengan label yang sesuai alt teks. Saat kita berbicara tentang aksesibilitas, sebaiknya pertimbangkan juga preferensi gerakan pengguna.

Tunjukkan lebih banyak lagi!

Chris Coyier memiliki demo kecil yang rapi ini beberapa tahun yang lalu.

Demonya bagus dalam banyak hal, karena merupakan cara yang rapi untuk menampilkan iklan dalam konten Anda. Anda memiliki promosi penjualan dan gambar yang memikat untuk melengkapinya.

Keterbatasan terbesar dari sebagian besar iklan, saya yakin, adalah real estat yang terbatas. Saya tidak tahu apakah Anda pernah harus menempatkan iklan di halaman, tetapi saya telah, dan biasanya, meminta pengiklan untuk memberikan gambar yang sesuai dengan dimensi piksel yang tepat sehingga aset sesuai dengan ruang.

Tapi demo Chris meringankan masalah ruang. Arahkan kursor ke atas gambar untuk melihatnya bergerak dan diskalakan.pengguna benar-benar mendapatkan lagi Ada lebih banyak konteks pada produk daripada gambar di lokasi aslinya. Ini sama-sama menguntungkan, bukan? Pengiklan dapat membuat gambar yang menarik tanpa mengorbankan konteks. Pada saat yang sama, pengguna mendapatkan beberapa nilai tambahan dari bagian gambar yang baru ditampilkan.

Jika Anda melihat markup demo, Anda akan melihat bahwa itu seperti yang Anda harapkan. Ini versi singkatnya:

<div class="ad-container">
  <a href="#" target="_blank" rel="noopener">
    <!-- Background image container  -->
    <div class="ad-image"></div>
  </a> 
  <div class="ad-content">
    <!-- Content -->
  </div>
</div>

Kita bisa berdebat tentang semantik, tapi bukan itu intinya.Kami memiliki wadah dengan tautan <div> untuk gambar latar belakang dan lainnya <div> untuk menyimpan konten.

Sejauh penataan berjalan, bagian penting ada di sini:

.container {
  background-image: url("/path/to/some/image.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 400px;
  width: 350px;
}

Tidak buruk, kan? Kami memberi wadah beberapa dimensi dan menetapkan gambar latar belakang yang tidak berulang di atasnya, diposisikan di tepi kiri bawahnya.

Trik sebenarnya ada di JavaScript.Kami akan menggunakan ini untuk mendapatkan posisi mouse dan offset wadah, lalu mengonversi nilai tersebut ke skala yang sesuai untuk menyetel background-position.Pertama, mari kita dengarkan .container elemen:

let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) {
    // Our function
  }
);

Dari sini, kita bisa menggunakan wadahnya offsetX Dan offsetY ciri. Namun kita tidak akan menggunakan nilai tersebut secara langsung, karena koordinat X memiliki nilai yang lebih kecil dari yang kita butuhkan, dan koordinat Y memiliki nilai yang lebih besar. Kita harus sedikit bereksperimen untuk menemukan konstanta yang berfungsi sebagai pengali.

Sedikit kabur, tapi saya menemukan 1.32 Dan 0.455 Berlaku secara terpisah untuk koordinat X dan Y.Kami mengalikan offset dengan nilai-nilai ini, menambahkan a px unit pada hasil, yang kemudian diterapkan background-position nilai.

let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) {
    container.style.backgroundPositionX = -e.offsetX * 1.32 + "px";
    container.style.backgroundPositionY = -e.offsetY * 0.455 + "px";
  }
);

Terakhir, kita juga dapat mengatur ulang posisi latar belakang ke posisi semula jika pengguna keluar dari penampung gambar.

container.addEventListener("mouseleave", function() {
    container.style.backgroundPosition = "0px 0px";
  }
);

Karena kita menggunakan beragampengetahuan, saya akan memberikan versi yang lebih murah yang bisa kita lakukan dengan sedikit transisi hover di CSS biasa:

cat gambar yang lebih besar

Tidak diragukan lagi Anda pernah ke beberapa toko pakaian online atau di mana pun dan menemukan fitur zoom hover.

Pola ini tampaknya selalu ada (Dylan Winn-Brown membagikan metodenya pada tahun 2016), tetapi ini hanya (saya harap) bukti kegunaannya. Saat pengguna memperbesar dan melihat jahitan sweter atau apa pun dengan lebih baik, mereka mendapatkan lebih banyak konteks.

Ini memiliki dua bagian: wadah Dan kaca pembesarKontainer . adalah satu-satunya hal yang kita perlukan di markup, karena kita akan menyuntikkan elemen kaca pembesar selama interaksi pengguna. Jadi, lihat HTML kami!

<div class="container"></div>

Di CSS, kita akan membuat width Dan height Variabel untuk menyimpan ukuran kaca pembesar itu sendiri.Lalu kami berikan itu .containerbeberapa bentuk dan background-image:

​​:root {
​​  --magnifer-width: 85;
​​  --magnifer-height: 85;
​​}

.container {
  width: 500px;
  height: 400px;
  background-size: cover;
  background-image: url("/path/to/image.png");
  background-repeat: no-repeat;
  position: relative;
}

Sebelum kita melihat kaca pembesar, kita sudah mengetahui beberapa hal tentang kaca pembesar, kita dapat menentukan gaya ini terlebih dahulu, terutama variabel yang ditentukan sebelumnya .maginifierdari width Dan height:

.magnifier {
  position: absolute;
  width: calc(var(--magnifer-width) * 1px);
​​  height: calc(var(--magnifer-height) * 1px);
​​  border: 3px solid #000;
​​  cursor: none;
​​  background-image: url("/path/to/image.png");
​​  background-repeat: no-repeat;
}

Ini adalah persegi kecil yang benar-benar diposisikan, menggunakan identik file gambar latar belakang sebagai .containerPerhatikan bahwa fungsi calc hanya digunakan di sini untuk mengonversi nilai tanpa satuan dalam variabel menjadi piksel. Atur sesuai keinginan Anda dan hilangkan duplikasi dalam kode Anda.

Sekarang, mari beralih ke JavaScript yang menyatukan semuanya. Pertama kita perlu mengakses variabel CSS yang telah ditentukan sebelumnya. Kami akan menggunakannya di beberapa tempat nanti. Kemudian kita perlu mendapatkan posisi mouse di dalam container, karena ini adalah nilai yang akan kita gunakan untuk posisi background dari kaca pembesar.

​​// Get the css variables
​​let root = window.getComputedStyle(document.documentElement);
​​let magnifier_width = root.getPropertyValue("--magnifer-width");
​​let magnifier_height = root.getPropertyValue("--magnifer-height");

let container = document.querySelector(".container");
let rect = container.getBoundingClientRect();
let x = (e.pageX - rect.left);
let y = (e.pageY - rect.top);

// Take page scrolling into account
x = x - window.pageXOffset;
y = y - window.pageYOffset;

Pada dasarnya yang kita butuhkan adalah a mousemove pendengar acara aktif .container.Kami kemudian akan menggunakan event.pageX atau event.pageY Properti Mendapat koordinat X atau Y dari mouse.tetapi untuk mendapatkan tepat Posisi relatif mouse di atas elemen, kita perlu mengurangi posisi elemen induk dari posisi mouse yang kita dapatkan dari JavaScript di atas.Cara “mudah” adalah dengan menggunakan getBoundingClientRect()yang mengembalikan ukuran elemen dan posisinya relatif terhadap viewport.

Perhatikan bagaimana pendapat saya tentang menggulir.Jika ada luapan, kurangi jendela pageX Dan pageY Offset akan memastikan efek berperilaku seperti yang diharapkan.

Pertama-tama kita akan membuat div kaca pembesar.Selanjutnya, kita akan membuat mousemove fungsi dan menambahkannya ke wadah gambar. Dalam fungsi ini, kami akan memberikan kaca pembesar atribut kelas. Kami juga akan menghitung posisi mouse dan memberi kaca pembesar nilai kiri dan atas yang kami hitung sebelumnya.

Ayo maju dan membangun magnifier ketika kita mendengar mousemove Peristiwa itu terjadi di .container:

// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);

Sekarang kita perlu memastikan itu memiliki nama kelas yang bisa kita terapkan ke CSS:

// run the function on `mousemove`
container.addEventListener("mousemove", (e) => {
  magnifier.setAttribute("class", "magnifier");
}

Contoh video yang saya tunjukkan sebelumnya menempatkan kaca pembesar di luar wadah. Kami akan membuat ini sederhana dan melapisinya di atas wadah dengan gerakan mouse.kami akan menggunakan if Hanya ketika nilai X dan Y lebih besar atau setara adalah nol, dan lebih sedikit dari lebar atau tinggi wadah. Itu harus tetap dalam batas. Pastikan untuk mengurangi lebar dan tinggi kaca pembesar dari nilai X dan Y.

// Run the function on mouse move.
container.addEventListener("mousemove", (e) => {
  magnifier.setAttribute("class", "magnifier");

  // Get mouse position
  let rect = container.getBoundingClientRect();
  let x = (e.pageX - rect.left);
  let y = (e.pageY - rect.top);
  
  // Take page scrolling into account
  x = x - window.pageXOffset;
  y = y - window.pageYOffset;

  // Prevent magnifier from exiting the container
  // Then set top and left values of magnifier
  if (x >= 0 && x <= container.clientWidth - magnifier_width) {
    magnifier.style.left = x + "px";
  }
  if (y >= 0 && y <= container.clientHeight - magnifier_height) {
    magnifier.style.top = y + "px";
  }
});

Last but not least… kita perlu men-tweak gambar latar belakang kaca pembesar sedikit. Intinya adalah pengguna mendapatkan tampilan yang lebih besar dari gambar latar belakang berdasarkan tempat terjadinya hover. Jadi, mari kita definisikan kaca pembesar yang bisa kita gunakan untuk memperbesar benda.Kemudian kami akan menentukan variabel untuk lebar dan tinggi gambar latar belakang sehingga kami memiliki sesuatu untuk mendasarkan skala dan mengatur semua nilai ini di .magnifier gaya:

// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400;

magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";

Mari dapatkan koordinat X dan Y dari gambar kaca pembesar dan terapkan .magnifierElemental background-positionSeperti posisi kaca pembesar sebelumnya, kita perlu mengurangi lebar dan tinggi kaca pembesar dari nilai X dan Y menggunakan variabel CSS.

// the x and y positions of the magnifier image
let magnify_x = x * magnify + 15;
let magnify_y = y * magnify + 15;

// set backgroundPosition for magnifier if it is within image
if (
  x <= container.clientWidth - magnifier_width &&
  y <= container.clientHeight - magnifier_height
) {
  magnifier.style.backgroundPosition = -magnify_x + "px " + -magnify_y + "px";
}

Tada!

membuatnya sinematik

Pernahkah Anda melihat efek Ken Burns? Ini adalah hal klasik dan abadi, gambarnya lebih besar dari wadahnya, lalu perlahan meluncur dan menskala seperti siput. Hampir setiap film dokumenter di dunia tampaknya menggunakannya untuk gambar diam. Jika Anda memiliki Apple TV, Anda pasti pernah melihatnya di screensaver Anda.

memiliki banyak Jika Anda ingin mendapatkan ide yang lebih baik, lihat contoh di CodePen.

Anda dapat melihat bahwa ada beberapa cara untuk mengatasi masalah ini. Beberapa menggunakan JavaScript. Lainnya adalah 100% CSS. Saya yakin pendekatan JavaScript bagus untuk beberapa kasus penggunaan, tetapi jika tujuannya hanya untuk menskalakan gambar secara halus, CSS bagus.

Kami dapat membuat hal-hal menarik dengan menggunakan banyak latar belakang, bukan satu.Atau, lebih baik lagi, jika kita memperluas aturan untuk menggunakan elemen alih-alih gambar latar belakang, kita dapat menerapkan animasi yang sama ke semua latar belakang dengan beberapa tanda hubung animation-delay Atur efeknya.

Tentu saja, ada banyak cara untuk melakukannya! Ini tentu saja dapat dioptimalkan menggunakan variabel Sass dan/atau CSS.Heck, mungkin Anda bisa menggunakan a <div> Jika demikian, silakan bagikan di komentar!

Bonus: Jadikan imersif

Saya tidak tahu ada yang lebih keren dari pena “Happy Halloween” Sarah Drasner … itu dari 2016! Ini adalah contoh yang bagus untuk melapisi latar belakang dan memindahkannya dengan kecepatan berbeda untuk menciptakan pengalaman yang hampir sinematik. OMG itu sangat keren!

GSAP adalah pendorong utama di sana, tetapi saya pikir kami dapat membuat versi sederhana yang hanya mentransisikan setiap lapisan latar belakang dari kiri ke kanan dengan kecepatan yang berbeda. Tentu, tidak sekeren itu, tapi tentu saja pengalaman dasar. Anda harus memastikan bahwa setiap gambar latar dimulai dan diakhiri secara konsisten sehingga berulang dengan lancar saat animasi diulang.

Jadilah itu! Sangat rapi, kita bisa menggunakan background, tidak hanya tekstur dan kontras. Saya sangat yakin kita bisa menerapkan banyak interaksi rapi lainnya ke latar belakang. Temani Afif melakukan hal itu dengan rangkaian efek link hover yang rapi. Apa pendapatmu? Bagikan dengan saya di komentar!