Moving Circle on scroll

Developer
Omran Abazid
Size
2,006 Kb
Views
24,288
  1. Moving Circle on scroll Previews
  2. Moving Circle on scroll HTML Codes
  3. Moving Circle on scroll CSS Codes
  4. Moving Circle on scroll JS Codes

How do I make an moving circle on scroll?

When you scroll the page the circle behind the white div wil rotate. What is a moving circle on scroll? How do you make a moving circle on scroll? This script and codes were developed by Omran Abazid on 15 September 2022, Thursday.

Moving Circle on scroll Previews
IQ Test

Moving Circle on scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Moving Circle on scroll</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="circle">
</div>
<div class="rect"> hello
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Moving Circle on scroll - Script Codes CSS Codes

div.circle{ position:fixed; top:5px; left:5px; width:968px; height: 968px; background-color: #e7a61a; border-radius:968px; border:50px dotted white; z-index:0;
}
div.rect{ position:absolute; top:5px; left:91px; width:800px; height: 2000px; background-color: white; z-index:1; -webkit-box-shadow: 1px 2px 28px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 2px 28px -2px rgba(0,0,0,0.75);
box-shadow: 1px 2px 28px -2px rgba(0,0,0,0.75);
}

Moving Circle on scroll - Script Codes JS Codes

$(document).ready(function(){ var bodyHeight = $("body").height()-$(window).height(); window.onscroll = function() { //Determine the amount to rotate by. var deg = -window.scrollY*(360/bodyHeight); $(".circle").css({ "transform": "rotate("+deg+"deg)", }); };
});
Moving Circle on scroll - Script Codes
Moving Circle on scroll - Script Codes
Home Page Home
Developer Omran Abazid
Username OmranAbazid
Uploaded September 15, 2022
Rating 3
Size 2,006 Kb
Views 24,288
Do you need developer help for Moving Circle on scroll?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Omran Abazid (OmranAbazid) Script Codes
Name
Twitch API Template
Bootstrap page Header Template
A Pen by Omran Abazid
Weather App
Wikipedia Search using the API
Pomodora Timer
Simon Game without jquery
Simple Jquery Calculator
Tic tac toe
FCC Campers News
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!