JavaScript 鼠标位置剪辑路径效果 CSS 变量冒泡

Question

我想从该站点重新创建文本颜色叠加剪辑路径效果 http://fleurmoreau.fr/

我在这里做了一个版本https://codepen.io/Kerrys7777/pen/eYOrwbV。好像还可以，但是悬停在某些区域好像会产生冒泡的效果？我可以更改哪些内容以使其顺畅且功能正常？

我按照教程 https://www.youtube.com/watch?v=l_ahowxmqzg 进行操作，但使用的是纯 JavaScript。

我认为 'mouseout' function/method 导致了这个（冒泡）问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="all">

<style>
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&display=swap');

:root {
    --maskX: 0;
    --maskY: 50;
}


*,*:before,*:after {
    box-sizing: border-box;
}

body {
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #161B1E;
}

h1,
h2,
h3,
h4
{
    font-family: 'Cormorant Garamond', serif;
    margin: 0;
}

h1 {
    font-size: 15vw;
}

#titleContainer {
    position: relative;
    margin: 100px 0 0 50px;
    display: inline-block;
}

p {
    margin-left: 80px;
    font-size: 1em;
}


.titleWrapper {
    cursor: pointer;
    color: #D4BBAB;
    padding: 30px;
    /*--maskX: 0;
    --maskY: 50;*/
}

.cloneWrapper {
    position: absolute;
    top: 0;
    left: 0;
    color:#f2dcca;
    /*clip-path: polygon(0 0, calc(var(--maskX) * 1%) 0, calc(var(--maskY) * 1%) 100%, 0% 100%);*/
    transition: all 0.8s cubic-bezier(0.165,0.84,0.44,1); 
    clip-path: polygon(0 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * .4%) 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * -.4%) 100%,0 100%)
}

</style>

</head>
<body>
    <section id="titleContainer">
        <div class="titleWrapper">
            <h1>Text Effect</h1>
        </div>
        <div class="titleWrapper cloneWrapper">
            <h1>Text Effect</h1>
        </div>
    </section>

<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>

<p id="demo"></p>

<script>

//GET MOUSE POSITION RELATIVE TO THIS ELEMENT
var titleContainerBox = document.getElementById("titleContainer");

//ADD EVENT (MOUSEMOVE) LISTENER
titleContainerBox.addEventListener("mousemove", function(event) {
    mousePosMove(event);
});

//ADD EVENT (RESIZE) LISTENER
titleContainerBox.addEventListener("resize", function(event) {
    mousePosMove(event);
});

/*['mousemove','resize'].forEach( evt => 
    titleContainerBox.addEventListener(evt, mousePosMove(event), false)
);*/



function mousePosMove(e) {

    //GET CONTAINER DIMENSIONS
    var rect = titleContainerBox.getBoundingClientRect();
    var width = titleContainerBox.clientWidth;
    var height = titleContainerBox.clientHeight;

    //MOUSE POSITION PX INSIDE titleContainer
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    //MOUSE POSITION PERCENTAGE INSIDE titleContainer
    var oX = Math.floor((x/width) * 100);
    var oY = Math.floor((y/height) * 100);

    //UPDATE CSS VARIABLES
    titleContainerBox.style.setProperty('--maskX', oX);
    titleContainerBox.style.setProperty('--maskY', oY);

    //SHOW INFO IN PAGE
    var mouseCoordinates = "Coordinates: (" + x + ", " + y + ")" + "<br>" + " Dimensions: (" + width + ", " + height + ")" + "<br>" + " Percentage relative position: (" + oX + ", " + oY + ")";
    document.getElementById("demo").innerHTML = mouseCoordinates;
}


//ADD EVENT (MOUSEOUT) LISTENER TO REMOVE EFFECT
titleContainerBox.addEventListener("mouseout", function(event) {
    mousePosOut(event);
});

function mousePosOut(e) {
    //SET CSS VARIABLES TO ZERO (REMOVE EFFECT)
    setTimeout(function() { 
        titleContainerBox.style.setProperty('--maskX', 0); //-16 VALUE TO CORRECT CORNER ISSUE
        titleContainerBox.style.setProperty('--maskY', 0);
    }, 1000);
}

</script>

</body>
</html>

顺便说一句，实时示例代码设置 window 在哪里？

Answer 1

mouseout 事件导致了这个问题。更改为 mouseleave 和其他一些小调整。现在似乎工作正常。

//GET MOUSE POSITION RELATIVE TO THIS ELEMENT TO FEED CLIP-PATH CSS VARIABLE VALUES
var titleContainerBox = document.getElementById("titleContainer");

//ADD EVENT (MOUSEMOVE) LISTENER
titleContainerBox.addEventListener("mousemove", function(event) {
    mousePosMove(event);
});

//ADD EVENT (RESIZE) LISTENER
titleContainerBox.addEventListener("resize", function(event) {
    mousePosMove(event);
});

/*['mousemove','resize'].forEach( evt => 
    titleContainerBox.addEventListener(evt, mousePosMove(event), false)
);*/

function mousePosMove(e) {

    //GET CONTAINER DIMENSIONS
    var rect = titleContainerBox.getBoundingClientRect();
    var width = titleContainerBox.clientWidth;
    var height = titleContainerBox.clientHeight;

    //MOUSE POSITION PX INSIDE titleContainer
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    //MOUSE POSITION PERCENTAGE INSIDE titleContainer
    var oX = Math.floor((x/width) * 100);
    var oY = Math.floor((y/height) * 100);

    //UPDATE CSS VARIABLES
    titleContainerBox.style.setProperty('--maskX', oX);
    titleContainerBox.style.setProperty('--maskY', oY);

    //SHOW INFO IN PAGE
    var mouseCoordinates = "Coordinates: (" + x + ", " + y + ")" + "<br>" + " Dimensions: (" + width + ", " + height + ")" + "<br>" + " Percentage relative position: (" + oX + ", " + oY + ")";
    document.getElementById("demo").innerHTML = mouseCoordinates;
}

//ADD EVENT (MOUSEOUT) LISTENER TO REMOVE EFFECT
titleContainerBox.addEventListener("mouseleave", function( event ) {   
  //SET CSS VARIABLES TO ZERO AFTER A SHORT DELAY
  setTimeout(function() {
    titleContainerBox.style.setProperty('--maskX', -16);
    titleContainerBox.style.setProperty('--maskY', 0);
  }, 700);
}, false);

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&display=swap');

:root {
    --maskX: 0;
    --maskY: 50;
}


*,*:before,*:after {
    box-sizing: border-box;
}

body {
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #161B1E;
}

h1,
h2,
h3,
h4
{
    font-family: 'Cormorant Garamond', serif;
    margin: 0;
}

h1 {
    font-size: 15vw;
}

#titleContainer {
    position: relative;
    z-index: 3;
    margin: 100px 0 0 50px;
}

p {
    margin-left: 80px;
    font-size: 1em;
}


.titleWrapper {
    cursor: pointer;
    color: #D4BBAB;
    padding: 30px;
    /*--maskX: 0;
    --maskY: 50;*/
}

.cloneWrapper {
    position: absolute;
    top: 0;
    left: 0;
    color:#f2dcca;
    /*clip-path: polygon(0 0, calc(var(--maskX) * 1%) 0, calc(var(--maskY) * 1%) 100%, 0% 100%);*/
    transition: all 0.8s cubic-bezier(0.165,0.84,0.44,1); 
    clip-path: polygon(0 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * .4%) 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * -.4%) 100%,0 100%)
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clip Path Text Colour Effect</title>

</head>
<body>
    <section id="titleContainer">
        <div class="titleWrapper">
            <h1>Text Effect</h1>
        </div>
        <div class="titleWrapper cloneWrapper">
            <h1>Text Effect</h1>
        </div>
    </section>

<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>

<p id="demo"></p>


</body>
</html>

JavaScript 鼠标位置剪辑路径效果 CSS 变量冒泡

JavaScript Mouse Position Clip Path Effect With CSS Variables Bubbling

javascript

event-bubbling

mouse-position

clip-path