Sumber-sumber depan yang hebat dan kursus animasi CSS

melanggan surat berita saluran HTML/CSS terkini kami dan klik di sini untuk melanggan .

Berikut adalah sumber hadapan front-end terbaru kami:

lebih daripada 20 sumber pembelajaran front-end percuma yang disediakan oleh Louis Lazaris
kursus animasi CSS baru Donovan Huchinson

Sumber Pembelajaran Front-End

Sebagai pemaju front-end, kami mempunyai tanggungjawab untuk menguasai teknologi dan alat terkini untuk menjadikan produk akhir kami mudah digunakan, mudah diakses, dan, mengapa tidak, cantik.

Louis Lazaris berkongsi dengan kami satu senarai 11 senarai lebih daripada 20 dokumen percuma dan panduan yang ditawarkannya untuk pemaju depan.

Senarai ini mengagumkan dan termasuk sumber -sumber pada pengaturcaraan berfungsi, ES6, aplikasi web progresif, kebolehcapaian dan banyak lagi. Jangan ragu untuk memilih sumber yang anda suka. Bagi saya, rujukan CSS dan manual tipografi adalah sumber yang saya periksa dengan segera.

rujukan CSS

Rujukan CSS adalah panduan visual di mana atribut CSS dianjurkan ke:

animasi
latar belakang
Model kotak
flexbox
kedudukan
peralihan
typeline

anda juga boleh mengakses senarai semua sifat CSS mengikut abjad.

Panduan ini menerangkan setiap atribut dan nilai yang mungkin dalam istilah yang jelas dan mudah dan memberikan visual yang sangat baik untuk menggambarkan hasilnya.

Manual Typeline

Mana -mana alat yang mengajar prinsip tipografi web yang sangat baik, amalan terbaik, dan kod dengan cara yang praktikal dan boleh diakses adalah cadangan saya. Pada pendapat saya, manual tipografi melakukan ini.

Ini adalah projek sumber terbuka di GitHub, yang meliputi:

Reka bentuk jenis
font
Panduan Gaya Web

Bahagian terakhir secara khusus menunjukkan banyak contoh kod, yang memberi tumpuan kepada topik seperti unit relatif, ruang menegak, saiz fon, dan warna.

Jika anda mendapati kebanyakan sumber tentang tipografi web sedikit menakutkan dan penuh dengan istilah, manual tipografi akan mengejutkan anda (benar -benar kejutan yang baik).

Animasi web

Kami telah berkembang menjadi sangat baik untuk melihat gerakan ... memerhatikan gerakan dan isyarat visual membolehkan kita memahami pergerakan dan idea yang kompleks dengan cara nonverbal.

Animasi di web boleh memanfaatkan kesan yang sama dan boleh menambah kedalaman tambahan dan makna kepada perbualan antara pengguna dan antara muka pengguna.

Gunakan animasi CSS untuk memberikan laman web Vitality -Donovan Hutchinson & Guy Routledge

Animasi telah menjadi elemen utama dalam reka bentuk dan pembangunan web. Pereka antara muka pengguna mengajar kita cara menggunakan kesan animasi halus untuk membantu pengguna melakukan tugas di laman web, menghalang kebosanan apabila pelawat menunggu sumber untuk memuatkan, dan membimbing perhatian pembaca ketika mereka mengimbas kandungan web.

Pada masa ini, cara yang paling biasa untuk menghidupkan kandungan web ialah:

peralihan CSS dan @keyframes animasi
JavaScript

Untuk mengetahui lebih lanjut mengenai Animasi Web, SitePoint Premium menawarkan animasi kursus baru menggunakan CSS -ditulis oleh superstar animasi Donovan Hutchinson.

Kursus ini merangkumi prinsip animasi antara muka pengguna yang berkesan dan pelaksanaannya menggunakan peralihan CSS dan @keyframes, pelonggaran dan fungsi masa, pelbagai animasi, animasi menatal, sokongan penyemak imbas dan kebolehcapaian.

Jika anda lebih suka artikel, berikut hanya beberapa catatan SitePoint kegemaran saya:

• Cadangan animasi dari CSS Masters. Ini adalah rekod Q & A Live SitePoint dengan Tiffany Brown, yang dihoskan oleh Angela Molina
• 4 petua untuk Gabrielle Gosha menggunakan animasi dalam reka bentuk
• memahami atribut mode-fill-mode CSS, oleh Louis Lazaris
• Animasi: Gunakan pelonggaran untuk membuat interaksi yang lebih bijak oleh Daniel Schwarz
• Gunakan API Animasi Web untuk membawa halaman ke kehidupan oleh Dudley Storey.

Menggunakan CSS untuk animasi web masih merupakan kaedah pilihan saya, tetapi dalam beberapa kes anda memerlukan perpustakaan JavaScript yang kuat untuk mendapatkan pekerjaan yang dilakukan.

Untuk animasi web yang kompleks yang memerlukan penyelesaian JS, sila lihat siri saya "Beyond CSS: Dinamik DOM Animation Library". Bahagian pertama menerangkan cara menggunakan anime.js, dan bahagian kedua menerangkan cara menggunakan kute.js, enjin animasi sumber terbuka modular yang kuat, untuk menghidupkan DOM.

Tunggu, lebih banyak kandungan akan dikeluarkan tidak lama lagi.

Jika anda ingin melihat perpustakaan animasi JavaScript dalam siri ini, sila hubungi kami!

imej yang disediakan oleh unsplash.com

soalan yang sering ditanya mengenai animasi CSS

Apakah perbezaan antara peralihan CSS dan animasi CSS?

peralihan CSS dan animasi CSS adalah alat yang berkuasa untuk mewujudkan animasi yang lancar dan menarik di laman web anda. Perbezaan utama antara keduanya adalah tahap kawalan dan kerumitan mereka. Peralihan CSS lebih mudah dan digunakan untuk membuat animasi mudah yang berlaku akibat perubahan keadaan, seperti melayang di atas elemen. Animasi CSS, sebaliknya, memberikan lebih banyak kawalan dan kerumitan. Mereka membolehkan anda membuat animasi yang lebih kompleks dengan pelbagai langkah dan peringkat, dan mereka boleh berjalan secara bebas daripada sebarang interaksi pengguna.

bagaimana untuk memulakan pembelajaran animasi CSS?

Terdapat banyak sumber yang tersedia dalam talian untuk membantu anda mula belajar animasi CSS. Laman web seperti Udemy, Scrimba dan Codecademy menawarkan kursus yang komprehensif mengenai topik ini. Anda juga boleh merujuk kepada dokumentasi Rangkaian Pemaju Mozilla (MDN) untuk panduan yang lebih teknikal dan terperinci. Kunci untuk belajar animasi CSS adalah amalan, jadi pastikan untuk menerapkan apa yang telah anda pelajari melalui projek dan latihan.

Bolehkah saya menggunakan animasi CSS di mana -mana laman web?

Ya, animasi CSS boleh digunakan di mana -mana laman web. Walau bagaimanapun, perlu diperhatikan bahawa tidak semua pelayar menyokong semua sifat animasi CSS. Oleh itu, ia sentiasa disyorkan untuk memeriksa keserasian sifat CSS yang anda gunakan untuk memastikan animasi anda berfungsi dengan baik dalam semua pelayar.

Adakah sumber animasi CSS-intensif?

Jika ditangani secara tidak wajar, animasi CSS mungkin mengambil banyak sumber. Walau bagaimanapun, dengan mengoptimumkan animasi anda dan menggunakan sifat yang mencetuskan redraw dan penyusunan semula yang minimum, anda boleh membuat animasi yang lancar dan cekap tanpa menjejaskan prestasi laman web anda.

Apakah kerangka utama dalam animasi CSS?

Keyframes digunakan dalam animasi CSS untuk menentukan peringkat animasi. Mereka membolehkan anda menentukan gaya elemen pada setiap titik dalam animasi, dengan itu mewujudkan satu siri kesan animasi.

bagaimana membuat animasi CSS saya responsif?

Untuk membuat animasi CSS anda responsif, anda boleh menggunakan pertanyaan media untuk menyesuaikan sifat animasi berdasarkan saiz skrin. Ini membolehkan anda membuat animasi yang kelihatan dan berfungsi dengan baik pada semua peranti, tanpa mengira saiz skrin mereka.

Bolehkah saya menggunakan animasi CSS dengan JavaScript?

Ya, anda boleh menggunakan animasi CSS dengan JavaScript untuk membuat animasi yang lebih kompleks dan interaktif. JavaScript boleh digunakan untuk mengawal masa, urutan dan tingkah laku animasi, dengan itu memberikan tahap kawalan dan interaktiviti yang lebih tinggi.

bagaimana debug animasi CSS saya?

Animasi CSS boleh didebitkan menggunakan alat pemaju dalam penyemak imbas. Alat ini membolehkan anda menyemak sifat animasi, periksa masa, dan melihat urutan animasi dalam gerakan perlahan.

Bolehkah saya menggunakan animasi CSS untuk meningkatkan pengalaman pengguna laman web?

benar -benar! Animasi CSS dapat meningkatkan pengalaman pengguna laman web anda dengan meningkatkan minat dan interaktiviti visual. Mereka boleh digunakan untuk membimbing perhatian pengguna, memberikan maklum balas, dan mewujudkan antara muka pengguna yang lebih menarik dan dinamik.

Apakah batasan menggunakan animasi CSS?

Walaupun animasi CSS adalah alat yang berkuasa, ia mempunyai beberapa batasan. Mereka boleh mengambil banyak sumber, terutamanya untuk animasi yang kompleks, dan tidak semua sifat animasi disokong oleh semua pelayar. Di samping itu, menggunakan CSS untuk mewujudkan animasi kompleks boleh menjadi lebih mencabar dan memakan masa daripada menggunakan JavaScript atau perpustakaan animasi lain.

Atas ialah kandungan terperinci Sumber-sumber depan yang hebat dan kursus animasi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!