o feito encontra-se nesse site https://www.canva.com/ é o efeito da tela principal antes de logar. Desde ja grata. :)
2 Respostas
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>
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 tagbody
, assim não é preciso criar adiv .dark
, mas aí é necessário remover oz-index
,position
,top
eleft
da classe.