[ANIMATION BACKGROUND] for your site.

12 May 2018
21
35
#1

Greetings!
I decided to do nothing to make a guide, on the theme of animation of the background, who can and wants such a miracle ..

I will not go into details, saying how and what, I'll tell you how to use it.


Result : work.slater-project.ru


You can observe a smooth change of background and adjustment of it, as well as a change of different color scales.

To add yourself such a background, it is enough for you to copy:



.class{
animation: gradient 10s infinite;
background-size: 1000% 1000%;
}




Substitute your class.



@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}



Just add to your stylesheet file.

Well, of course, choose one of the favorite color palettes, to do this, select your favorite color
Then copy its class:



.color-1{
background: linear-gradient(-45deg, #cc2b5e, #753a88);
}



And set your element on the site, exactly the same name class = "color-1" to the same element in which you set yourself the animation and background-size settings above.


If my words are difficult to understand, you can simply download the finished result with rghost and put yourself on local, or normal hosting.


Download : rghost

Result : work.slater-project.ru/animation-background/

Image:

I use google translate, I apologize for my english.
 
10 Jan 2015
2,524
1,455
#2
Nice release I guess(?)