Spotlight Effect

Developer
Tomoyuki Kashiro
Size
2,723 Kb
Views
12,144
  1. Spotlight Effect Previews
  2. Spotlight Effect HTML Codes
  3. Spotlight Effect CSS Codes
  4. Spotlight Effect JS Codes

How do I make an spotlight effect?

Spotlight effect by using css radial-gradient. What is a spotlight effect? How do you make a spotlight effect? This script and codes were developed by Tomoyuki Kashiro on 19 January 2023, Thursday.

Spotlight Effect Previews
IQ Test

Spotlight Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spotlight Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/base.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main"> <h1 class="title">Spotlight Effect</h1> <p class="sub-title">tracking your mouse</p>
</div>
<div class="spotlight" id="spotlight"></div> <script src="js/index.js"></script>
</body>
</html>

Spotlight Effect - Script Codes CSS Codes

html, body { width: 100%; height: 100%;
}
body { position: relative; display: table;
}
.main { display: table-cell; vertical-align: middle; text-align: center;
}
.main .title { font-size: 5rem; margin-bottom: 50px;
}
.main .sub-title { font-size: 2rem;
}
.spotlight { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); background-image: -webkit-radial-gradient(center, circle cover, rgba(0, 0, 0, 0.2) 5%, black 25%);
}

Spotlight Effect - Script Codes JS Codes

var elem = document.getElementById('spotlight'), canTouch = !!('ontouchstart' in window);
if(canTouch){ document.body.addEventListener('touchmove', onTouchStart, false); document.body.addEventListener('touchstart', onTouchStart, false);
}else{ document.body.addEventListener('mousemove', onMoseMove, false);
}
function onTouchStart(e){ var target = e.targetTouches[0]; elem.style.backgroundImage = '-webkit-radial-gradient(' + target.pageX + 'px ' + target.pageY + 'px, circle cover, rgba(0,0,0,0.2) 5%, rgba(0,0,0,1) 25%)';
}
function onMoseMove(e) { elem.style.backgroundImage = '-webkit-radial-gradient(' + e.pageX + 'px ' + e.pageY + 'px, circle cover, rgba(0,0,0,0.2) 5%, rgba(0,0,0,1) 25%)';
}
Spotlight Effect - Script Codes
Spotlight Effect - Script Codes
Home Page Home
Developer Tomoyuki Kashiro
Username Tkashiro
Uploaded January 19, 2023
Rating 3.5
Size 2,723 Kb
Views 12,144
Do you need developer help for Spotlight Effect?

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!

Tomoyuki Kashiro (Tkashiro) Script Codes
Name
Css resolution
Page transition
3 lines menu button
Simple sort algorithm in JavaScrip
CSS multi-column layout
Binary search algorithm in JavaScript
Responsive image srcset
Media Fragments URI
Mostly fluid
Hashing search algorithm in JavaScript
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!