автор
devote, кликать по элементам
взято тут
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{text-align:center;padding:30px;}
ul{padding:0}
li{list-style:none;border:1px solid #ccc;margin:5px}
img{margin-top:10px;height:150px;border:1px solid #ccc}
.example{float:left;width:70%}
.options{float:right;width:30%;background:#ccc;border-radius:5px}
.options ul{text-align:left;margin-left:10px}
input{text-align:center}
.overlay {
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 1;
position: fixed;
box-sizing: border-box;
border: 0 solid rgba(0, 0, 0, 0.8);
transition-property: none;
transition-duration: 1s;
transition-delay: 0s;
transition-timing-function: linear;
pointer-events: none;
}
.overlay.show, .overlay.hide {
transition-property: border-left-width, border-right-width, border-top-width, border-bottom-width, opacity;
width: 100%;
height: 100%;
}
</style>
<script>
var animate = (function() {
var activeClick = false,
activeElement = null,
overlayElement;
function show(target) {
var rect = target.getBoundingClientRect();
overlayElement.className = 'overlay show';
overlayElement.style.cssText = [
'border-left-width:' + rect.left,
'border-top-width:' + rect.top,
'border-right-width:' + (overlayElement.offsetWidth - rect.right),
'border-bottom-width:' + (overlayElement.offsetHeight - rect.bottom)
,''].join('px;');
}
function animate(selector) {
var elems = document.querySelectorAll(selector);
Array.prototype.forEach.call(elems, function(elem) {
elem.addEventListener('click', function(event) {
activeClick = true;
show(activeElement = event.currentTarget);
})
});
if (!overlayElement) {
// элемент который будет анимирован
overlayElement = document.querySelector('.overlay');
// будем слушать событие окончания анимации
overlayElement.addEventListener('transitionend', function() {
// если анимацию инициировал класс hide
if ((' ' + overlayElement.className + ' ').indexOf(' hide ') !== -1) {
// удаляем у элемента все лишнии стили
overlayElement.removeAttribute('style');
overlayElement.className = 'overlay';
}
}, false);
// это что бы убрать оверлей
document.addEventListener('click', function() {
if (!activeClick) {
overlayElement.className = 'overlay hide';
overlayElement.style.opacity = 0;
activeElement = null;
}
activeClick = false;
}, false);
// а это что бы при скроле оверлей подгонял себя туда где элемент
window.addEventListener('scroll', function() {
if (activeElement) {
show(activeElement);
}
}, false);
}
}
return animate;
})();
window.onload = function() {
animate('img, p, button, li, div.options');
};
</script>
</head>
<body>
<p style=" width: 30px; float: left">1</p>
<p style=" width: 30px; float: right">2</p>
<div class="example">
<header>
<button type="button" id="x">Test no animate</button>
<button class="show" data-selector="header" id="test2">Focus header</button>
<button class="show" data-selector="ul">Focus list</button>
<button class="show" data-selector="li:first">Focus first item</button>
<button class="show" data-selector="img:eq(1)">Focus image</button>
</header>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<img src="http://elitefon.ru/download.php?file=201211/800x600/elitefon.ru-27151.jpg">
<img src="http://awabe.com/uploads/posts/2011-03/1300452670_sbtsag9elqjyvqf.jpeg">
<img src="http://img0.liveinternet.ru/images/attach/c/4/79/125/79125894_large_ff6f52c9a9848aab63958b7766780446.jpg">
</div>
<div class="options">
<h2>Options:</h2>
</div>
<div class="overlay"></div>
</body>
</html>