Creative CSS and Javascript Effects and Animation

Discover how to create awesome effects with CSS and JavaScript, guided by this introduction, and explore what you will learn to boost your creativity skills.

Set up your workspace with a code editor such as Notepad++ or Sublime Text, run code in a browser like Chrome or Safari, and ensure an internet connection to begin.

Learn how to create a star using theaters and JavaScript, then animate glass effects, and finally implement a day-to-night global scene.

Learn to build an animated starry night banner that transitions on click between night and day, with moon and sun interactions, using CSS and JavaScript effects and transform-based animations.

Animate a starry night banner by applying transforms on the x axis and percent-based adjustments, customizing glass-like layers with css and javascript effects.

Learn to build a starry night website banner with CSS and JavaScript animations, applying transforms, image integration, and border effects.

Learn to create javascript image drop animation effects using css and JavaScript, generating random background images in span elements at intervals, with overflow handling and timed removal.

Create a JavaScript image rain animation by applying drop-style effects and setting up a span element with 50px minimum height and width, then linear forwards animation from 0% to 100%.

Build a JavaScript image tornado animation using CSS and JavaScript, applying transform and perspective to recreate a dynamic tornado effect.

Learn to build an Ironman parallax scene using CSS and ScrollTrigger, setting up a section, background images, clouds, and layered elements to create motion with a trigger plugin.

Execute animation on page scroll by applying a script that transforms elements, sliding along the x and y axes and rotating up to minus 50 degrees.

Learn how to map page scroll to an HTML5 video with JavaScript, so scrolling down plays the video forward and scrolling up plays it in reverse.