27. Advanced tools
A good compilation, easy to use, is the one gathered in Animation.css. However, one of the most complete tools in the sector is Greensock, although it requires knowledge of JavaScript.
Activity 1
Create a circle, representing the Sun, placed in the middle of the page. Then create another circle representing a moon with the animation to perform an eclipse, or completely cover it, for a few moments.
Activity 2
Starting from images or simple shapes, create a Ferris wheel that rotates slowly.
Activity 3
After a few seconds, show, with an elegant animation (fade or slide), a cookies banner.
Activity 4
Create an animated clock where its hands work.
Hint: You can rely on transform-origin.
Activity 5
Look for references of animated loadings (loading...) and create your own.
Activity 6
Create an animation of a pendulum.
Hint: You will need transform-origin.
:quality(85)/https://andros.dev/static/img/components/license/by-nc-nd.png)
This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.
Building SPAs with Django and HTML Over the Wire: Learn to build real-time single page applications with Python
The HTML over WebSockets approach simplifies single-page application (SPA) development and lets you bypass learning a JavaScript rendering framework such as React, Vue, or Angular, moving the logic to Python. This web application development book provides you with all the Django tools you need to simplify your developments with real-time results.
Buy the bookHelp me keep writing
Every coffee gives me a push toward the next article.
Sure, it's on me!
Comments
There are no comments yet.