Spring physics with CSS variables

Developer
Val Head
Size
3,591 Kb
Views
14,168
  1. Spring physics with CSS variables Previews
  2. Spring physics with CSS variables HTML Codes
  3. Spring physics with CSS variables CSS Codes
  4. Spring physics with CSS variables JS Codes

How do I make an spring physics with css variables?

Move mouse or tap to get the springy ball going! Currently looks best in Chrome as calc() doesn’t work with all units in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=956573. What is a spring physics with css variables? How do you make a spring physics with css variables? This script and codes were developed by Val Head on 26 November 2022, Saturday.

Spring physics with CSS variables Previews
IQ Test

Spring physics with CSS variables - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spring physics with CSS variables</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ :root { --mouse-x; --mouse-y; --scale; --radius: 40px; --factor: 1;
}
.ball { width: var(--radius); height: var(--radius); background: #D92659; border-radius: 50%; position:absolute;
/* use calc() and the CSS variables created above to center the ball around the mouse position. */ transform: translate(calc(var(--mouse-x) * 1px - var(--radius)/2),calc(var(--mouse-y) * 1px - var(--radius)/2));
}
.halo { width: var(--radius); height: var(--radius); background: rgb(114, 61, 83); border-radius: 50%; position:absolute; opacity: .15;
/* filter: blur(var(--factor)); */ transform: scale(calc(var(--scale) * var(--factor)));
}
.halo:nth-of-type(1) { --factor: .3;
}
.halo:nth-of-type(2) { --factor: 0.5;
}
.halo:nth-of-type(3) { --factor: .9;
}
body { background: #070611; font-family: Verdana, sans-serif;
}
p { color: whitesmoke; width: 400px; top: 10px; left: 10px; position:absolute;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="ball"> <div class="halo"></div> <div class="halo"></div> <div class="halo"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spring physics with CSS variables - Script Codes CSS Codes

:root { --mouse-x; --mouse-y; --scale; --radius: 40px; --factor: 1;
}
.ball { width: var(--radius); height: var(--radius); background: #D92659; border-radius: 50%; position:absolute;
/* use calc() and the CSS variables created above to center the ball around the mouse position. */ transform: translate(calc(var(--mouse-x) * 1px - var(--radius)/2),calc(var(--mouse-y) * 1px - var(--radius)/2));
}
.halo { width: var(--radius); height: var(--radius); background: rgb(114, 61, 83); border-radius: 50%; position:absolute; opacity: .15;
/* filter: blur(var(--factor)); */ transform: scale(calc(var(--scale) * var(--factor)));
}
.halo:nth-of-type(1) { --factor: .3;
}
.halo:nth-of-type(2) { --factor: 0.5;
}
.halo:nth-of-type(3) { --factor: .9;
}
body { background: #070611; font-family: Verdana, sans-serif;
}
p { color: whitesmoke; width: 400px; top: 10px; left: 10px; position:absolute;
}

Spring physics with CSS variables - Script Codes JS Codes

'use strict';
var xpos = 0;
var targetX = 0;
var ypos = 0;
var targetY = 0;
var velX = 0;
var velY = 0;
var docStyle = document.documentElement.style;
var drag = 0.8;
var strength = 0.12;
function springItOn() { var diffX = targetX - xpos; diffX *= strength; velX *= drag; velX += diffX; xpos += velX; var diffY = targetY - ypos; diffY *= strength; velY *= drag; velY += diffY; ypos += velY; //apply the newly calculated positions via CSS custom properties each frame. SO FANCY docStyle.setProperty('--mouse-x', xpos); docStyle.setProperty('--mouse-y', ypos); //set the halo scale property baesd on some arbitrary math for kicks docStyle.setProperty('--scale', (velY + velX) * strength); requestAnimationFrame(springItOn);
}
springItOn();
//update the target position based on where the mouse is
document.addEventListener('mousemove', function (e) { targetX = e.clientX; targetY = e.clientY;
});
Spring physics with CSS variables - Script Codes
Spring physics with CSS variables - Script Codes
Home Page Home
Developer Val Head
Username valhead
Uploaded November 26, 2022
Rating 4.5
Size 3,591 Kb
Views 14,168
Do you need developer help for Spring physics with CSS variables?

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!

Val Head (valhead) Script Codes
Name
Neon glow letters
Net magazine example - Start
IOS Gmail loader-ish
Basic CSS animation and transition example
Geometric Pattern Mask
Adding Items
Playing a CSS animation on hover
Net magazine demo - Step 3
Nav animation exercise - START
Hypno triangle
Create amazing captions 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!