Membuat animasi berbasis gulir dalam tampilan penuh() – Beragampengetahuan

CSS animation-timeline Properti menerima view() Fungsi tersebut pada gilirannya mengembalikan garis waktu yang menunjukkan berapa banyak elemen yang terlihat di bagian wadah gulir yang dapat dilihat (secara resmi disebut wadah gulir). pelabuhan bergulir). Dengan kata lain, alih-alih membuat animasi berjalan secara linear berdasarkan waktu yang telah berlalu, view() Menjalankan animasi berdasarkan visibilitas elemen animasi dalam port gulir.

Saya suka menyamakan ini dengan versi CSS dari Intersection Observer JavaScript. Kita dapat menjalankan animasi pada elemen saat masuk dan keluar dari port gulir.

Berikut ini contohnya:

Cukup rapi, bukan? menurut Di mana Gambar berada dalam carousel yang dapat digulir, yang berubah dari kecil dan buram di kejauhan menjadi lebih besar dan lebih jelas saat mencapai bagian tengah. Kami juga memiliki sedikit tangkapan gulir di sana untuk memastikan setiap item gambar berhenti.

Ini tidak sulit untuk dilakukan! Saya akan menunjukkan kepada Anda bagaimana sebenarnya animasi lama yang sama yang biasa Anda tulis dalam CSS, hanya diterapkan pada timeline tampilan, bukan timeline normal.

Tapi pertama-tama, tata letak umumnya

Apa yang saya lakukan di sini hanyalah sebuah elemen yang saya panggil .carousel:

<main class="carousel">
  <!-- scroll items -->
</main>

elemen di .carousel Atur tata letak menjadi satu baris, yaitu satu baris dengan flexbox. Kami juga akan memastikan bahwa konten apa pun yang melebihi ruangnya dapat di-scroll:

.carousel {
  display: flex;
  width: max(480px, 50vw);
  overflow-x: auto;
}

Tentu saja kita membutuhkan item di dalamnya yang bisa di-scroll. Tampilan slide gambar.

<main class="carousel">
  <div class="carousel-slide">
    <!-- (optional) empty bookend slide -->
  </div>
  <div class="carousel-slide">
      <img src=" alt="alt text for image 1">
  </div>
  <div class="carousel-slide">
      <img src=" alt="alt text for image 2">
  </div>
  <!-- etc -->
  <div class="carousel-slide">
    <!-- (optional) empty bookend slide -->
  </div>
</main>

Adapun gaya itemnya, masing-masing berukuran sepertiga dari ruang yang tersedia sehingga kita melihat tiga item sekaligus saat menggulir:

.carousel {
  /* same as before */

  .carousel-slide {
    flex-shrink: 0;
    width: calc(100% / 3); /* show three at a time */
    aspect-ratio: .8;
    img {
      width: 100%;
    }
  }
}

lalu gulir

telah kami tetapkan overflow-x Pada .carouselsecara resmi menjadikannya wadah bergulir kami. Kita dapat menambahkan sedikit gerakan gulir untuk memastikan kita hanya menggulir satu item dalam satu waktu.

.carousel {
  /* same as before */

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; /* optional for smooth scrolling */
  scrollbar-width: none; /* optional to hide the scrollbar */
}

Kami ingin memastikan slide sejajar dengan bagian tengah wadah gulir saat terpasang pada tempatnya:

.carousel-slide {
  /* etc. */
  scroll-snap-align: center;
}

Inilah yang kami miliki sejauh ini:

Berikutnya adalah animasi

Inilah hal keren yang saya sebutkan di awal: tampilan animasi timeline sebenarnya sama dengan animasi CSS lain yang Anda tulis menggunakan keyframe. Dalam hal ini, kami menginginkan bingkai utama yang item carouselnya kecil dan buram di awal dan akhir, namun menjadi lebih besar dan jelas di tengah animasi.

@keyframes slide {
  /* from start to 45%, and to the end (100%) */
  45%, 100% {
    transform: scale(0.5);
    border-radius: 20px;
    filter: blur(6px) brightness(.8);
  }
  /* middle */
  50% {
    transform: scale(1);
    border-radius: 4px;
    filter: none;
  }
}

Terlihat familier, bukan? Ini adalah jenis CSS yang Anda tulis! Coba tebak? Kami menganimasikan elemen yang ingin kami animasikan, seperti yang biasa Anda lakukan:

.carousel-slide {
  /* etc. */
  animation: slide; 
}

Satu-satunya perbedaan adalah kita ingin animasi berjalan pada timeline elemen saat ini view() daripada jadwal yang teratur. Yaitu animation-timeline Properti ikut berperan:

.carousel-slide {
  /* etc. */
  animation: slide; 
  animation-timeline: view(inline);
}

Sekarang, Secara teknis Ngomong-ngomong, kita bisa langsung merekam timeline-nya animation Properti singkatan seperti properti pembuatan animasi lainnya, misalnya, animation-name, animation-delay, animation-durationdll. Namun menetapkan fungsionalitas garis waktu dengan cara ini belum didukung oleh browser mana pun. Oleh karena itu, pilihan terbaik Anda saat ini adalah menyatakan diri. Silakan membuat pernyataan kembali ini animation singkatnya, jika tidak, Anda mungkin secara tidak sengaja menimpa garis waktu tampilan Anda auto (nilai atribut default) sebagai gantinya view().

Demo kami selesai:

Apakah kamu melihatnya? Yang sebenarnya kami lakukan hanyalah menyiapkan animasi CSS yang berjalan pada elemen tersebut. Namun, alih-alih berjalan pada timeline default, animasi berjalan saat elemen bergulir masuk dan keluar dari tampilan. Inilah perbedaan antara timeline standar dan timeline tampilan.

view() Dan scroll()

Tapi tunggu! Anda mungkin tahu atau tidak view() Timeline adalah bagian dari kumpulan fitur yang lebih besar yang disebut animasi berbasis gulir CSS. Dan view() Bukan satu-satunya fitur yang didukung animation-timeline milik. kita masih punya scroll() Fungsi.

ini scroll() fungsi menciptakan a Menggulir garis waktu kemajuan Hal ini terkait dengan posisi gulir wadah, sedangkan view() Buat sebuah Lihat garis waktu kemajuan Hal ini didasarkan pada visibilitas elemen dalam wadahnya.

Kedua fitur tersebut memiliki kegunaannya masing-masing! Saya biasanya berpikir view() Lebih baik untuk tampilan khusus proyek. Misalnya saja jika kita ingin menganimasikan sebuah slide Hanya ketika slide tertentu bergulir ke port gulir,Jadi view() Fungsionalitas sangat cocok. Itu sebabnya saya fokus pada contoh carousel – kami ingin melacak posisi elemen di port gulir dan menjalankan animasi yang sesuai.

Masukkan parameter dan animation-range

Anda mungkin juga bertanya-tanya apa sebenarnya yang ada di dalam tanda kurung view() Fungsi. Toh itu kan fungsi, jadi harus menerima sesuatu di dalamnya kan?

CSS view() Ada dua parameter: sumbu (block, inline, xDan y)Dan ilustrasi. Parameter inset menentukan offset dari tepi port gulir di mana elemen animasi dilacak. Sintaks resminya adalah sebagai berikut:

animation-timeline: view(<axis> <view-timeline-inset>);

…itu hanya cara yang bagus untuk mengetahui secara spesifik area port gulir mana yang ingin kita picu animasinya. Untuk beberapa animasi, garis waktu awal dan akhir mungkin terpotong konten saat elemen masuk dan keluar sepenuhnya dari port gulir.

Ini tidak baik! Kami ingin setiap item meluncur masuk sepenuhnya saat memasuki port gulir sepenuhnya, bukan saat keluar sepenuhnya. Itu sebabnya semua proyek terlihat begitu saling terkait – semuanya berada pada titik berbeda dalam garis waktu tampilan.

Di sinilah parameter inset membuat perbedaan besar. Kita bisa lebih spesifik dan mengatakan bahwa kita ingin setiap elemen memulai animasinya ketika muncul dari bagian bawah port gulir.

animation: slide-in linear both;
animation-timeline: view(100% 0%);

Ah, jauh lebih baik:

ini animation-range Properti bekerja dengan cara yang sama.

animation-range: entry; /* same as: entry 0 entry 100%; */

ini animation-range properti menerima sejumlah kata kunci lainnya, termasuk exit (ketika elemen meninggalkan port gulir), cover (ketika elemen mulai masuk dan keluar dari port gulir), dan contain (ketika elemen masuk sepenuhnya dan kemudian keluar sepenuhnya dari port gulir) dan seterusnya. Jeff telah menerbitkan serangkaian catatan dan contoh khusus untuk setiap pertanyaan.

Contoh carousel terakhir

Secara umum, carousel menggunakan efek seperti fade, zoom, dan parallax. Namun, karena sebagian besar properti CSS dapat dianimasikan, dan bahkan properti yang tidak dapat dianimasikan pun dapat diakali menggunakan properti CSS terdaftar (seperti dalam kasus garis gradien), Anda dapat memilih untuk mencari cara yang lebih kreatif dalam menggunakannya. view() untuk korsel.

Di bawah ini adalah contoh animasi posisi latar belakang saja yang menciptakan gerakan bagus di carousel.