How to make an interactive background?

Asked

Viewed 569 times

-2

I’m on a new project and I have a question. I would like to make the background (which is a simple gradient covering everything) of the home (home page) change its color tone according to mouse movements. For example, this yes: d.school, to which you pass the mouse and the "lines" follow. In my case, the colors "follow" changing tone.

Simply put: A gradient, where when you move the mouse over it, change the tone so that it accompanies the mouse, and not a random thing.

NOTE: It would also be good use, some recommendation of a plugin already made.

javascript jquery css html5 css3

  • I suggest you post some example code, otherwise you have no way of knowing what you really intend to develop. So don’t show search effort on what you want.

  • Hi? You want what? Change tone and shape? Don’t get it.

  • I know that kind of effect http://kithomepage.com/sos/background-interativo.htm

  • That’s exactly what I ordered @Leocaracciolo. It is very clear in the "simplifying" that I wrote: A gradient, where when passing the mouse over it, change the tone so that it accompanies the mouse, and not a random thing. More clear than that impossible. As for examples: I did not find. If I had found I would not even be asking here...

  • Can you give me the codes, @Leocaracciolo? Thank you in advance!

  • 'Cause what I showed you is not really a gradient, but since you like it I’m going to post the code and the source

  • I found this example where it doesn’t exactly change tone, but suddenly it’s a start to what you’re looking for.

  • Thanks guys. I managed to find a cool interactive background plugin and adapted it to this: Atheros.passeifacil.com. Just don’t mind the domain and content, just one example.

  • Look how it turned out (it’s actually getting) the site I’m doing: Atheros.passeifacil.com (just a temporary link). I mixed an effect with the gradient and was cool. I just wanted to understand how this question was not clear enough if I got the answer. Each thing...

Show 4 more comments

3 answers

1


The code is this

<!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>

And the source is that one

1

I found a different example of what I went through in the comment that suddenly gives to be better adapted to what you are looking for. This is the fiddle that I found.

I think if we adapt this way, it might suit you:

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

follows an example with Avascript.

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>

the same example with a background image.:

follows an example with Avascript.

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>

Browser other questions tagged javascript jquery css html5 css3

You are not signed in. Login or sign up in order to post.