Rotate Circle while scrolling section

When scrolling over this div with Class name “Content”, I want to make that circle on the left rotate. How should I approach it?

Published at circle-menu

Read only

Here is my public share link: LINK
(how to access public share link)

@Fernando_Comet here you go

const content = $('.content')
const circle = $('.circle')

content.scroll(() => {
    let rotation =  (content.scrollTop() / (content.prop('scrollHeight')-content.height()) ) * 360
    circle.css("transform", "rotateZ("+rotation+"deg)");

I assumed you want the circle to rotate the full 360 degrees. If you want only 180 degrees then change 360 to 180. If you want different rotation speed then … math :slight_smile:

Here’s a video with more details: Rotate Div While Scrolling in a Div - jQuery Simple Example - YouTube

1 Like