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

  • Select an option

    Learn more about clone URLs
  • Save BharathKumarRavichandran/49c29b21ae0458d768879f4d486b5413 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BharathKumarRavichandran/49c29b21ae0458d768879f4d486b5413 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. BharathKumarRavichandran created this gist Jul 27, 2019.
    7 changes: 7 additions & 0 deletions 6-animated-spotlight-effect-complete.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    #6: Animated Spotlight Effect (complete)
    ----------------------------------------
    From the collection [10 CSS3 Projects: Branding and Presentation](http://codepen.io/collection/nYyVqV/) by [Kezz Bracey](https://tutsplus.com/authors/kezz-bracey).

    A [Pen](https://codepen.io/tutsplus/pen/PqbPGZ) by [Envato Tuts+](https://codepen.io/tutsplus) on [CodePen](https://codepen.io).

    [License](https://codepen.io/tutsplus/pen/PqbPGZ/license).
    17 changes: 17 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    <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>
    114 changes: 114 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,114 @@
    /*
    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);
    }
    }