Skip to content

Instantly share code, notes, and snippets.

@BharathKumarRavichandran

BharathKumarRavichandran/6-animated-spotlight-effect-complete.markdown

Created July 27, 2019 14:09
Show Gist options
  • Save BharathKumarRavichandran/49c29b21ae0458d768879f4d486b5413 to your computer and use it in GitHub Desktop.
Save BharathKumarRavichandran/49c29b21ae0458d768879f4d486b5413 to your computer and use it in GitHub Desktop.
Download ZIP
#6: Animated Spotlight Effect (complete)
Raw
index.html
<div class="wrapper">
<div class="backdrop"></div>
<div class="stage_floor"></div>
<div class="stage_highlight"></div>
<div class="spotlight_swivel">
<div class="lamp"></div>
<div class="spotlight"></div>
</div>
</div>
Raw
style.css
/*
Base spotlight concept from http://www.rwe-uk.com/blog/comments/rich_css_spotlight_with_elliptical_gradients_in_safari_chrome_firefox/
Lamp effect supported by Chrome and Safari, but not Firefox. Spotlight effect supported in all three.
*/
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background: black;
overflow: hidden;
}
.wrapper {
height: 100vh;
width: 150vh;
margin: 0 auto;
position: relative;
}
.backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-image: linear-gradient(#000000, rgba(25,53,93,1) 90%, rgba(25,53,93,1));
}
.stage_floor {
content: '';
position: absolute;
top: 10%;
left: 0;
right: 0;
height: 150%;
background-image: radial-gradient(rgba(54,90,143,0.9), rgba(54,90,143,0));
transform: scale(1.0,0.3);
}
.stage_highlight {
position: absolute;
top: 0;
left: 25vh;
width: 100vh;
height: 100%;
overflow: hidden;
background-image: radial-gradient(ellipse closest-side at 50% 82%, rgb(84,120,173), rgba(84,120,173,0) 100%);
animation: move_highlight 5s linear infinite;
}
.spotlight_swivel {
animation: rotate_spotlight 5s linear infinite;
}
.lamp {
position: absolute;
width: 40vh;
height: 400vh;
background-image: radial-gradient(ellipse, rgba(82,116,168,0.5), rgba(82,116,168,0.2) 25%, rgba(82,116,168,0) 50%);
top:-220vh;
left:55vh;
transform: perspective(23vh) rotateX(30deg);
}
.spotlight {
opacity: 0.5;
transform: scale(1.5,3);
position: absolute;
top: -20vh;
left: calc(50% - 75vh);
}
.spotlight::after {
content: '';
position: absolute;
top: -50vh;
background-image: radial-gradient(ellipse closest-corner at 75% 75%, rgba(55,89,138,0.2), rgba(55,89,138,0));
border-radius: 100%;
width: 100vh;
height: 100vh;
clip: rect(50vh, 100vh, 100vh, 50vh);
transform: rotate(45deg);
}
@keyframes rotate_spotlight {
0% {
transform: rotate(0deg) scaleY(1) translateY(0);
}
25% {
transform: rotate(-15deg) scaleY(1.1) translateY(-3vh);
}
50% {
transform: rotate(0deg) scaleY(1) translateY(0);
}
75% {
transform: rotate(15deg) scaleY(1.1) translateY(-3vh);
}
}
@keyframes move_highlight {
0% {
transform: translateX(0);
}
25% {
transform: translateX(25vh);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(-25vh);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment