带有鼠标移动交互效果的背景遮罩层（jQuery, CSS）

Question

带有鼠标移动交互效果的背景遮罩层（jQuery, CSS）

jquerycsstransformmousemove

5

我正在尝试创建一个具有以下效果的页面： this effect

我已经成功实现了它，但当我尝试为其添加背景时出现了问题。我习惯于使用Photoshop（带有图层和蒙版），但不幸的是HTML没有蒙版功能。

这是我的代码：

jQuery: The fiddle

$(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();
  });
});

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

- Derk Jan Speelman

我可以使用 SVG遮罩 来完成这个任务 :) - smalinux

Sohaib Mohammed，很想看到结果！ - Derk Jan Speelman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robin Knaapen · Accepted Answer

假设你有两个

，你想要用包含背景的一个覆盖它们。那么你可以使用

请查看这个笔记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