Animated Background Code Needed

Hi!

I would like to add animated background image as hero image by using this: Flat Surface Shader

I didn’t start making it so i dont have a link to share. Is there a somebody made this kind of animated background in webflow? Can you help me how to add js codes to use background animation?

Thanks in advance

These are the 4 scripts you need in page footer

<script src="https://cdn.rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<script src="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
<script src="https://cdn.rawgit.com/wagerfield/flat-surface-shader/master/deploy/fss.min.js"></script>
<script src="http://matthew.wagerfield.com/flat-surface-shader/assets/scripts/example.js"></script>

You’ll also need 3 elements on your page, and they need to have IDs of container, output, and controls respectively (you can display:none those you don’t want)

Demo: http://flat-surface-shader.webflow.io

Hi @samliew thank you so much however i didn’t understand where i should put those elements :face_with_raised_eyebrow: can you maybe share this webflow read mode? thanks in advance.

And i want to customize this animation with following link: http://carlofontanos.com/wp-content/uploads/2015/02/flat-surface-editor.jpg

I don’t know JS so i have to ask. How can i customize this on webflow? Do i need to create script outside of webflow then link it or another way.

Thank you so much

Code goes into Page Footer Code (body)

Custom code in head and body tags - Webflow University Documentation

Read-only Webflow - Flat Surface Shader BG Demo

What you’re customising is actually the fourth script. In that case you’ll have to host your changes elsewhere and replace the fourth script with it.

Here’s how

How to host text files on Github

How to embed files hosted on Github


Also, feel free to contact me for further code help and/or customization of third-party plugins

Thank’s a lot mate! :slight_smile: