Could someone tell me how I can do this when I move the mouse?

Question

Could someone tell me how I can do this when I move the mouse?

Navigation

#1 by (4 votes)
#2 by (4 votes)

2

What you'll find on this site link is the effect of the main screen before logging in. Since now, grateful. :)

css website

asked by anonymous 08.07.2018 / 18:50

2 answers

How to insert new line in json file, using PHP? List separated by "-"

score 4 · Answer 1

Option 1

I made a simplified version, but sometimes it can take care of you. It uses jQuery with a very basic function just to make an element follow the mouse.

This element that follows the mouse that has a CSS to do the Spot Light effect showing the image that is below. I needed to use filtros and bland-modes , so it does not work in that browser.

As I said it is a simplified version, but follow the example.

$(document).mousemove(function(e){
    $('.bola').css({left:e.pageX, top:e.pageY});
})

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-image: linear-gradient(to left, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url(https://rharrington1992.files.wordpress.com/2012/10/a3-two11.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    filter: saturate(2);
}
.bola {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    filter: blur(10px);
    position: absolute;
    transform: translate(-50%, -50%);
    mix-blend-mode: soft-light;
    pointer-events: none;
    transition: 200ms;
}
.bola1 {
    transition: 100ms;
}
.bola2 {
    transition: 150ms;
}
.bola3 {
    transition: 200ms;
}
.bola4 {
    transition: 250ms;
}
.bola5 {
    transition: 300ms;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script><!--ojQueryéapenasparafazerabolaacompanharomouse--><divclass="bg"></div>
<div class="trilha">
    <div class="bola bola1"></div>
    <div class="bola bola2"></div>
    <div class="bola bola3"></div>
    <div class="bola bola4"></div>
    <div class="bola bola5"></div>
</div>

Option 2

The principle is the same, but in the .ball it has a backgrount-attachmente:fixed with the same bg of the background that has Blur , then where the mouse passes the background it loses blur and it gains color. >

$(document).mousemove(function(e){
      $('.bola').css({left:e.pageX, top:e.pageY});
})

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

.bg1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:linear-gradient(to left, rgba(0,0,0,0.75), rgba(0,0,0,0.75)),  url(https://rharrington1992.files.wordpress.com/2012/10/a3-two11.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(3px) grayscale(100%);
}

.bola {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    background-image: url(https://rharrington1992.files.wordpress.com/2012/10/a3-two11.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
    filter: blur(0px);
    position: absolute;
    transform: translate(-50%, -50%);
    mix-blend-mode: soft-light;
    pointer-events: none;
    transition: 200ms;
    background-position-y: 100px;
    background-position-x: 100px;

}
.bola1, .bola2, .bola3 {
    transition: 100ms;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script><divclass="bg1"></div>
<div class="trilha">
      <div class="bola bola1"></div>
      <div class="bola bola2"></div>
      <div class="bola bola3"></div>
</div>

score 4 · Answer 2

You can use a plugin (see the JavaScript below) that does this effect using canvas.

Create a div where the background will be "dark out" (in the example it is div with class .dark ). In the plugin where the canvas is created with the class .blurlayer , put the path of the image "clear and sharp" (see comment in the code).

In CSS both classes ( .dark and .blurlayer ) should have the following styles:

.blurlayer{
   position:absolute;
   left:0;
   top:0;
   z-index: -1;
}

.dark{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color:#3f4652;
   background-image:url(https://static.canva.com/static/images/bg_tiles.2.jpg); /*imagem escura*/
   background-size:cover;
   z-index: -1;
}

You can apply the effect to the% of all% or only parts of the page you want, just make the necessary adjustments. The example below shows the effect applied on body all:

(function() {
   var x=new r;
   function r(){}
   r.prototype.setInterval=function(a,b){
      return window.setInterval(a,b)
   }
   
   r.prototype.clearInterval=function(a){
      window.clearInterval(a)
   }
   
   r.prototype.setTimeout=function(a,b){
      return window.setTimeout(a,b)
   }
   
   r.prototype.clearTimeout=function(a){
      window.clearTimeout(a)
   }
   
   r.prototype.requestAnimationFrame=function(a){
      return window.requestAnimationFrame(a)
   }
   
   r.prototype.cancelAnimationFrame=function(a){
      window.cancelAnimationFrame(a)
   }
   
   function y(){
      var a=$("body");
      function b(){
         a.mousemove(function(c){
            p=c.clientX;
            t=c.clientY;
            w=Date.now();
            u||n()
         });
         
         $(window).on("blur mouseout",function(){
            t=p=null
         })
         .on("resize",function(){
            d&&d.parentNode&&d.parentNode.removeChild(d);
            q()
         });
         q()
      }
      
      function q(){
         var c,b;
         h();
         c=a.width();
         b=a.height();
         d=document.createElement("canvas");
         d.className="blurlayer";
         d.width=c;
         d.height=b;
         a.append(d);
         l=document.createElement("canvas");
         l.width=c;
         l.height=b;
         if(d.getContext&&d.getContext("2d")&&(m=d.getContext("2d"),
         f=l.getContext("2d"),
         f.lineCap="round",
         f.shadowColor="#000000",
         f.shadowBlur=-1<navigator.userAgent.indexOf("Firefox")?0:30,!g)){
            g=new Image();
            if(!a.css("background-image")) throw Error("element must have a background image");
            $(g).one("load",n);
            // imagem clara
            $(g).attr("src","https://static.canva.com/static/images/bg_tiles_color.2.jpg");
         }
      }
      
      function h(){
         v=[];
         $(".js-blurEffect--skip").each(function(c,a){
            var d;
            d=$(a);
            d.is(":visible")&&(c=d.position(),
            a=d.outerWidth(),
            d=d.outerHeight(),
            v.push({
               top:c.top,
               left:c.left,
               width:a,
               height:d
            })
         )}
      )}
      
      function n(){
         var c, b=Date.now();
         c=a.scrollTop();
         u=b>w+500?!1:!0;
         p&&u&&e.unshift({
            time:b,x:p,y:t+c
         });
         for(c=0;c<e.length;)
         1E3<b-e[c].time?e.length=c:c++;
         0<e.length&&x.requestAnimationFrame(n);
         f.clearRect(0,0,l.width,l.height);
         for(c=1;c<e.length;c++){
            var h=Math.sqrt(Math.pow(e[c].x-e[c-1].x,2)+Math.pow(e[c].y-e[c-1].y,2));
            f.strokeStyle="rgba(0,0,0,"+Math.max(1-(b-e[c].time)/1E3,0)+")";
            f.lineWidth=25+75*Math.max(1-h/50,0);
            f.beginPath();
            f.moveTo(e[c-1].x,e[c-1].y);
            f.lineTo(e[c].x,e[c].y);
            f.stroke()
         }
         b=d.width;
         c=d.width/g.naturalWidth*g.naturalHeight;
         c<d.height&&(c=d.height,b=d.height/g.naturalHeight*g.naturalWidth);
         m.drawImage(g,0,0,b,c);
         m.globalCompositeOperation="destination-in";
         m.drawImage(l,0,0);
         m.globalCompositeOperation="source-over";
         v.forEach(function(c){
            m.clearRect(c.left,c.top,c.width,c.height)
         })
      }
      var d,l,m,f,g,p=null,t=null,e=[],w=0,u=!0,v=[];
      "createTouch" in document||$(b)
   }
   
   $(function(){
      y()
   });
})();

html, body{
   margin: 0;
   height: 100%;
}

.blurlayer{
   position:absolute;
   left:0;
   top:0;
   z-index: -1;
}

.dark{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color:#3f4652;
   background-image:url(https://static.canva.com/static/images/bg_tiles.2.jpg); /*imagem escura*/
   background-size:cover;
   z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dark"></div>

You can also add the class body to the .dark tag, so it is not I need to create the body , but then it is necessary to remove the div .dark , z-index , position and top of the class.