Обрезка отображения сайта с наложенным div в заданном окне просмотра

Question

Я спрашиваю, как можно создать сайт, например, StackOverflow, где наложенный div может скрыть весь контент, кроме того, что находится внутри div. Я полагаю, как камера, вы можете видеть только то, что в видоискателе, а не за его пределами. Я хочу, чтобы на данный момент видоискатель был исправлен.

Я нашел: Fiddle

Что близко, но не совсем. Я пытался гуглить и спрашивать друзей разработчиков, но не повезло в отделе ресурсов. У кого-нибудь есть идеи, чтобы начать меня?

<html>
     <div class="content">
          <h1>All the page content divs</h1>
     </div>
     <div id="viewport-window"></div>
</html>

javascript jquery html css dom

1

m33bo 16 Дек 2015 в 19:41

Answer 1

Вы можете сделать это, применив стиль 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" />

1

Patrick Evans 16 Дек 2015 в 17:39

Answer 2

Вы также можете сделать это в 2 шага, например:

Сначала создайте div, чтобы наложить на всю страницу и скрыть все.
Во-вторых, создайте клон вашего div (который будет показан) с абсолютной позицией, который имеет те же координаты исходного местоположения, и увеличьте его z-индекс.

Итак, логика в том, чтобы скрыть все и показать, что вы хотите над ним. Вы также можете визуализировать это с помощью анимации CSS или JQuery.

0

abeyaz 16 Дек 2015 в 16:51

Answer 3

На самом деле, вы можете сделать это без элемента «наложения».

Просто используйте гигантскую коробку-тень и высокий 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>

Конечно, этот эффект является чисто визуальным , другие элементы все еще доступны.

1

Paulie_D 16 Дек 2015 в 17:04

Обрезка отображения сайта с наложенным div в заданном окне просмотра

3 ответа

Похожие вопросы

Новые вопросы

javascript