Как выявить часть размытого изображения, где мышь зависает?
Как выявить часть (маленькую порцию) размытого изображения, где мышь зависла? В настоящее время она размывает целое изображение, но я хочу, чтобы часть размытого изображения указывала на то, что мышь показывает.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anoop</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blur pic">
<img src="adv_logo.png" alt="plane">
</div>
</body>
</html>
CSS
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(1px);
}
Ответы
Ответ 1
Я просто хочу опубликовать альтернативное решение. Он не имеет большой поддержки браузера, поскольку он построен на изображениях, масках и фильтрах SVG. Я тестировал и работает в Chrome 33, Safari 6.1.1 и Firefox 25.0.1.
Дайте мне знать, что вы думаете: jsFiddle
Новая версия с инвертированной маской для размытого изображения jsFiddle
HTML + SVG
<div class="pic">
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<image filter="url(#filter2)" xlink:href="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%"></image>
<filter id="filter2">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
</mask>
<image xlink:href="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%" mask="url(#mask1)"></image>
</svg>
</div>
CSS
body {
margin: 0;
}
.pic {
text-align: center;
position: relative;
height: 250px;
}
.blur {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
JavaScript
$('.pic').mousemove(function (event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
var mask = $('#mask1 circle')[0];
mask.setAttribute("cy", (upY - 5) + 'px');
mask.setAttribute("cx", upX + 'px');
});
Ответ 2
Я создал скрипку с помощью jQuery-решения. Он размывает часть изображения. Упование помогает:
JQuery
$('.pic').mousemove(function(event){
event.preventDefault();
var upX=event.clientX;
var upY=event.clientY;
$('#blurr').css({'display':'block','top':''+(upY-15)+'px','left':''+(upX-15)+'px'});
});
CSS
.pic{
display:inline-block;
}
/*below CSS for the blurring div*/
#blurr{
position:absolute;
display:none;
width:30px;
height:30px;
background-color:rgb(240,240,240);
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
box-shadow:0px 0px 10px 10px white;
-moz-box-shadow:0px 0px 10px 10px white;
-webkit-box-shadow:0px 0px 10px 10px white;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
Обновление 28/Feb/2014
HTML
<div id="container">
<div class="blurPic"></div>
<img src="http://i.imgur.com/IGKVr8r.png" alt="follow picture" />
</div>
CSS
html,body{
margin:0px;
padding:0px;
}
#container{
position:relative;
}
.blurPic{
position:absolute;
top:0px;
left:0px;
width:0px;
height:0px;
box-shadow:0px 0px 0px 160px white inset;
-moz-box-shadow:0px 0px 0px 160px white inset;
-webkit-box-shadow:0px 0px 0px 160px white inset;
-ms-box-shadow:0px 0px 0px 160px white inset;
opacity:0.9;
filter:alpha(opacity=0.9); /* For IE8 and earlier */
}
JQuery
/**Give equal width and height as <img> to .blurPic**/
var hgt = $('.blurPic').width($('#container img').width());
$('.blurPic').height($('#container img').height());
/*****************************************************/
/*******Get shadow values*****/
var result = $('.blurPic').css('boxShadow').match(/(-?\d+px)|(rgb\(.+\))/g)
var color = result[0],
y = result[1],
x = result[2],
blur = result[3];
/******************************/
/**Change box-shadow on mousemove over image**/
var blurStartW = hgt.width()/2;
var blurStartH = hgt.height()/2;
$('.blurPic').mousemove(function(event){
event.preventDefault();
var scrollLeftPos = $(window).scrollLeft(),
scrollTopPos = $(window).scrollTop(),
offsetLft = hgt.offset().left,
offsetTp = hgt.offset().top;
var upX=event.clientX;
var upY=event.clientY;
$(this).css({boxShadow : ''+(-offsetLft+upX-blurStartW+scrollLeftPos)+'px '+(-offsetTp+upY-blurStartH+scrollTopPos)+'px 20px 100px white inset'});
});
/*********************************************/
/***reset box-shadow on mouseout***/
$('.blurPic').mouseout(function(){
$(this).css({boxShadow : '0px 0px 0px 160px white inset'});
});
/**********************************/
Обновление 01/Март/2014
В приведенной выше скрипте используется Vague.js, потому что CSS3 размытие может не работать все браузеры
HTML
<div id="container">
<img src="http://i.imgur.com/IGKVr8r.png" alt="follow picture" />
<div class="revealPic"></div>
</div>
CSS
html,body{
margin:0px;
padding:0px;
}
#container{
position:relative;
margin-left:100px;
display:inline-block;
}
.revealPic{
position:absolute;
top:0px;
left:0px;
background-image:url('http://i.imgur.com/IGKVr8r.png');
background-color:white;
background-position:0px 0px;
background-repeat:no-repeat;
width:50px;
height:50px;
/*making div circular*/
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-khtml-border-radius: 50%;
}
JQuery
var hgt = $('#container'),
bgt = $('#container .revealPic');
var bgtHalfW = bgt.width()/2,
bgtHalfH = bgt.height()/2;
/**Change position of .revealPic and background-image within it on mousemove over container**/
hgt.mousemove(function(event){
event.preventDefault();
bgt.show();
var scrollLeftPos = $(window).scrollLeft(),
scrollTopPos = $(window).scrollTop(),
offsetLft = hgt.offset().left,
offsetTp = hgt.offset().top;
var upX=event.clientX;
var upY=event.clientY;
bgt.css({backgroundPosition : ''+(offsetLft-upX+bgtHalfW-scrollLeftPos)+'px '+(offsetTp-upY+bgtHalfH-scrollTopPos)+'px',top:''+(-offsetTp+upY-bgtHalfH+scrollTopPos)+'px',left:''+(-offsetLft+upX-bgtHalfW+scrollLeftPos)+'px'});
});
/*********************************************/
/*Hide .revealPic div on mouseout*/
hgt.mouseout(function(){
bgt.hide();
});
/*********************************/
/*Using vague.js to make blurred image*/
var vague = $("#container img").Vague({intensity:10});
vague.blur();
/**************************************/
Ответ 3
Нельзя использовать только размытое изображение и четкое изображение и наложить прозрачную часть на размытое изображение с помощью положения мыши,
Не спрашивайте о + 9px! - Я не знаю, если изображения немного разные, я просто нарезал их инструментом для обрезки!
У меня нет времени, чтобы улучшить этот скрипт прямо сейчас, но не стесняйтесь улучшать багги (проверка границы, показ div в начале)
http://jsfiddle.net/kWWXX/
$('#blurpic').mousemove(function(e){
var xpos = e.pageX - this.offsetLeft;
var ypos = e.pageY - this.offsetTop;
$('#clearpic').css({
left: xpos,
top: ypos,
backgroundPositionX: -xpos,
backgroundPositionY: -ypos
});
});
$('#clearpic').mousemove(function(e){
var xpos = e.pageX -25
var ypos = e.pageY -25
$('#clearpic').css({
left: xpos,
top: ypos,
backgroundPositionX: -xpos +9 ,
backgroundPositionY: -ypos +9
});
});
Ответ 4
Я рассматривал различные решения, и я думаю, что лучше всего использовать отдельные фоновые изображения с background-attachment: fixed и просто накладывать их друг на друга. Очень легкий и надежный.
Это работает как шарм. Просто не на устройствах, которые не поддерживают background-attachment: fixed (я включил исправление, исключающее использование мобильных устройств).
