0
299
VistasAplicar el desplazamiento desde la posición del cursor
Necesito obtener un efecto de desplazamiento en un div desde la posición del cursor.
tengo este html y css
.f { width: 200px; height: 200px; background-color: grey; position: fixed; border-radius: 100px; } .s { width: 50px; height: 50px; background-color: black; border-radius: 100px; margin: 75px 0px 0px 75px; transition: width 1s, height 1s, margin 1s; } .s:hover { width: 100px; height: 100px; background-color: black; margin: 50px 0px 0px 50px; } <div class="f"> <div class="s"></div> </div>Y necesito algo como esto:
Estoy abierto a soluciones js o jquery.
EDITAR
Tengo una solución jquery:
$("div.f").mousemove(function(e) { $('div.s').css({ left: e.clientX - 28, top: e.clientY - 24 }); }); .f { width: 200px; height: 200px; background-color: grey; position: fixed; border-radius: 100px; /* comment or remove the overflow if necessary */ overflow: hidden; } .s { position: absolute; width: 50px; height: 50px; background-color: black; border-radius: 100px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="f"> <div class="s"></div> </div>Pero necesito que el círculo haga la animación superior como el primer fragmento.
Pregunta original aquí
·
Santiago Trujillo
3 Respuestas
Responde la pregunta0
Para cambiar la posición del círculo interior, puede usar pageX y pageY en mousemove. Para cambiar el tamaño del círculo interno, puede crear una clase que scale div y alternará esa clase al pasar el mouse sobre .f .
var s = $('.s') var f = $('.f') var oTop = f.offset().top + (s.height() / 2); var oLeft = f.offset().left + (s.width() / 2); f.hover(function() { s.toggleClass('change') }) f.mousemove(function(e) { var x = e.pageY - oTop var y = e.pageX - oLeft s.css({ top: x + 'px', left: y + 'px' }) }) .f { width: 200px; height: 200px; background-color: grey; position: fixed; overflow: hidden; border-radius: 100px; } .s { width: 50px; height: 50px; background-color: black; border-radius: 100px; position: absolute; pointer-events: none; opacity: 0; transition: transform 0.5s linear, opacity 0.3s linear; } .change { transform: scale(2); opacity: 1; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="f"> <div class="s"></div> </div>
·
Santiago Trujillo
Denunciar
0
Aquí hay una solución jQuery.
$("div.f").mousemove(function(e) { $('div.s').css({ left: e.clientX - 28, top: e.clientY - 24 }); }); .f { width: 200px; height: 200px; background-color: grey; position: fixed; border-radius: 100px; /* comment or remove the overflow if necessary */ overflow: hidden; } .s { position: absolute; width: 50px; height: 50px; background-color: black; border-radius: 100px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="f"> <div class="s"></div> </div>
·
Santiago Trujillo
Denunciar
0
$('.f').on('mousemove', function(e){ var par = $(this); if((e.pageX <= par.width() && e.pageX >= 0) && e.pageY <= par.height() && e.pageY >= 0){ $('.s').css({ position: 'relative', left: e.pageX - (par.width() / 2), top: e.pageY - (par.height() / 2) }); } else { $('.s').css({ position: 'initial' }); } }); .f { width: 200px; height: 200px; background-color: grey; position: fixed; border-radius: 100px; } .s { width: 50px; height: 50px; background-color: black; border-radius: 100px; margin: 75px 0px 0px 75px; transition: width 1s, height 1s, margin 1s; } .s:hover { width: 100px; height: 100px; background-color: black; margin: 50px 0px 0px 50px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="f"> <div class="s"></div> </div>
·
Santiago Trujillo
Denunciar
Responde la pregunta