用mousemove移动背景蒙版(jQuery,CSS)

2023年3月21日 171次阅读

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

.

我做对了,直到我试图实现它的背景.我习惯了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();
  });
});

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

最佳答案 假设你有两个< div>

你想要与顶部背景的那些重叠.

然后你可以使用< svg>剪辑元素.

使用< clipPath>和 你可以创建形状.

然后将其绑定到要剪辑的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

点赞