bewegter Hintergrund Maske mit mousemove- (jQuery, CSS)

Question

Ich versuche, eine Seite zu erstellen, die diesen Effekt hat:

.

Ich hatte es richtig, bis ich versuchte, einen Hintergrund zu implementieren. Ich bin es gewohnt, Photoshop (mit Schichten und Masken), aber leider HTML hat keine Masken.

Hier ist was ich habe.

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

Ich hoffe, dass jemand diese Herausforderung abschließen können!

Answer 1

Nehmen wir an, Sie haben zwei <div> Sie wollen diese mit denen mit dem Hintergrund oben überlappen. dann können Sie eine <svg> verwenden, um das Element zu schneiden. Mit einem <clipPath> und einem <polygon> können Sie die Formen erstellen. Dann binden Sie es an das Div, das Sie ausschneiden möchten.

Check out 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"); 
} 

Wenn dies getan wird, nur einige Javascript Magie und es sollte funktionell sein Ich habe einen Stift http://codepen.io/iXshad0w/pen/zKwJaW gemacht, können Sie es dort auschecken.

glücklich Clipping: D