Freaky Shadow Effect
How do I make an freaky shadow effect?
Move your mouse to see the awesome 3-dimensionality!Webkit handles this well, but 48 elements is too much for Firefox. YMMV.. What is a freaky shadow effect? How do you make a freaky shadow effect? This script and codes were developed by Moses Holmström on 21 August 2022, Sunday.
Freaky Shadow Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Freaky Shadow Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div> <div class="boxy shadow"></div>
</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>
Freaky Shadow Effect - Script Codes CSS Codes
body { background-image: -webkit-radial-gradient(0% 0%, circle, #0a0a10, #484860, #0a0a10); background-image: radial-gradient(circle at 0% 0%, #0a0a10, #484860, #0a0a10); background-size: cover;
}
.container { width: 100vmin; min-height: 100vmin; margin: 0 auto;
}
.boxy { box-sizing: border-box; display: inline-block; margin: 1vmin; width: 8vmin; height: 8vmin; border-radius: 100%; background: transparent; -webkit-transform: translate3d(0, 0, -10px); transform: translate3d(0, 0, -10px);
}
Freaky Shadow Effect - Script Codes JS Codes
console.clear();
var vw, vh, shadow = document.querySelectorAll(".shadow");
function calcShadow(e, x, y, w, h) { var r = e.getBoundingClientRect(); r.left = r.left; r.top = r.top; var ox = x - (r.left + (r.width * 0.5)); var oy = y - (r.top + (r.height * 0.5)); var d = [0-ox*0.08>>0, 0-oy*0.08>>0]; var b = (Math.abs(d[0]) + Math.abs(d[1])) * 0.33; var o = (b*0.075).toFixed(3); var s = "inset " + d.join("px ") + "px "+ b +"px -" + b*0.5 + "px rgba(0,0,0," + o + ")"; e.style.mozBoxShadow = s; e.style.webkitBoxShadow = s; e.style.boxShadow = s;
}
document.addEventListener("mousemove", function(evt) { var mx = evt.clientX, my = evt.clientY; var vw = document.body.getBoundingClientRect().width; var vh = document.body.getBoundingClientRect().height; Array.prototype.forEach.call(shadow, function(each) { calcShadow(each, mx, my, vw, vh); });
});
document.addEventListener("DOMContentLoaded", function() { var x = 250, y = 75; Array.prototype.forEach.call(shadow, function(e) { calcShadow(e, x, y, vw, vh); }); console.log(document.querySelectorAll(".container")[0].style.backgroundImage.split("%"));
});
Developer | Moses Holmström |
Username | thykka |
Uploaded | August 21, 2022 |
Rating | 4 |
Size | 2,946 Kb |
Views | 46,552 |
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!
Name | Size |
Loader - Connect the dots | 2,811 Kb |
Status Monitor mockup | 7,599 Kb |
Brainbow Menu | 3,767 Kb |
Esmes Vice Anim00ted SVG | 3,838 Kb |
Rotating ASCII Globe | 17,424 Kb |
Thing | 3,802 Kb |
HSL color picker | 3,957 Kb |
Pagination indicators | 3,263 Kb |
Three.js Planetoid | 3,284 Kb |
Strange sphere thing | 3,503 Kb |
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!
Name | Username | Size |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
Flickering Light Text Effect | Mandymichael | 3,315 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!