logo标签列表

跟随鼠标光标显示隐藏的文字，呈圆形。

javascriptjquerycss
3
我希望能得到关于显示一个文本的帮助，当鼠标经过时，它会隐藏在另一个文本后面，并在圆圈中跟随鼠标。我找到了一种使用mix-blend-mode和CSS遮罩的解决方案，但是这个解决方案会让两个文本根据所选颜色都出现在圆圈中(如下图黑色和紫色)，而我只想显示紫色文本在圆圈中。我考虑使用clip，但无法摆脱它。你们有什么想法吗？
感谢您提前的帮助！ 

jQuery(document).ready(function($) {

    var timer;
    var mouseX = 0, mouseY = 0;
    var xp = 0, yp =0;
    var circle = $("#circle");

    function mouseStopped(){    
                                 
        circle.removeClass('moving');
    }
   
    $(document).mousemove(function(e){
         
        circle.addClass('moving');
          mouseX = e.pageX - 160;
        mouseY = e.pageY - 160; 
       
        clearTimeout(timer);
        timer=setTimeout(mouseStopped,3000);   
    });
    
    
    var loop = setInterval(function(){
       xp += ((mouseX - xp)/12);
       yp += ((mouseY - yp)/12);
       circle.css({left: xp +'px', top: yp +'px'});  // 
    }, 30);

});
body, html {
    position: relative; 
    overflow : hidden;
    height: 100%; 
    width : 100%;  
    margin: 0;}


.pro {
    color: #000;
}

.perso {
    color: #6230e1;
}

.full-size { 
    height : 100%; 
    width : 100%; 
    position: absolute; 
    top : 0; 
    left : 0;
}

.blend-darken {
    mix-blend-mode : darken;
}

.blend-screen {
    mix-blend-mode : screen;
}

.mask-bg-color {
    background-color: #fff;
}
.animated-bg {
    background-color: black; 
}
.element-mask {
    background-color: #fff;
}

.circle-follow {
    position :absolute;
    overflow : hidden;
    background-color: #000000;
    width :320px; 
    height: 320px;
    top:calc( 50% - 160px); 
    left:calc( 50% - 160px); 
    -webkit-border-radius: 160px; 
    border-radius: 160px;  
    -webkit-transition: opacity 0.9s cubic-bezier(0.52, 0.01, 0.16, 1);  
    transition: opacity 0.3s cubic-bezier(0.52, 0.01, 0.16, 1);  
    opacity : 0; 
}

.circle-follow.moving {
    opacity : 1;
}


/* hack to detect ie11 and above - blend mode not supported */
_:-ms-fullscreen, :root .letter-mask {background-color: transparent; }
_:-ms-fullscreen, :root .animated-bg {opacity: 0.2;}
_:-ms-fullscreen, :root .circle-follow {background-color:#ffffff; opacity: 0.2; }
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="about.css">
    </head>
<body>
<div class="wrapper full-size">
    <!-- This div handle the background color and texte-->
    <div class="mask-bg-color full-size">
    <h1 class="pro">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.</h>
    </div>
    <!-- This div  wrap all other elements with blend-mode darken apply -->
    <div class="blend-darken full-size">    
        <!-- This div handle the background element-->
        <div class="animated-bg full-size">
        <h1 class="perso">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </h1>
        </div>
        <!-- This div wrap the masked element with blend-mode screen apply and background-color set as #ffffff = white background -->
        <div class="blend-screen element-mask full-size">
            <!-- This span display the masked element-->
            <span id="circle" class="circle-follow">
            </span>
        </div>
    </div>
</div>

<div class="notice">
    <h1></h1>
</div>

        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="circle.js"></script>
</body>

你尝试过使用z-index吗？https://www.w3schools.com/cssref/pr_pos_z-index.asp - Asutosh
嗨Asutosh， 谢谢你的回答！我现在会尝试并告诉你结果。 - Sarah
很遗憾它不起作用...我考虑使用剪辑而不是蒙版，但我不确定如何做。 - Sarah
1个回答
3

使用clip-path可以更简单地实现如下效果：

jQuery(document).ready(function($) {
  var timer;
  function mouseStopped() {
    $(".perso").removeClass('moving');
  }
  $(document).mousemove(function(e) {
    $(".perso").addClass('moving');
    $(".perso").css({
      '--x': e.pageX,
      '--y': e.pageY
    });
    clearTimeout(timer);
    timer = setTimeout(mouseStopped, 3000);
  });
});
body {
  margin: 0;
}

.wrapper {
  position: relative;
  min-height: 100vh;
  color: #000;
}

.pro,
.perso {
  padding: 1em 0;
  margin: 0;
}
.perso {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #6230e1;
  background-color: black;
  clip-path: circle(0px at var(--x, 0) var(--y, 0));
  transition: clip-path 0.3s cubic-bezier(0.52, 0.01, 0.16, 1);
  cursor: pointer;
}

.perso.moving {
  clip-path: circle(160px at var(--x, 0) var(--y, 0));
  transition: clip-path 0.15s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <h1 class="pro">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.</1h>

    <h1 class="perso">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </h1>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接