Falling autumn leaves shader

Animation is implemented using the three.js library

SairProgramming

#html #css #js

CSS Only Grids Animation

In SCSS, the background-image property is animated.

SairProgramming

#html #css #js #grid

Halloween

The layout was created using Pug and SCSS preprocessors. The animation is implemented using the gsap library.

SairProgramming

#html #css #js #background

Text Animation

The text is created using the Pug preprocessor and then animated in SCSS.

SairProgramming

#html #css #js #text

FURIOSA 3D Animated Poster

The poster is designed and animated in HTML and SCSS. The 3D effect is created using CSS transform: translateZ and transform-style: preserve-3d

SairProgramming

#html #css #js #card

Activity notification panel concept

The layout is done in HTML and Less. The card expansion logic is implemented in JS.

SairProgramming

#html #css #js #button

Hacked Text Effect

In JS, a handler for the text hover event is created. When hovered, an effect is generated for each letter.

SairProgramming

#html #css #js #text

Dual Picture Accordion Fold

Created without using JS. Instead, the capabilities of the SCSS preprocessor are used.

SairProgramming

#html #css #js #accordion

Electric Spinner

Blurring is implemented using an svg image. Everything else is laid out and animated in HTML and SCSS.

SairProgramming

#html #css #js #spinner

Glide To Reveal

Created and animated without using JS.

SairProgramming

#html #css #js #text

Curved Range Slider

This is input type="range" styled in CSS.

SairProgramming

#html #css #js #slider

Blob Switch

An original switch, styled and animated in SCSS.

SairProgramming

#html #css #js #toggle

Work/Life - Variable Fonts animation

This is where the CSS property font-variation-settings is animated.

SairProgramming

#html #css #js #text

Radios With Sliding Focus

Implemented without using JS.

SairProgramming

#html #css #js #radio

Tab bar active animation

Created in HTML and SCSS. JS implements the logic for switching classes when clicking on a menu item.

SairProgramming

#html #css #js

Movie Poster Interaction

Implemented in pure HTML and CSS.

SairProgramming

#html #css #js #card

CSS Clip-Path Hover Effect

Designed using Pug and CSS. The hover shape of the card is set using CSS clip-path.

SairProgramming

#html #css #js #hover

Menu css.

Built using Sass and Slim preprocessors

SairProgramming

#html #css #js #menu

Animated Mini Photo Gallery

Created with HTML and CSS. animations are implemented using CSS keyframes.

SairProgramming

#html #css #js #gallery

Login-Signup Website Form

Below we leave ready-made code for you that will help you create a stylish animated login and registration form.

SairProgramming

#html #css #js #loginform