Some nice animation effects to apply to your website

Tram Ho

When you’re a web developer, at least sometimes you’ll have to clash with css and js . With these 2 security stuffs combined for html , you will be really surprised to see unique and eye-catching web pages they can create. Let’s try to find out some cool effects that can be applied to the website.


The first is the banner


1. Sakura Animation
The banner has animation like an impressive rain of cherry blossoms, suitable for travel or fashion websites. Simple CSS, however JS is very complex.

You can refer to Demo here .


2. Color changing effect
The banner with animation when you click it will change color according to the order you set before. Like Sakura Animation, simple css and js are very complex, and are also very eye-catching. Suitable for websites about interior design.

Please refer to the Demo here .


3. Constellation effect
Banners have animations like constellations (or like chemical structures, if slightly modified). This is my favorite animation, because it’s completely css, no js. 😄 This banner is for websites on astronomy, physics or chemistry.

Please refer to the Demo here .


4. Animation effects
Banners have animations like animated scenes. This is also a completely css animation.
This banner is suitable for websites about anime and manga.

Please refer to the Demo here .


5. Clean Slider With Curved Background effect
This banner creates a pretty background image transition effect, using both js and css.

Please refer to the Demo here .


6. Shattering effect
This is a broken text style for the banner, using both js and css. If combined with other banner effects, will create a great banner for your website.

Please refer to the Demo here .


I have just shared with you some impressive banner effects that I can apply in the website design process. Also you can refer to from the sources below. I personally prefer banners that do not use or rarely use js, because I find it quite confusing, if used, most of us use js shared on the internet. We will explore some websites with cool and unique design ideas from menu design to content display.

Reference links:
https://bashooka.com/coding/web-background-animation-effects/
https://speckyboy.com/css-javascript-text-animation-snippets/

Share the news now

Source : Viblo