Is there a way to get an animated CSS background into a site I am designing? I am using Foundation 6 and I have used static CSS backgrounds before but I can’t get the animated ones to work.
An example of the type of background is here: https://codepen.io/chris22smith/pen/RZogMa
Any idea @joeworkman?
Thanks in advance!
How have you tried to do it so far?
Managed to get it working using the html and css stacks in F6 (the ones under the code group)
hi
funny i was looking to do something similar:
I found
you can use the code from code pen and create your custom stack, I will try this weekend to see if I can create the scrolling gradient
@pmjd I tried creating a swatch to put the CSS in and placing the HTML code on the page. Good shout about the CSS/HTML stacks though - I’ll give that a whirl. Was it just as simple as putting the HTML and CSS into the corresponding stack on the page?
Thank you I’ll look into that too. I saw that stack the other day but kind of overlooked it to try and do something within F6 but will take another look. Thanks
Yes it was. Obviously you’ll need to find tune what and where you are targeting with the css rather than the classes from the code pen example.
Only a quick 5 minute mess around. Might try and do more later when I have the time.
Have tried both these methods now and all working fine… kind of! I also tried creating a 'CSS" swatch in F6 and placed the code withing that. Applied that to the container and all good except…
I’m sure I need to tweak the code as you say @pmjd but not quite sure how to do this. I need the effect to stay within the container and not apply itself to the whole page. I have tried adding an HTML stack to the container but it still spreads over the page. I can obviously just ‘mask’ it in parts of the page by adding a bg colour to the container(s) but I’d rather contain it.
Here is the example on my test server: http://mpsc1.co.uk/
I’m glad to see it working. I wonder if perhaps you can slow down the transition between the colours. At full screen on this 27" Mac it’s making me sea sick.
Haha, yeah totally agree Nick! Was only using that as an example though. I don’t think the client will like it either!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.