Reveal. Concéntrate en la pantalla de publicación en js

SOURCE 14548 palabras JavaScriptReveal. JS

Algo que quieres hacer


¿Conoces el "SPOT LIGHT"de logitool? Aunque es como un puntero láser, es un gadget genial para usar software para enfocar la luz en cualquier lugar de la pantalla de demostración. ¡Si se utiliza esto, no importa lo que se publique, se le prestará atención!
Sólo porque el precio es un poco caro, es difícil para la gente que normalmente no habla mucho.
Pero, Revel. Lo mismo podría hacerse si fuera JS. ¡Así!

Práctica


Consulte Contribuciones de este lado para codepen que utiliza javascrpt para enfocar el foco. De esta manera, el Fondo no se filtrará y los focos no se encenderán ni apagarán, por lo que es necesario trabajar un poco.

Estructura


Para hacer los cambios, he visto cómo se implementan los focos en el ejemplo codepen. En primer lugar, las partes iluminadas brillantemente, con gradientes circulares pintando "Grado radial"en el Fondo, especificando un color transparente en el Centro, y usando JavaScript para hacer que el ratón siga alrededor especificando div negro. Estar aquí es lo que esperaba. Específicamente, parte del Código de abajo.
.spotlight.on {
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%);
}
Sin embargo, si es sólo esta estructura, los lugares fuera de div parecen redondos como la siguiente figura.

Por lo tanto, dibuje el marco del div más grande, y el exterior del div se oculta en negro. La gente que piensa en esto es genial.
.searchlight {
    border-width: 100vh 100vw !important;
}
Trate de cambiar la Caja a verde y se sentirá de la siguiente manera. Es fácil de entender.

Tratar


Saber la estructura, cuántas correcciones es más simple. Escriba sólo los resultados de la práctica. Primero, CSS. El css (solarized.css, etc.) leído en theme también debe ser añadido al final.
.searchlight {
    position: absolute !important;
    z-index: 100 !important;
    height: 300px !important;
    width: 300px !important;
    border-width: 100vh 100vw !important;
    border-style: solid !important;
    border-color: rgba(0, 255, 0, 0.7) !important;
    top: -100vh !important;
    left: -100vw !important;
    background: #000 !important;
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    -ms-box-sizing: content-box !important;
    box-sizing: content-box !important;
    transition: opacity 500ms;
    opacity: 0;
}

.searchlight.on {
    background: -webkit-radial-gradient(center, ellipse cover,
    rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0.7) 100%) !important; /* Chrome10+,Safari5.1+ */
    background-repeat: no-repeat !important;
}
El siguiente es javascript. Dado el Código GIST, el índice. Lea lo siguiente. Hace mucho que no uso jQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://gist.github.com/vimyum/d0c01a508b448da888b41084a0975db0.js"></script>
Por el momento, el Código está pre - escrito.
var toggle = false;
$('.searchlight')
    .on('mousemove', function(event) {
        $(this).addClass('on').css({'margin-left': event.pageX -150, 'margin-top': event.pageY -150});
    })          
    .on('mouseout', function(event) {
        $(this).removeClass('on');
    })
    .on('click', function() {
        if (toggle) {
            $(this).css('opacity', '0').css('cursor', 'auto');
        } else {
            $(this).css('opacity', '1').css('cursor', 'none');;
        }
        toggle = !toggle;
    });
Y eso es, Revel. La configuración de elementos de la clase section en js está bien.
 <section>
     <h3>それ、Reveal.jsでできるよ</h3>
     <div class="searchlight"></div>
</section>
¡Arriba!
Si se combina con algo como Reveal. Shell Shell Art, podría hacer algunas publicaciones llamativas