運動背景面膜用鼠標移動（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