Bingkai Animasi: Transisi Gambar Ulangi – Beragampengetahuan

Dalam seri highlight aksi terakhir kami, saya menambahkan gulungan luar biasa dari perancang olahraga yang benar -benar terampil, Joana Correia. Karyanya begitu bijaksana dan menelusuri proyek terbarunya, saya menemukan salah satu gulungannya yang lain yang membungkusnya tahun lalu. Pada awalnya, seperti ini:

Kutipan kecil ini menunjukkan efek pengulangan irisan yang sangat menarik, yang menginspirasi saya untuk mencoba sesuatu yang baru: “bingkai” animasi dari gambar yang sama di sepanjang jalan. Saya tidak yakin apakah ini bagus, tetapi untuk beberapa alasan saya sangat menyukainya. Rasanya seperti bisa cocok dengan lingkungan desain editorial.

Ini hanya bukti konsep, tapi saya harap ini akan memberi Anda beberapa ide baru juga! 🙂

Konfigurasi

Jelas, ada cara yang lebih baik untuk melakukan ini, tetapi karena ini adalah bukti konsep, kami ingin dapat menunjukkan berbagai efek dalam demo, jadi saya memutuskan untuk melakukannya. Jadi, ini adalah cara kerja konfigurasi.

Setiap item kisi dapat mengganti pengaturan animasi global dengan menentukan data- Properti langsung di HTML. Ini memungkinkan setiap proyek untuk menyempurnakan transisi.

Anda dapat menyesuaikan opsi berikut untuk masing -masing .grid__item:

• Strategi – data-clip-path-direction: Arah animasi jalur klip (top-bottom,,,,, bottom-top,,,,, left-right,,,,, right-left).
• melangkah – data-steps: Jumlah elemen bergerak yang dibuat antara proyek grid dan panel.
• mewarisi – data-step-duration: Durasi setiap langkah animasi bergerak dalam detik.
• Stepinterval – data-step-interval: Tunda (dalam detik) Animasi dimulai untuk setiap animasi.
• Memutar – data-rotation-range: Rotasi acak maksimum (± nilai, derajat) diterapkan untuk bergerak.
• Wobblestenshth – data-wobble-strength: Selama generasi jalur gerak, ayunan posisi acak maksimum (dalam piksel).
• MoverPauseBeforeExit – data-mover-pause-before-exit: Jeda durasi (dalam detik).
• Folder roti – data-panel-reveal-ease: Mengungkapkan fitur longgar yang digunakan saat menampilkan panel.
• Penyakit manual – data-grid-item-ease: Fitur longgar untuk Animating Grid Project Exit.
• Penjual – data-mover-enter-ease: Masukkan fungsi longgar Porter.
• MoverExitease – data-mover-exit-ease: Fungsi longgar Porter.
• Panel Mengungkap Durasi – data-panel-reveal-duration-factor: Sesuaikan waktu animasi tampilan pengganda dari panel.
• ClickEditemDurationFactor – data-clicked-item-duration-factor: Multiplier menyesuaikan waktu animasi item grid yang diklik.
• Griditemstaggerfactor – data-grid-item-stagger-factor: Pengganda untuk animasi item grid interleaved (berbasis jarak).
• MOVERBLENDMODE – data-mover-blend-mode: CSS mix-blend-mode Cocok untuk bergerak (normal,,,,, screenDLL. ).
• jalur – data-path-motion: Jenis gerakan jalur: linear (Langsung) atau sine (pembengkokan).
• Dosa – data-sine-amplitude: Ketinggian gelombang sinus jika menggunakan gerakan jalur sinus (dalam piksel).
• Sinus – data-sine-frequency: Frekuensi gerakan gelombang sinus (lebih tinggi = lebih banyak gelombang).

contoh

<figure class="grid__item"
        data-clip-path-direction="left-right"
        data-steps="8"
        data-rotation-range="20"
        data-path-motion="sine"
        data-sine-amplitude="60"
        data-sine-frequency="6.28">

  <div class="grid__item-image" style="background-image: url(assets/img32.webp)"></div>
  
  <figcaption class="grid__item-caption">
    <h3>Aura — K21</h3>
    <p>Model: Lily Cooper</p>
  </figcaption>
  
</figure>

Proyek ini akan terbang dengan 8 penggerak, ayunan berputar yang lebih kuat, jalur gelombang sinus, dan panel yang membuka dari kiri ke kanan.

Cobalah dan mainkan dengan itu, saya sangat berharap Anda menikmatinya!