带有 mousemove 的交互式背景遮罩（jQuery、CSS）

Question

我正在尝试创建一个具有这种效果的页面：

.

我做对了，直到我尝试为其添加背景。我习惯了 Photoshop（带有图层和蒙版），但不幸的是 html 没有蒙版。

这就是我所拥有的。

The fiddle

jQuery：

$(document).ready(function() {
  // calculate screen size
  var pageHeight = $(window).height();
  var pageWidth = $(window).width();

  $(window).on('mousemove', function(event) {
    // horizontal offset
      // 100% = completely dependable on mouse position
    var differenceFactor = 5;
    var mouse_x = event.pageX + 1
    var mouse_xPercentage = 100 / (pageWidth / mouse_x);
    var transformX = (mouse_x * -1) / (100 / differenceFactor) - (pageWidth);
    var actualTransform = transformX;

    // vertical offset
    // base degrees
    var baseDeg = -23;
    // 100% = completely rotating
    var rotateFactor = 10;
    var mouse_y = event.pageY + 1;
    var mouse_yPercentage = 100 / (pageHeight / mouse_y);
    var deg = baseDeg + (((180 * (mouse_yPercentage / 100)) - 90) * (rotateFactor / 100));

    $('.article-bg').css({
      '-webkit-transform': 'translate(' + transformX + 'px, 0) scale(2) rotate(' + deg + 'deg)',
      'transform': 'translate(' + transformX + 'px, 0) scale(2) rotate(' + deg + 'deg)'
    });
    $('.actual-bg').css({
      '-webkit-transform': 'translate(' + 0 + 'px, 0) rotate(' + (-deg) + 'deg)',
      'transform': 'translate(' + 0 + 'px, 0) rotate(' + (-deg) + 'deg)'
    });
    })
  .on('resize', function() {
    var pageHeight = $(this).height();
    var pageWidth = $(this).width();
  });
});

希望有人能完成这个挑战！

Answer 1

假设你有两个<div> 您想将那些与顶部包含背景的重叠。 然后你可以使用<svg> 来剪辑元素。 使用<clipPath> 和<polygon>，您可以创建形状。 然后将其绑定到要剪辑的 div 上。

查看this pen

---

HTML：

<div id="content">
    <article class="valign">
        <h1>The Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
</div>
<div id="bg">
    <svg width="0" height="0">
      <clipPath id="clipPolygon">
        <polygon id="polygon">
        </polygon>
      </clipPath>
    </svg>
</div>

CSS：

#content,
#bg{
    position: absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
}
#content {
  background: #333;
  color: rgba(255, 255, 255, 0.87);
  padding: 20px;
}
#bg {
  background: url("http://res.cloudinary.com/derkjanspeelman/image/upload/v1474556599/diensten-main-bg_hv2aoc.jpg") center/cover no-repeat;
  background-size: cover;
  -webkit-clip-path: polygon(100% 100%, 100% 0%, 50% 0%, 50% 100%);
  clip-path: url("#clipPolygon");
}

完成此操作后，只需一些 Javascript 魔法，它应该可以正常运行 我做了一支笔http://codepen.io/iXshad0w/pen/zKwJaW，你可以去那里看看。

剪辑愉快：D