Rotating logo

[MatthM]

Hello,

I’m trying to make my logo (top left in header) rotate when the page is scrolled.

Everything works fine in the Pro editor preview, but nothing happens on the front end (final) page.

Can you help me out?

https://staging.muziekfabriek.com/home

–

I used this JS:

jQuery(function() {
var rotation = 100,
scrollLoc = $(document).scrollTop();
$(window).scroll(function() {
var newLoc = $(document).scrollTop();
var diff = scrollLoc - newLoc;
rotation += diff, scrollLoc = newLoc;
var rotationStr = “rotate(” + rotation + “deg)”;
$(".gear").css({
“-webkit-transform”: rotationStr,
“-moz-transform”: rotationStr,
“transform”: rotationStr
});
});
})

[nabeel]

Hi Matth,

Thank you for reaching out to us. There was syntax error in your script, I went ahead and replaced your code with the following:

jQuery( document).ready( function($) {
    var rotation = 100, 
        scrollLoc = $(document).scrollTop();
    $(window).scroll(function() {
        var newLoc = $(document).scrollTop();
        var diff = scrollLoc - newLoc;
        rotation += diff, scrollLoc = newLoc;
        var rotationStr = "rotate(" + rotation + "deg)";
        $(".gear").css({
            "-webkit-transform": rotationStr,
            "-moz-transform": rotationStr,
            "transform": rotationStr
        });
    });
});

Also you had the code in your Global JS section as well, I commented the code in Global JS section to remove the conflicts. Please clear your browser’s cache now and check your site.

Cheers!

[MatthM]

Thank you so much. Themeco Rules. Your support is amazing.

[rad]

You’re most welcome!