How to make an interactive background? [closed]

Question

How to make an interactive background? [closed]

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

-2

I'm in 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 the movements of the mouse. For example, this yes: d.school, to which you hover and the "lines" follow. In my case, the colors "follow" changing their tone.

Simplifying: A gradient, where by moving the mouse over, change tone to accompany the mouse, not a random thing.

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

javascript jquery html5 css css3

asked by anonymous 29.06.2017 / 21:01

3 answers

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 I found.

I think if we adapt in this way, it can serve 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>

30.06.2017 / 21:28

1

Follow an example with 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>

the same example with a background image.:

Follow an example with 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>

30.06.2017 / 22:13

Entity Framework 6: Error getting registry in SQL Server Mouse hover effect [closed]

score 1 · Accepted Answer

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><scripttype="text/javascript" src="http://www.jqueryscript.net/demo/Creating-Interactive-Gradient-Background-with-jQuery-Acid-Trip/dist/js/acid.min.js"></script><scripttype="text/javascript">
      $(document).ready(function() {
        $('.acid').acid();
      });
    </script>
  </body>
</html>

And the source is this