Breaking News: Grepper is joining You.com. Read the official announcement!

scroll and mousemove move text js

Sasuke Khan answered on December 7, 2022 Popularity 1/10 Helpfulness 1/10

answer scroll and mousemove move text js

scroll and mousemove move text js

Comment

      var body = document.querySelector('body');
      var section = document.querySelector('.section');

/////////////////// window scroll ///////////////////////////////

      window.onscroll = () => {
        var pass = Math.max(2020 - 1.8*window.scrollY - 1 )
        
        section.style.transform = `translateY(${pass}px)`;
      }
      
///////////////////// mouesmove jQuery //////////////////////////
      
       $('body').mousemove(function(e) {
        var moveX = (e.pageX * 1 / 35);
        var moveY = (e.pageY * -1 / 35);
        $('.section').css('translate', moveX + 'px ' + moveY + 'px');
      });

/////////////////////// mousemove parallax js /////////////////////////
      var h1 = document.querySelector('h1');

      document.querySelector('body').addEventListener('mousemove', parallax);

        function parallax(e) {
          var move = h1.getAttribute('data-speed');
          var x = (e.pageX * move) / 350;
          var y = (e.pageY * move) / 350;
          h1.style.transform = 'translate(' + x + 'px,' + y + 'px)';
        }
      ;


//////////////////////////////////parallax.js///////////////////////////////
 var box = document.querySelector('#box');

 let parallaxInstance = new Parallax(box);

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript mousemove move scroll text

Link to this answer
Share Copy Link

Contributed on Dec 07 2022

Sasuke Khan

0 Answers Avg Quality 2/10

scroll and mousemove move text js

Contents

More Related Answers

scroll and mousemove move text js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.