Cara membuat animasi penuh halaman menggunakan CSS

Kunci Takeaways

Animasi penuh halaman boleh dibuat menggunakan transformasi CSS 3D dan 2D dan animasi CSS, menyediakan alternatif yang lebih berprestasi dan fleksibel untuk animasi berasaskan skrip tradisional untuk kandungan web. Elemen HTML boleh diubah menggunakan animasi CSS untuk mencapai kesan ini.
Untuk memastikan hasil yang konsisten apabila menggunakan CSS berubah menjadi elemen, tanpa mengira saiz kandungannya, saiz elemen badan boleh diperbaiki dengan tetingkap dan kandungan penyemak imbas boleh dilampirkan di dalam pembungkus. Pendekatan ini juga boleh menutup sebarang rendering progresif, bayaran semula atau beban sumber yang boleh berlaku dengan kandungan yang kompleks.
Animasi boleh ditubuhkan pada masa -masa strategik semasa pengalaman melayari untuk memberikan penampilan kandungan peralihan ke dalam pandangan apabila halaman beban dan keluar dari pandangan apabila pengguna mengklik pada pautan. Tempat yang optimum untuk menubuhkan animasi yang memindahkan kandungan halaman ke pandangan adalah sejajar di bahagian atas elemen. Acara AnimationEnD boleh digunakan untuk mengesan apabila animasi selesai dan kemudian mencetuskan peristiwa navigasi.

Pelayar moden seperti Internet Explorer 10 Sokongan CSS 3D dan 2D Transforms dan CSS animasi. Dengan mengetuk kuasa GPU anda dan berjalan secara asynchronously dari JavaScript biasa, teknologi ini menyediakan alternatif yang lebih berprestasi dan fleksibel untuk animasi berasaskan skrip tradisional untuk kandungan web.

Saya telah bercakap tentang cara membina dengan transformasi CSS 3D serta animasi dan peralihan CSS dalam artikel sebelumnya. Dalam artikel ini, saya ingin memperkenalkan kes penggunaan yang lebih "tidak konvensional" untuk teknologi ini dengan menerangkan konsep "animasi penuh halaman" yang boleh digunakan semasa proses navigasi untuk menambah ketidakstabilan dan kesinambungan untuk melayari. Sasaran kami adalah untuk mencapai pengalaman melayari yang lancar di mana kandungan lancar muncul apabila pengguna melawat halaman dan peralihan ketika dia mengklik pautan atau melakukan tindakan yang relevan.

Kesan ini boleh dicapai dengan mengubah elemen HTML menggunakan animasi CSS. Walau bagaimanapun, kes penggunaan ini membentangkan beberapa pertimbangan yang kami rasa layak dibincangkan, seperti kesan susun atur dan saiz untuk mengubah , serta bagaimana untuk melayari halaman masa yang tepat supaya mereka betul dengan animasi kami. Sampel kod dalam siaran ini menggunakan markup CSS yang tidak disokong seperti yang disokong oleh pratonton pelepasan IE10; Pelayar lain mungkin memerlukan awalan vendor untuk animasi CSS dan CSS mengubah sifat yang digunakan.

Mengubah keseluruhan kandungan halaman

transformasi CSS ditakrifkan pada sifat gaya elemen HTML DOM. Sebagai contoh, markup untuk berputar elemen 45 darjah di sepanjang paksi Znya akan kelihatan seperti ini:

#element {
    transform: rotateZ(45deg);
}

Melampirkan transformasi ke elemen

dokumen HTML anda berfungsi dengan cara yang sama. Oleh itu, lakukan untuk menambah kesan yang sama pada dokumen anda boleh melakukan sesuatu seperti ini:

body {
    transform: rotateZ(45deg);
}

mari kita lihat pukulan sebelum dan selepas halaman apabila menggunakan transformasi ke elemen badan:

Memohon Rotatez (45Deg) Transform ke elemen badan dokumen.

Untuk transformasi tiga dimensi, CSS mengubah spesifikasi mentakrifkan harta perspektif yang boleh ditentukan pada induk elemen yang kita ubah. Apabila mengubah elemen

kandungan anda, ia perlu digunakan untuk elemen yang berada di atasnya dalam hierarki DOM. Berbuat demikian adalah mudah:

html {
    perspective: 500px;
}

menggabungkan ini dengan perubahan rotatey (45deg) pada elemen

menghasilkan hasil berikut:

Memohon Putar (45Deg) Transform ke dengan Perspektif: 500px ditetapkan pada .

kita boleh memanipulasi sifat asal transformasi pada elemen badan untuk hasil yang menarik. Mari kita lihat beberapa contoh:

body {
    transform-origin: 50% 100%;
    transform: rotateX(45deg);
}

markup di atas menetapkan putaran di sepanjang x untuk elemen badan sambil mengalihkan asal putaran ke bahagian bawah elemen menggunakan asal transformasi. Secara berkesan ini berputar kandungan dokumen "ke" skrin seperti ini:

3

kita juga boleh memanipulasi sifat asal-usul perspektif pada elemen akar dokumen kami untuk mencapai kesan unjuran luar paksi. Menukar gaya untuk ke: Halaman kami sekarang kelihatan seperti ini:

html {
    perspective: 500px;
    perspective-origin: 90% 50%;
}

Dengan menggunakan transformasi CSS, kita dapat dengan mudah memanipulasi penampilan visual keseluruhan kandungan halaman kami. Oleh kerana susun atur biasa dan peraturan saiz masih berlaku, beberapa mengubah pada elemen badan (terutamanya yang menggunakan nilai peratusan atau bergantung pada harta transformasi-asal) boleh mengakibatkan kesan visual yang berbeza bergantung kepada kandungan halaman kami. Ingat contoh Rotatex (45Deg) sebelumnya dengan transformasi-asal ditetapkan kepada 50% 100%.

di bawah anda dapat melihat hasilnya sebelum dan selepas transformasi digunakan.

Perhatikan bagaimana kandungannya sebenarnya tidak berputar di bahagian bawah tetingkap tetapi pada satu ketika di luar viewport. Ini dijangka tingkah laku untuk transformasi CSS:

dibentangkan secara normal, maka ia diputar di sepanjang tepi bawah yang berada di luar skrin. Anda juga akan melihat bahawa cetakan kaki sebenar kandungan telah berkembang (lihat pada bar skrol dalam gambar "selepas") untuk menampung kandungan yang diubah (hakikat bahawa kami menggunakan unjuran perspektif menjadikan kesan ini lebih banyak lagi diucapkan).

Jadi bagaimana kita menangani kandungan bersaiz sewenang -wenangnya apabila menggunakan transformasi ke elemen badan kita? Adat menyesuaikan semua kandungan untuk memastikan saiz badan tidak berkembang lebih daripada jumlah tertentu mungkin tidak realistik. Sebaliknya, kita boleh menggunakan corak HTML/CSS yang mudah yang membolehkan kita menetapkan saiz elemen badan ke tetingkap penyemak imbas dan menambah kandungan di dalam pembungkus

. Markup berikut mencapai itu:

#element {
    transform: rotateZ(45deg);
}

Ilustrasi di bawah menunjukkan apa yang berlaku apabila halaman ditatal secara menegak dan kami menggunakan rotatey (45deg) berubah menjadi elemen

dokumen kami secara langsung (kiri) dan menggunakan corak pembungkus (kanan):

Penggunaan langsung hasil transformasi dalam hasil visual yang miring disebabkan oleh unjuran luar paksi (kerana kita tidak lagi melihat "pusat" elemen badan). Menggunakan corak pembalut memastikan bahawa harta aspek perspektif elemen (50% 50% secara lalai) akan sentiasa berpusat dengan hubungan dengan elemen , memberi kita kesan visual yang menyenangkan.

dengan menggunakan corak di atas dan menubuhkan CSS berubah dengan nilai peratusan apabila mungkin, kita boleh menjejaskan elemen kita dengan cara yang konsisten, tanpa mengira saiz kandungannya.

dari transformasi ke animasi

Setelah menyusun selok -belok penggunaan CSS berubah menjadi elemen , animasi CSS adalah langkah seterusnya. Dengan mengikuti prinsip -prinsip yang diterangkan di atas, kita boleh membuat animasi yang membawa kandungan web kita ke dalam pandangan (atau mengeluarkannya dari pandangan) dengan cara yang menarik.

Pertimbangkan peraturan asas @keyframes ini:

body {
    transform: rotateZ(45deg);
}

Apabila digunakan pada elemen, animasi ini akan menyebabkannya berputar di sebelah kirinya. Apabila digunakan untuk elemen yang menggunakan corak pembalut kami, hasil visual lebih menarik. Dokumen itu sebenarnya akan berputar dari luar kawasan yang kelihatan dari tetingkap penyemak imbas dan ke pandangan penuh:

Begitu juga, kita dapat menyusun animasi yang membuang kandungan web kami dari pandangan. Sebagai contoh, jika kita mahu halaman kita hilang ke jarak semasa berputar, kita boleh menggunakan sesuatu seperti ini:

#element {
    transform: rotateZ(45deg);
}

dengan hasil visual adalah:

Oleh kerana kita boleh menggunakan kuasa penuh animasi CSS untuk mempengaruhi keseluruhan kandungan web kami, kami mempunyai banyak fleksibiliti dari segi menghasilkan kesan halaman ini (dan kami pastinya tidak terhad kepada hanya menggunakan transformasi CSS). Tetapi apabila kita telah membuat kesan yang kita mahu memohon kepada kandungan kita, bagaimanakah kita menyebabkan mereka mencetuskan semasa proses navigasi halaman?

melampirkan animasi ke

Matlamat kami adalah untuk menggunakan animasi pencetus pada masa strategik semasa pengalaman penyemak imbas untuk memberikan kemunculan kandungan peralihan ke dalam pandangan apabila halaman beban dan di luar pandangan apabila pengguna mengklik pada pautan.

Tempat intuitif pertama untuk menambah animasi ke elemen badan akan menjadi acara JavaScript onload. Walau bagaimanapun, ternyata menambah animasi apabila kebakaran onload sebenarnya terlambat. Acara ini sebenarnya mencetuskan apabila keseluruhan kandungan di halaman kami telah selesai memuatkan (termasuk mana-mana imej atau sumber yang berintensifkan jalur lebar lain). Melampirkan animasi ke Onload pada halaman intensif jalur lebar akan mengakibatkan kandungan kami memaparkan "biasanya," diikuti dengan animasi yang mencetuskan dan menghidupkan semula kandungan ke dalam pandangan. Tidak betul -betul kesan yang kami targetkan.

Sebagai alternatif, kita boleh menggunakan acara domcontentloaded yang mencetuskan apabila penyemak imbas telah menyelesaikan struktur DOM kandungan kami (tetapi berpotensi sebelum sumber telah selesai dimuatkan). Demo DOMContentLoaded Drive DomContentLoad IE menggambarkan perbezaan antara kedua -dua peristiwa ini. Walau bagaimanapun, dalam kes -kes kandungan web yang kompleks, pelayar moden boleh memilih untuk melakukan "progresif", memaparkan halaman sebelum keseluruhan pokok Dom telah dimuatkan. Dalam situasi ini, hasil visual akan sama dengan senario onload.

Tempat yang optimum untuk menubuhkan animasi yang memindahkan kandungan halaman kami dalam pandangan adalah sejajar di bahagian atas elemen

. Ini memastikan bahawa animasi akan bermula dengan betul kerana kandungannya diberikan (dan kedudukan permulaan kandungannya akan menjadi dari kerangka utama animasi yang dipilih kami). Kesan sampingan yang menyenangkan dari pendekatan ini adalah bahawa animasi sebenarnya boleh menutup sebarang rendering progresif, bayaran semula atau beban sumber yang boleh berlaku dengan kandungan kompleks.

Menyediakan animasi yang memindahkan kandungan kami dari pandangan juga menarik. Seseorang boleh mengandaikan bahawa kita boleh melampirkan pengendali onclick kepada semua elemen yang menarik dalam kandungan kami (contohnya semua tag ) dan hanya menetapkan sifat animasi yang relevan (nama animasi, penahan animasi, dan lain-lain) dalam fungsi panggil balik . Walau bagaimanapun, jika kita tidak menangguhkan navigasi daripada berlaku, kita tidak akan melihat peralihan cecair yang dijangkakan.

Ini adalah peluang yang baik untuk menggunakan peristiwa animasi yang diterangkan dalam spesifikasi animasi CSS. Khususnya, kita boleh menggunakan acara AnimationEnD untuk mengesan apabila animasi telah selesai dan kemudian mencetuskan navigasi (dengan menetapkan window.location.href, misalnya). Oleh itu, onclick kami akan mencetuskan animasi "mengalih keluar-dari-pandangan" dan mendaftarkan pengendali untuk AnimationEnD pada

yang akan memastikan bahawa peristiwa navigasi berlaku.

Demo live Tersedia Kami telah mencipta demonstrasi dan tutorial untuk membawa halaman hidup dengan CSS Transforms & Animations yang memberikan kedalaman dan contoh melebihi apa yang telah kami tunjukkan di sini. Tutorial itu sendiri menggunakan animasi halaman penuh semasa navigasi halaman yang berfungsi di Internet Explorer 10 pada Windows 8 serta versi terkini Chrome dan Firefox.

hanya menikmati animasi halaman-ke-halaman, melangkah melalui halaman tutorial menggunakan pautan "Teruskan ..." di sudut kanan bawah setiap halaman.

Pada akhir tutorial kami menyediakan beberapa panduan tambahan dan kod sampel mengenai cara menggabungkan animasi ini dengan kandungan web anda sendiri.

membungkusnya

CSS Transforms dan CSS animasi adalah dua ciri-ciri yang kuat yang membolehkan pengalaman web yang lebih kaya dan lebih mendalam. Dengan sedikit usaha, anda boleh membuat laman web (walaupun statik) yang memberikan pengalaman navigasi cecair dan hampir seperti aplikasi.

Jika anda suka membaca siaran ini, anda akan suka dipelajari; Tempat untuk mempelajari kemahiran dan teknik segar dari Sarjana. Ahli mendapat akses segera ke semua ebook SitePoint dan kursus dalam talian interaktif, seperti CSS praktikal.

soalan yang sering ditanya mengenai animasi CSS penuh halaman

Apakah perbezaan utama antara animasi CSS dan animasi JavaScript? Animasi CSS lebih mudah dan mudah dilaksanakan, terutamanya untuk animasi mudah. Mereka juga lebih mesra prestasi kerana mereka dikendalikan oleh enjin rendering pelayar. Walau bagaimanapun, animasi CSS mempunyai kawalan dan fleksibiliti terhad berbanding dengan animasi JavaScript. Animasi JavaScript, sebaliknya, menawarkan lebih banyak kawalan dan fleksibiliti, yang membolehkan animasi kompleks. Mereka boleh dijeda, dibalikkan, atau dimanipulasi dalam masa nyata, dan juga boleh bertindak balas terhadap interaksi pengguna. Unit seperti peratusan atau unit viewport dan bukan unit mutlak seperti piksel. Ini memastikan bahawa skala animasi dengan betul tanpa mengira saiz skrin. Anda juga boleh menggunakan pertanyaan media untuk menyesuaikan animasi berdasarkan saiz skrin tertentu atau jenis peranti.

Bolehkah saya menggunakan animasi CSS dengan svg?

Ya, animasi CSS boleh digunakan dengan SVG (grafik vektor berskala). SVG mempunyai set sifat CSS tersendiri yang boleh animasi, seperti mengisi, strok, dan transformasi. Ini membolehkan animasi yang lebih kompleks dan menarik berbanding dengan menghidupkan elemen HTML biasa. Sebagai contoh, Internet Explorer tidak menyokong harta animasi-masa. Untuk memastikan keserasian silang pelayar, anda boleh menggunakan awalan vendor seperti -webkit-, -moz-, -o-, dan -ms- sebelum sifat animasi. Anda juga boleh menggunakan alat seperti AutoPrefixer untuk menambahkan awalan ini secara automatik. Ciri -ciri animasi, terutamanya yang mencetuskan susun atur berubah seperti lebar, ketinggian, dan margin. Sebaliknya, gunakan sifat yang hanya mencetuskan perubahan komposit seperti transformasi dan kelegapan. Anda juga boleh menggunakan harta yang akan berubah untuk memberitahu penyemak imbas mengenai sifat-sifat yang mungkin akan dihidupkan. Jadilah animasi dengan CSS. Ini kerana ia tidak mempunyai keadaan pertengahan antara nilai -nilainya. Walau bagaimanapun, anda boleh mencapai kesan yang sama dengan menghidupkan sifat kelegapan dan penglihatan. -Penghitungan harta-kiraan. Dengan menetapkan nilainya kepada Infinite, animasi akan diulangi selama-lamanya. harta. Harta ini mentakrifkan tempoh masa yang diperlukan oleh animasi untuk menyelesaikan satu kitaran.

Bagaimana saya boleh menjeda animasi CSS? . Dengan menetapkan nilainya kepada Jeda, animasi akan berhenti berjalan.

Bolehkah saya menghidupkan harta latar belakang dengan CSS? Walau bagaimanapun, anda boleh mencapai kesan yang sama dengan memudar antara pelbagai imej latar belakang menggunakan harta kelegapan.

Atas ialah kandungan terperinci Cara membuat animasi penuh halaman menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!