Im heutigen Video zeige ich euch einen sogenannten Spotlight Effekt. Da ist auf einer Webseite der Content unsichtbar und erst wenn ihr mit der Maus darüber „scheint“ – ja wie eine Taschenlampe – könnt ihr en Inhalt / Content erkennen und lesen.

So ein kleiner Gamification Effekt auf einer Webseite kann auch sehr lustig sein. Man muss aber einfach genau wissen, dass nicht alle Besucher freude an sowas haben – also wenn ihr zu oft und lange diese Spielerei macht, dann vertreibt ihr diese Leute von eurer Webseite.

Aber für kleine Bereiche oder Wettbewerbe ist das sicher eine sehr lustige Sache.

Video

HTML

<div class="spotlight"></div>
    <div class="content">
        <h2>Das ist ein Demo Text</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda dolore recusandae distinctio eos eveniet
            fuga explicabo culpa quia alias ab similique blanditiis nobis nesciunt enim suscipit facilis ut fugiat, qui
            veniam deleniti? ... m ipsa rem id. Sapiente iste nam neque repellendus eius? Ad, assumenda
            obcaecati ipsum quam quas, nobis ipsam quos, officia autem repellat consequatur esse at.</p>
    </div>

CSS

.content {
    padding: 50px;
    user-select: none;
}

.content h2 {
    font-size: 3em;
}

.content p {
    font-size: 1.6em;
    margin-top: 20px;
}

.spotlight {
    position: fixed;
    width: 200px;
    height: 200px;
    background: transparent;
    /* #000 dann transparent */
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);

    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.95);

}

body.aktion {
    cursor: pointer;
}

body.aktion .spotlight {
    box-shadow: none;

}

Javascript

let body = document.querySelector("body");
let spotlight = document.querySelector(".spotlight");

//objekt an mouse anhängen
window.onmousemove = function(e) {
    spotlight.style.top = e.clientY+"px";
    spotlight.style.left = e.clientX+"px";
}

//doubleclick
body.ondblclick = function(e) {
    body.classList.toggle("aktion");
}