El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como hacerlo.
Añadimos un elemento Code Block en el que pondremos los datos que ponemos abajo.
Lo mas fácil y sencillo de configurar son los valores "box-shadow" y "border" de la sección CSS.
Bloque CSS
/* ############## Cursor ========================= */
.cursor{
height: 46px;
width: 46px;
cursor: pointer;
display: block;
position: fixed;
border-radius: 50%;
box-shadow: 0 0 10px 3px rgba(255,255,255,0.4);
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: -100px;
top: 50%;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
z-index:10;
border: 1px solid rgba(255,255,255, .5);
}
.cursor svg path {
fill: none;
}
.cursor_Oscuro{
border: 1px solid rgba(0,0,0, .1);
box-shadow: 0 0 15px 3px rgba(232, 162, 41, 0.4);
}
Click para Copiar
Copiado
Bloque JavaScript
(function ($) {
var fondoBlanco = document.getElementById('section-90-19');
var cursor = document.getElementById('cursor');
var fondoBlanco1 = document.getElementById('section-69-19');
var fondoBlanco2 = document.getElementById('section-144-19');
fondos = [fondoBlanco, fondoBlanco1, fondoBlanco2];
document.addEventListener("mousemove", function (n) {
cursor.style.left = n.clientX + "px";
cursor.style.top = n.clientY + "px";
for (i = 0; i < fondos.length; i++) {
fondos[i].addEventListener("mouseenter", function () {
cursor.classList.add("cursor_Oscuro");
});
fondos[i].addEventListener("mouseleave", function () {
cursor.classList.remove("cursor_Oscuro");
});
}
});
})(jQuery);
Click para Copiar
Copiado
Bloque PHP / HTML
<div class='cursor' id="cursor">
<svg class="svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
</svg>
</div>
Click para Copiar
Copiado