devellopah
devellopah

Reputation: 471

How to transform my jquery script to vanilla js?

Have written parallax with jquery.
My javascript skills are sucks.
Can you please put my code to vanilla js way.


https://jsfiddle.net/Islam_Ibakaev/yqb2sbgc/15/#username

$('#intro').on('mousemove', function(e) {
        var w = $(window).width();
        var offsetX = 0.5 - e.pageX / w;
        var moon = $(this).find('.moon');
        var buildings = $(this).find('.buildings');
        var offsetForM = parseInt(moon.data('offset'));
        var offsetForB = parseInt(buildings.data('offset'));
        var translateM = "translate(" + Math.round(offsetX * offsetForM) + "px";
        var translateB = "translate(-" + Math.round(offsetX * offsetForB) + "px";
        moon.css({
            '-webkit-transform': translateM,
            'transform': translateM,
            'moz-transform': translateM
            });
       buildings.css({
            '-webkit-transform': translateB,
            'transform': translateB,
            'moz-transform': translateB
            });

    });

Upvotes: 2

Views: 950

Answers (1)

Cerlin
Cerlin

Reputation: 6722

is this what you need?

document.getElementById('intro').onmousemove = function(e) {
    var w = window.innerWidth;
    var offsetX = 0.5 - e.pageX / w;
    var moon = document.getElementsByClassName('moon')[0];
    var buildings = document.getElementsByClassName('buildings')[0];
    var offsetForM = parseInt(moon.getAttribute('data-offset'));
    var offsetForB = parseInt(buildings.getAttribute('data-offset'));
    var translateM = "translate(" + Math.round(offsetX * offsetForM) + "px";
    var translateB = "translate(-" + Math.round(offsetX * offsetForB) + "px";
    moon.style.webkitTransform = translateM;
    moon.style.MozTransform = translateM;
    moon.style.transform = translateM;
    buildings.style.webkitTransform = translateB;
    buildings.style.MozTransform = translateB;
    buildings.style.transform = translateB;
};

Upvotes: 6

Related Questions