Streaming live at 10am (PST)

Animated Background Code Needed


#1

Hi!

I would like to add animated background image as hero image by using this: http://matthew.wagerfield.com/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


#2

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


#3

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.


#4

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


#5

Code goes into Page Footer Code (body)

https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

Read-only https://preview.webflow.com/preview/flat-surface-shader?preview=3a1c512cd9d4825d9297766f3b39efca

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


#6

Thank’s a lot mate! :slight_smile: