Insérer lien bibliothèque jquery

novis -  
 novis -
Bonjour,
je souhaite insérer un effet sur mon site, néanmoins, celui ci ne se met pas en action. Je pense me tromper lorsque j'insère la bibliothèque jquery nécessaire au bon fonctionnement.
L effet voulu se trouve là: https://codepen.io/dghez/pen/ItxKE

moi j'insère le script: <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
est ce bien cela. Si oui, quelle erreur ai je pu commettre?
Merci de votre aide
novis

Configuration: Windows / Firefox 68.0

1 réponse

  1. novis
     
    Pour info, la totalité de mon code est:

    html:
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link href="http://www.lienversmoncodecss.css" rel="stylesheet" type="text/css" /><script src="http://www.lienversmoncodejs.js"></script>
    <div class="container">
    <div class="title">MON TITRE</div>
    </div>


    css:
    @import url(https://fonts.googleapis.com/css?family=Raleway:400,,800,900);
    html {
      width: 100%;
      height: 100%;
    }
    body {
      background: -webkit-linear-gradient(#ebece7, white);
      background: linear-gradient(#ebece7, white);
      margin: 0;
      width: 100%;
      height: 100%;
      font-family: 'Raleway', sans-serif;
    }
    .container {
      position: absolute;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      left: 30%;
      top: 50%;
    }
    .title {
      font-weight: 900;
      color: transparent;
      font-size: 120px;
      background: url("http://adresse de mon image.jpg") repeat;
      background-position: 40% 50%;
      -webkit-background-clip: text;
      position: relative;
      text-align: right;
      line-height: 90px;
      letter-spacing: -8px;
    }


    js:
    $(document).ready(function(){
      var mouseX, mouseY;
      var ww = $( window ).width();
      var wh = $( window ).height();
      var traX, traY;
      $(document).mousemove(function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
        traX = ((4 * mouseX) / 570) + 40;
        traY = ((4 * mouseY) / 570) + 50;
        console.log(traX);
        $(".title").css({"background-position": traX + "%" + traY + "%"});
      });
    });


    Merci pour votre aide
    novis
    0