2

o feito encontra-se nesse site https://www.canva.com/ é o efeito da tela principal antes de logar. Desde ja grata. :)

inserir a descrição da imagem aqui

2
  • dê uma olhada na interação do efeito blur no .CSS com JQuery. Commented 8/07/2018 às 18:19
  • Se precisar de ajuda na implementação pode me chamar.
    – Sam
    Commented 10/07/2018 às 0:44

2 Respostas 2

4

Opção 1

Fiz uma versão simplificada, mas as vezes pode te atender. Ela usa jQuery com um função bem básica apenas para fazer um elemento seguir o mouse.

Esse elemento que segue o mouse que tem um CSS para fazer o efeito de Spot Light mostrando a imagem que está abaixo. Precisei usar filtros e bland-modes, então não funciona em qq browser.

Como falei é uma versão simplificada, mas segue o exemplo.

$(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>
<!-- o jQuery é apenas para fazer a bola acompanhar o mouse  -->
<div class="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>   


Opção 2

O princípio é o mesmo, mas no .bola tem um backgrount-attachmente:fixed com o mesmo bg do fundo que tem o Blur, então onde o mouse passa o fundo perde o blur e ganha cor.

$(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>
<div class="bg1"></div>
<div class="trilha">
      <div class="bola bola1"></div>
      <div class="bola bola2"></div>
      <div class="bola bola3"></div>
</div>   

4

Pode usar um plugin (veja no JavaScript abaixo) que faz esse efeito usando canvas.

Crie uma div onde terá o fundo "escuro desfocado" (no exemplo é a div com a classe .dark). No plugin, onde é criado o canvas com a classe .blurlayer, coloque o caminho da imagem "clara e nítida" (veja comentário no código).

No CSS ambas as classes (.dark e .blurlayer) devem ter os estilos:

.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;
}

Você pode aplicar o efeito no body todo ou apenas em partes da página que desejar, basta fazer os ajustes necessários. O exemplo abaixo mostra o efeito aplicado no body todo:

(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>
<div class="dark"></div>

Você pode também adicionar a classe .dark na tag body, assim não é preciso criar a div .dark, mas aí é necessário remover o z-index, position, top e left da classe.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .