SVG Mouse Animation

Developer
Thomas Vaeth
Size
2,542 Kb
Views
34,408
  1. SVG Mouse Animation Previews
  2. SVG Mouse Animation HTML Codes
  3. SVG Mouse Animation CSS Codes
  4. SVG Mouse Animation JS Codes

How do I make an svg mouse animation?

Simple SVG animation to let users know to scroll down to next section (with Parallax).. What is a svg mouse animation? How do you make a svg mouse animation? This script and codes were developed by Thomas Vaeth on 24 September 2022, Saturday.

SVG Mouse Animation Previews
IQ Test

SVG Mouse Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Mouse Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul id="scene"> <li class="layer" data-depth="2.00"> <svg version="1.1" width="80px" height="80px" viewBox="30.5 -9.5 554 813" enable-background="new 30.5 -9.5 554 813" xml:space="preserve"> <path d="M328,0h-44C271.68,0,42,5.28,42,242v308c0,9.9,3.96,242,242,242h44c13.86,0,242-6.16,242-242V242C570,232.1,566.04,0,328,0z M526,550c0,191.62-177.76,198-198,198h-44C92.38,748,86,570.24,86,550V242C86,50.82,263.54,44,284,44h44 c191.62,0,198,177.76,198,198V550z"/> <circle cx="306" cy="231" r="45"/> </svg> </li>
</ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Mouse Animation - Script Codes CSS Codes

/* Normalize/Reset only elements used */
body, ul { margin: 0; padding: 0;
}
/* Basic layout */
body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;
}
svg { fill: #000;
}
circle { animation: scroll 1.5s ease infinite;
}
@keyframes scroll { 0% { opacity: 0; cy: 481; } 33% { opacity: 1; } 100% { opacity: 0; cy: 231; }
}

SVG Mouse Animation - Script Codes JS Codes

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
SVG Mouse Animation - Script Codes
SVG Mouse Animation - Script Codes
Home Page Home
Developer Thomas Vaeth
Username thomasvaeth
Uploaded September 24, 2022
Rating 3.5
Size 2,542 Kb
Views 34,408
Do you need developer help for SVG Mouse Animation?

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!

Thomas Vaeth (thomasvaeth) Script Codes
Name
Wikipedia Viewer
Wired Link Mixin
Local Weather
Button Border Slide Mixin
Instafetch.js Example
Recipe Book
Random Quote Machine
Grey with Gum Sole
Camper Leaderboard
Flexbox Flex-Grow Mast
Create amazing blog posts 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!