Custom animated gradient background
-
Hi, trying to add in gradient animation made from https://www.gradient-animator.com/
to live on a category page background.I have this code, any help to embedd to page? Many thanks
background: linear-gradient(181deg, #20c399, #e88a06, #ef5bff, #487de8);
background-size: 800% 800%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
-o-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
@-webkit-keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@-o-keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}<script src="https://gist.github.com/anonymous/48a837b43c17d200fcc33a1cbbaaaab8.js"></script>
-
Hi @Ros_rgb
you do not need jQuery for this.
You could do it in pure CSS - I am sure.Also be aware of this – when you use Javascript:
http://laytheme.com/documentation.html#custom-javascriptCan you post a link to your website that we can have a look?
All the best!
Marius
-
Thanks for replying armin
I think I made a version we are happy with for now. Background image set and repeated.
http://www.notasausage.co.uk/projects
I really don't have the knowledge to get into trying to code it.Ross
-
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it