Я спрашиваю, как можно создать сайт, например, StackOverflow, где наложенный div может скрыть весь контент, кроме того, что находится внутри div. Я полагаю, как камера, вы можете видеть только то, что в видоискателе, а не за его пределами. Я хочу, чтобы на данный момент видоискатель был исправлен.
Я нашел: Fiddle
Что близко, но не совсем. Я пытался гуглить и спрашивать друзей разработчиков, но не повезло в отделе ресурсов. У кого-нибудь есть идеи, чтобы начать меня?
<html>
<div class="content">
<h1>All the page content divs</h1>
</div>
<div id="viewport-window"></div>
</html>
3 ответа
Вы можете сделать это, применив стиль clip-path к основному элементу, который вы хотите, чтобы наложение было закончено (например, body
, если вы хотите, чтобы вся страница). Вы также можете использовать клип для большей поддержки браузера, но сделайте имейте в виду, что это устарело.
< Сильного > Demo
Имеет статический путь клипа, но при перемещении мыши он изменится на область просмотра 200x200, которая следует за мышью
jQuery(document).mousemove(function(e){
var width = jQuery(document).width();
var height = jQuery(document.body).height();
var viewW = 200;
var viewH = 200;
var top = e.pageY - (viewH/2);
var right = (width-e.pageX) - (viewW/2);
var bottom = (height-e.pageY) - (viewH/2);
var left = e.pageX - (viewW/2);
var style = "inset("+top+"px "+right+"px "+bottom+"px "+left+"px)";
jQuery(document.body).css({
"-webkit-clip-path":style,
"-moz-clip-path":style,
"clip-path":style
});
});
body {
-webkit-clip-path:inset(20px 200px 200px 40px);
-moz-clip-path:inset(20px 200px 200px 40px);
clip-path:inset(20px 200px 200px 40px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="https://placekitten.com/g/500/500" />
Вы также можете сделать это в 2 шага, например:
- Сначала создайте div, чтобы наложить на всю страницу и скрыть все.
- Во-вторых, создайте клон вашего div (который будет показан) с абсолютной позицией, который имеет те же координаты исходного местоположения, и увеличьте его z-индекс.
Итак, логика в том, чтобы скрыть все и показать, что вы хотите над ним. Вы также можете визуализировать это с помощью анимации CSS или JQuery.
На самом деле, вы можете сделать это без элемента «наложения».
Просто используйте гигантскую коробку-тень и высокий z-индекс.
В этом примере я использовал :hover
, а оверлей немного прозрачен.
.wrapper {
width: 80%;
margin: auto;
text-align: center;
}
.box {
width: 100px;
height: 100px;
margin: 1em;
display: inline-block;
vertical-align: top;
background: plum;
position: relative;
}
.box:hover {
box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.75);
z-index: 9999;
}
<div class="wrapper">
<div class="box">Lorem ipsum.</div>
<div class="box">Lorem ipsum.</div>
<div class="box">Lorem ipsum.</div>
</div>
Конечно, этот эффект является чисто визуальным , другие элементы все еще доступны.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.