effecto mira telescopica javascript,jquery

[danieler87]

Me gustaría si es posible crear un efecto de mira telescopica que va mostrando una imagen mientras mueves el raton por el fondo...

es decir si tengo una imagen de fondo con un paisaje por ejemplo y una mira circular que al ir moviendola va desenmascarando el fondo...

[America|UNK]

Si, http://www.tripwiremagazine.com/2011...uery-zoom.html

[danieler87]

Gracias
pero no era el efecto de zoom el que buscaba , si no el de una mirilla que enmascara a una imagen y puedes ir moviendola con el raton

[America|UNK]

Te e creado un script usando jQuery, no funciona del todo, pero si es lo que buscas con algunas modificaciones funcionará bien.

el script sería:

Código PHP:

  $(document).ready(function(){
    var obj = $("#loup"), img = obj.find("img")[0], 
        circle = $("<div>",{'class':'circle'})
    
        obj.css({width:img.width,height:img.height})
        obj.mousemove(function(e){
            var left = e.pageX, top = e.pageY, offset = obj.position(), 
                circleSize = [circle.width(),circle.height()],
                topPos = top-offset.top-(circleSize[1]/2), 
                leftPos = left-offset.left-(circleSize[0]/2)
            
            circle.css({
                left:leftPos,
                top:topPos,
                backgroundPosition:"-" + leftPos + "px -"+ topPos + "px"
            })
            
         })
        obj.append($("<div>",{'class':'layer'}))
        obj.append(circle.css({backgroundImage:'url('+img.src+')'}));
        circle.show()
})&#8203;  
   

Aquí verás el resultado:

http://jsfiddle.net/wZVanG/GUedB/1/

[danieler87]

Mil gracias!!!!
era justo lo que necesitaba...

seria posible que el circulo tuviera un calado?


:)

[America|UNK]

Iniciado por danieler87

Mil gracias!!!!
era justo lo que necesitaba...

seria posible que el circulo tuviera un calado?


:)

Hola, al círculo le puedes cambiar el borde con estilos en el CSS (sombras/colores,etc)

El script tenía unos problemas para visualizar las esquinas o no cargaba la función cuando la imagen no se ha cargado, hice unos cambios en el JS, ahora funciona bien.

Update: http://jsfiddle.net/wZVanG/GUedB/3/

[danieler87]

Muchas gracias de nuevo!
eres un crack..

a lo que me referia con el calado seria a añadirle al circulo algo como esto

http://codecanyon.net/item/imagemask...review/1385868

o seria posible que el circulo fuera un png transparente con calado?

[danieler87]

Seria posible que en vez de un circulo fuera otra forma mas compleja?
utilizando por ejemplo un AREA SHAPE??

[America|UNK]

Te refieres a cambiar la apariencia del círculo por una imagen PNG?

[danieler87]

si
me refiero a que el div que enmascara no tenga por que ser un circulo
si no otra figura mas irregular..

[America|UNK]

Puedes usar propiedades de webkit CSS indicando una imagen vectorial (PNG,SVG), es cierto que tiene limitaciones ya que solo funcionará en navegadores con soporte webkit, asi que en Firefox no funcionará.

Código CSS:

#loup .circle{
    position:absolute;
    height:180px;
    width:180px;
    background-repeat:no-repeat;
    -webkit-mask-box-image:  url(http://cosassencillas.files.wordpress.com/2007/08/butterfly.png?w=180) 0 stretch;
    display:none;
}
 

http://jsfiddle.net/GUedB/4/ (lo probé en Chrome)

- La otra solución para que funcione en todos los navegadores sería que crees imágenes personalizadas PNG con fondo del mismo color de la capa que oculta el paisaje. Pues una capa siempre será cuadrada y la única solución es que a la máscara le definas el fondo que encaje con la capa oscura. Si es que no fui claro, pregúntame. Un saludo

[danieler87]

Si entiendo el truco de los png...
pero en el caso de que la capa oscura no fuera una capa si no otra imagen

para enmascarar una imagen debajo de otra.... en vez de una imagen encima de una capa negra
no serviria porque no cuadraria el png personalizado...

no se si podra hacer algo como esto


http://html5advent2011.digitpaint.nl/11/

[danieler87]

segun eso ultimo que puse con:

mask: url(http://html5advent2011.digitpaint.nl...svg#starMask);

y una imagen svg deberia funcionar...
pero no logro hacer que funcione en tu fiddle...

[America|UNK]

Pruebalo:
http://jsfiddle.net/GUedB/25/

Para que funcione en Firefox, el archivo SVG debe ser local url(star_shaded.svg#starMask), de hecho no se por que, ya que recien veo el tema del SVG mask :P.

[danieler87]

gracias...
eso pense yo tambien...
lo que no llege a probar con el archivo en local...
creo que ya con esto he avanzado bastante en el tema de las mascaras...
muchas gracias por todo!