Level Up your CSS Animation Skills

Salepage : Level Up your CSS Animation Skills

Archive : Level Up your CSS Animation Skills

FileSize :

You want to delight and amaze your visitors, and make your websites stand out from the rest. You want to use animation not just to wow, but also to help make your sites more useful, polished and professional. You’re already creating websites but you want to take your knowledge to the next level.

This is the course for you. As a web site or app creator, this course will give you the practical tools you need to bring animation to your projects.

You will get over 4 hours of high quality video lessons, lifetime access to all video content, cheatsheets and guides, and even online support and help from the author himself.

Learn how to:

Create an amazing animated hero header

Bring your UI to life with hover, touch and button animations

Wow your visitors with scroll and parallax animations

Build your very own animated carousel

Adjust animations to fit all sizes of devices and browsers

Optimise your CSS animations for reuse and size

Each with fun examples you can follow along, step by step

This is a video course full of real downloadable code examples. You’ll be able to take the knowledge, as well as the real working code, to your projects and make sure they stand out.

Who this course is for

You want to delight and amaze your visitors, and make your websites stand out from the rest. You want to use animation not just to wow, but also to help make your sites more useful, polished and professional. You’re already creating websites but you want to take your knowledge to the next level. This is the course for you. As a web person, this course will give you the practical tools you need to bring animation to your projects.

This is a video course full of real downloadable code examples. You’ll be able to take the knowledge, as well as the real working code, to your projects and make sure they stand out.

Learn by doing

Most courses concentrate only on the theory. In this course we’ll create a practical example landing page, step by step. Over 6 modules of practical, hands-on lessons, we’ll create real examples of animation you can use on your own projects.

Course Curriculum

Module 1: Build an animated hero header

PreviewHero header? (2:36)

PreviewAnimating the background (12:56)

PreviewIntroducing the titles (9:59)

StartAdding a scroll cue (8:26)

StartSimplifying keyframes (5:20)

StartWaiting till the content is ready (8:43)

PreviewExamples to download (1:02)

Start[Bonus download] How to build your own Hero Header

Module 2: Make our designs feel alive with touch and hover animations

PreviewTouch and hover animations (1:38)

StartAnimating links (12:26)

StartAnimating tooltips (11:11)

StartRevealing content on hover (11:38)

StartAnimating buttons (8:59)

PreviewExamples to download (1:02)

Module 3: Grabbing attention with scroll animations

PreviewScroll animations (1:50)

StartAnimating content on scroll (14:52)

StartAnimating a slide-in banner (6:17)

StartParallax scrolling (10:57)

StartMouse-leave animation (10:40)

PreviewExamples to download (1:02)

Module 4: Build an animated carousel

PreviewCarousels (1:49)

StartCarousel HTML (6:36)

StartCarousel CSS (12:41)

StartSetting up JavaScript (9:59)

StartMaking it work (16:12)

StartFinishing touches (6:40)

StartExamples to download (1:00)

Module 5: Adjusting animations for all screen sizes

PreviewResponsive animations (1:43)

StartResizing animations using font-size (8:50)

StartPercentages and viewport units (6:01)

StartLandscape vs portrait (6:39)

Congratulations! (plus bonus links and resources)

StartNext steps and inspiration

StartThanks, and stay in touch!