131,140 views
All courses in one bundle: https://wd-m.ru/bundle Web design with neural networks: https://wd-m.ru/design Let's consider creating a website with stunning 3D scroll animation using the capabilities of modern HTML, CSS and JavaScript. We will develop a model for moving slides in depth, work on custom animation, smoothness, beautifully design the composition using CSS, and also work with audio and video content on the page. Lesson page: https://webdesign-master.ru/blog/html... Timecodes: 00:00 Lesson start 00:39 Lesson materials overview 04:18 Preparing for website layout 05:25 Basic HTML markup and CSS styling 08:31 Connecting and setting up fonts 11:09 Styling the container and frames 13:56 Writing a 3D scroll engine in JavaScript 25:23 CSS animation cubic-bezier 27:26 Antialiasing via transform-style 27:50 Content layout 29:46 Image layout 35:18 Video layout (horizontal content) 38:13 Smart min-content transfer 39:11 Video design 41:35 Distance between frames 42:02 Layout of headings and text 44:09 Layout of the rest content 48:52 Working with audio on the page 56:30 What else to study? VKontakte: https://vk.com/jediweb Telegram: https://t.me/jediweb Zen: https://dzen.ru/jediweb