Streaming live at 10am (PST)

Help with adding code


#1

Hi guys,

I am fairly new to webflow and I had a question in regards to applying Javascript to an image.

Heres my site:
https://preview.webflow.com/preview/aosc-mockup?preview=6c7fababa8e0c8daf40e5d22e57a4c17

My goal is to have the land image (earth) rotate like a gear when scrolling. Specifically like this:
https://codepen.io/dudleystorey/pen/vHBAE

I used the following code and put it in the home page site settings before the tag but it doesn't seem to work and I was hoping one of you could help me out!

$(window).scroll(function() {
var theta = $(window).scrollTop() / 10 % Math.PI;
$('#landimage').css({ transform: 'rotate(' + theta + 'rad)' });
});

Thanks!


#2

Hey there @GCunit
It seems that your javascript code is calling for an id $('#landimage'), so maybe you should try to add the id "landimage" to your image and see if it works

Also, don't you think it should be better to run your js code on a div with the image as a background instead?
Best,
Blaise


#3

Thanks for the reply!

I switched the image to a background of a div and applied the id landimage but it doesn't seem to be working, any other ideas?


#4