-2

Estou em um novo projeto e tenho uma dúvida. Gostaria de fazer o background (que é um simples degradê cobrindo tudo) da home (página inicial) mudar o seu tom de cor de acordo com os movimentos do mouse. Por exemplo, esse sim: d.school, ao qual você passa o mouse e as "linhas" seguem. No meu caso, as cores "seguem" mudando de tom.

Simplificando: Um degradê, onde ao passar o mouse por cima, mude de tom de forma que acompanhe o mouse, e não uma coisa aleatória.

OBS: Também seria de bom uso, alguma recomendação de um plugin já feito.

9
  • Sugiro você postar algum exemplo de código, caso contrário não tem como saber o que realmente você pretende desenvolver. Assim não mostra esforço de pesquisa no que você quer. 29/06/2017 às 19:33
  • Oi? Tu quer o que? mude de tom e forma? Não entendi.
    – Aline
    29/06/2017 às 20:21
  • Sei desse tipo de efeito kithomepage.com/sos/background-interativo.htm
    – user60252
    29/06/2017 às 21:49
  • É exatamente isso que pedi @LeoCaracciolo. Está bem claro no "simplificando" que escrevi: Um degradê, onde ao passar o mouse por cima, mude de tom de forma que acompanhe o mouse, e não uma coisa aleatória. Mais claro que isso impossível. Quanto a exemplos: não achei. Se tivesse achado não estaria nem perguntando aqui...
    – Artur
    30/06/2017 às 18:52
  • Pode me passar os códigos, @LeoCaracciolo? Agradeço desde já!
    – Artur
    30/06/2017 às 18:53

3 Respostas 3

1

O código é esse

<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if (IE 7)&!(IEMobile) ]><html class="ie7"> <![endif]-->
<!--[if (IE 8)&!(IEMobile) ]><html class="ie8"> <![endif]-->
<!--[if (IE 9)&!(IEMobile) ]><html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <title>Acid Trip</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- STYLE -->
    <link href="http://www.jqueryscript.net/demo/Creating-Interactive-Gradient-Background-with-jQuery-Acid-Trip/dist/css/acid.min.css" media="all" rel="stylesheet" type="text/css" />

    <!-- SCRIPT -->
    <script type="text/javascript">
      /*=============================================
      =            Detect Smart Browsers            =
      =============================================*/
      if ('visibilityState' in document) {
        var doc = document.getElementsByTagName("html");
        doc[0].className = 'modern-browser';
      }
    </script>

  </head>
  <body class="acid">
    <h1 class="acid-text">Acid Trip</h1>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://www.jqueryscript.net/demo/Creating-Interactive-Gradient-Background-with-jQuery-Acid-Trip/dist/js/acid.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('.acid').acid();
      });
    </script>
  </body>
</html>

E a fonte é essa

1

Encontrei um exemplo diferente do que eu passei no comentário que de repente dá para ser melhor adaptado ao que você procura. Este é o fiddle que encontrei.

Acho que se adaptarmos desta forma, pode te atender:

var $win = $(window),
  w = 0,
  h = 0,
  rgb = [],
  getWidth = function() {
    w = $win.width();
    h = $win.height();
  };

$win.resize(getWidth).mousemove(function(e) {

  rgb = [
    Math.round(e.pageX / w * 255),
    Math.round(e.pageY / h * 255),
    150
  ];

  $(document.body).css('background', 'rgb(' + rgb.join(',') + ')');

}).resize();
div {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
  /* IE6-9 */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

1

segue um exemplo com javaScript.

var circle = document.querySelector('.circle');
window.addEventListener("mousemove", function (event) {
  var posX = (event.clientX - (circle.clientWidth / 2));
  var posY = (event.clientY - (circle.clientHeight / 2));
  circle.style.top = posY + "px";
  circle.style.left = posX + "px";
  var pos = "";
  pos += posX < 0 ? (posX * -1) + "px " : "-" + posX + "px ";
  pos += posY < 0 ? (posY * -1) + "px " : "-" + posY + "px ";
  circle.style.backgroundPosition = pos;  
});

var onResize = function (event) {
  var height = document.body.clientHeight;
  var width = document.body.clientWidth;
  var size = width + "px " + height + "px";
  
  document.body.style.backgroundSize = size;
  circle.style.backgroundSize = size;
}

window.addEventListener("resize", onResize);
onResize();
body, html {
  position: relative;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, orange, yellow, green, cyan, blue, violet) no-repeat;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.circle {
  pointer-events: none;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  filter: url(svg#inverter_canais);
  background: inherit;
  border-radius: 50%;
}
<svg height="100" width="100">
  <filter id="inverter_canais">
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feColorMatrix 
      values="0   0.5 0.5 0 0  
              0.5 0   0.5 0 0  
              0.5 0.5 0   0 0
              0   0   0   1 0"/>
  </filter>
</svg>

<div class="circle"></div>

o mesmo exemplo porem com uma imagem de background.:

segue um exemplo com javaScript.

var circle = document.querySelector('.circle');
window.addEventListener("mousemove", function (event) {
  var posX = (event.clientX - (circle.clientWidth / 2));
  var posY = (event.clientY - (circle.clientHeight / 2));
  circle.style.top = posY + "px";
  circle.style.left = posX + "px";
  var pos = "";
  pos += posX < 0 ? (posX * -1) + "px " : "-" + posX + "px ";
  pos += posY < 0 ? (posY * -1) + "px " : "-" + posY + "px ";
  circle.style.backgroundPosition = pos;  
});

var onResize = function (event) {
  var height = document.body.clientHeight;
  var width = document.body.clientWidth;
  var size = width + "px " + height + "px";
  
  document.body.style.backgroundSize = size;
  circle.style.backgroundSize = size;
}

window.addEventListener("resize", onResize);
onResize();
body, html {
  position: relative;
  height: 100%;
  width: 100%;
  background: url('https://s-media-cache-ak0.pinimg.com/originals/75/41/5f/75415fc1677a2bcaf916fbfc5c94a645.jpg') no-repeat;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.circle {
  pointer-events: none;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  filter: url(svg#inverter_canais);
  background: inherit;
  border-radius: 50%;
}
<svg height="100" width="100">
  <filter id="inverter_canais">
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feColorMatrix 
      values="0   0.5 0.5 0 0  
              0.5 0   0.5 0 0  
              0.5 0.5 0   0 0
              0   0   0   1 0"/>
  </filter>
</svg>

<div class="circle"></div>

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