Moving background image on mousemove not working

Question

I'm trying to move background image on mousemove in Angular project. It is not working, I'm thinking that the problem is loading:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

because I debugged manually in my code with: "console.log("message") and nothing happens, so the function is never called.

Some piece of code:

HTML:

 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
  </head>


  <body>
    <div id="bg">
      <div class="container1" >
        <div class="row1">
          <div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true">
            <h1 class="title">Keeping track of your health, register as:</h1>
          </div>
          <div class="col-md-12" align="center" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true" >
            <a class="btn-link" href="/doctor-register"><button class="btn" type="button" type="submit" value="doctor">DOCTOR</button></a>
            <a class="btn-link" href="/patient-register"> <button class="btn" type="button" type="submit" value="patient">PATIENT</button></a>
            <a class="btn-link" href="/donor-register"><button class="btn" type="button" type="submit" value="donor">DONOR</button></a>
          </div>
        </div>
        </div> <!-- /container -->
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script type="text/javascript">
      $("#bg").mousemove(function(e){
      var moveX=(e.pageX*-1/15);
      var moveY=(e.pageY*-1/15);
      console.log("dsd");
      $("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
      });
      </script>

    </body>
  </html>

CSS:

#bg { 
    height: 100vh;
    background-image: url('../../../images/1.jpg'); /*  Background Image Link */   
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.container1 {
    display: table;
    width: 100%;
    height: 100%;
}

.row1{
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

Here is what I want https://codepen.io/chrisboon27/pen/rEDIC

Answer 1

You should check background image path.

 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'> </head> <body> <div id="bg"> <div class="container1" > <div class="row1"> </div> </div> <!-- /container --> </div> </body> </html> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $("#bg").mousemove(function(e){ var moveX=(e.pageX*-1/15); var moveY=(e.pageY*-1/15); $("#bg").css('background-position', moveX + 'px ' + moveY + 'px') }); </script> <style> #bg { height: 100vh; background-image: url('https://i.stack.imgur.com/rhStR.jpg'); /* Background Image Link */ background-size: cover; background-repeat: no-repeat; background-position: center; } .container1 { display: table; width: 100%; height: 100%; } .row1{ display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; } </style>

Moving background image on mousemove not working

Question

1 answers

solution1
0 2018-06-06 06:37:51

Moving background image on mousemove not working

Question

1 answers

solution1 0 2018-06-06 06:37:51

solution1
0 2018-06-06 06:37:51