Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Jun 5, 2017

Embed
What would you like to do?
Mouse Cursor as Flashlight! 🖱🔦 using CSS Variables
<!-- Any website -->
<header>
<h1>Hidden Website</h1>
<nav>
<a href=#>About</a>
<a href=#>Blog</a>
<a href=#>Contact</a>
</nav>
</header>
<main>
<section>
<article>
<h2>Hidden Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus!</p>
</article>
<article>
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus!</p>
</article>
<article>
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus!</p>
</article>
</section>
<aside>
<div class=capsule>
<h3>Widget Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class=capsule>
<h3>Widget Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class=capsule>
<h3>Widget Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</aside>
</main>
<footer>footer content</footer>
function update(e){
var x = e.clientX || e.touches[0].clientX
var y = e.clientY || e.touches[0].clientY
document.documentElement.style.setProperty('--cursorX', x + 'px')
document.documentElement.style.setProperty('--cursorY', y + 'px')
}
document.addEventListener('mousemove',update)
document.addEventListener('touchmove',update)
<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.5.0/EQCSS-polyfills.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.5.0/EQCSS.min.js"></script>
/* Flashlight Overlay */
:root {
cursor: none;
--cursorX: 50vw;
--cursorY: 50vh;
}
:root:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: fixed;
pointer-events: none;
background: radial-gradient(
circle 10vmax at var(--cursorX) var(--cursorY),
rgba(0,0,0,0) 0%,
rgba(0,0,0,.5) 80%,
rgba(0,0,0,.95) 100%
)
}
<link href="//fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.