Mouse Position Background Focus Effect
How do I make an mouse position background focus effect?
A little demo of a technique I'm working on for a client to draw attention towards the center of the screen. The javascript style filter: blur is only webkit for the time being.. What is a mouse position background focus effect? How do you make a mouse position background focus effect? This script and codes were developed by Stan Williams on 08 September 2022, Thursday.
Mouse Position Background Focus Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mouse Position Background Focus 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 id="blur-layer"> <div id="image-layer"></div>
</div>
<div id="static-image"></div> <script src="js/index.js"></script>
</body>
</html>
Mouse Position Background Focus Effect - Script Codes CSS Codes
#image-layer { position: absolute; display: block; top: -10%; left: -10%; width: 120%; height: 120%; opacity: 0.3; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/celebration.jpg"); background-position: center; background-size: cover;
}
html, body { height: 100%; width: 100%;
}
body { background-color: #121212; overflow: hidden;
}
#static-image { display: block; position: absolute; height: 200px; width: 200px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); overflow: hidden; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/profile_pic.jpg); background-repeat: no-repeat; background-size: cover; -webkit-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; cursor: pointer; opacity: 0.8;
}
#static-image:hover { opacity: 1;
}
Mouse Position Background Focus Effect - Script Codes JS Codes
(function() { var $blur_layer, $image_layer, blur_fade, blur_throttle, center_x, center_y, fade_length, max_blur, max_x, max_y, max_z, min_opacity, mouse_move_handler, perspective, transform, win_h, win_w; transform = function(elem, transform) { elem.style.webkitTransform = transform; return elem.style.transform = transform; }; blur_fade = function(elem, blur, fade) { return elem.setAttribute('style', '-webkit-filter: blur(' + blur + '); opacity: ' + fade + ';'); }; win_w = window.innerWidth; win_h = window.innerHeight; center_x = win_w / 2; center_y = win_h / 2; max_x = win_w * 0.04; max_y = win_h * 0.04; max_z = 30; perspective = 1200; max_blur = 300; min_opacity = 0.75; blur_throttle = 8; fade_length = 1 - min_opacity; $image_layer = document.getElementById('image-layer'); $blur_layer = document.getElementById('blur-layer'); mouse_move_handler = function(mouse_x, mouse_y, ratio_x, ratio_y) { var blur_px, fade_i, transform_val; transform_val = 'perspective(' + perspective + ') translate3d(' + (max_x * ratio_x) + 'px, ' + (max_y * ratio_y) + 'px, ' + (max_x * ratio_x) + 'px)'; transform($image_layer, transform_val); blur_px = (Math.abs(mouse_x - center_x) / center_x * blur_throttle) + 'px'; fade_i = 1 - (fade_length * (Math.abs(mouse_x - center_x) / center_x)); return blur_fade($blur_layer, blur_px, fade_i); }; document.addEventListener('mousemove', (function(event) { var mouse_x, mouse_y, ratio_x, ratio_y; if (window.event) { event = window.event; } mouse_x = event.clientX; mouse_y = event.clientY; ratio_x = 1 - (mouse_x / center_x); ratio_y = 1 - (mouse_y / center_y); mouse_move_handler(mouse_x, mouse_y, ratio_x, ratio_y); }), false);
}).call(this);
Developer | Stan Williams |
Username | Stanssongs |
Uploaded | September 08, 2022 |
Rating | 3 |
Size | 4,213 Kb |
Views | 40,480 |
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 |
Animated Digital Flip Clock | 2,423 Kb |
Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar | 5,692 Kb |
Pure CSS3 breadcrumb navigation, pixel perfect | 3,958 Kb |
Blog Page | 4,805 Kb |
Jquery and CSS3 powered Lightbox Gallery | 4,834 Kb |
HTML5 Player with Flash fallback for non supporting browsers. | 3,484 Kb |
Animated button effects using jquery, css, javascript and effeckts.js | 2,862 Kb |
Responsive Company Page | 9,666 Kb |
A Pen by Stan Williams | 6,706 Kb |
Cursor following menu demo | 8,080 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 |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Practice using Wixel | Emnk | 3,057 Kb |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
React JS Movie Info App | MTushar | 4,870 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!