Rotate navigation text by 45deg on scroll

Question

I'm trying to recreate similar top menu navigation seen here: https://www.avenircreative.com/ - on scroll rotate text by 45deg - on scroll up keep it normal

I've found similar code that might be helpful but I can't make rotate it back on scrollTop.

$(window).scroll(function() {

  // get the variable of how far we've scrolled from the top
  var offset = $(window).scrollTop();
    offset     = offset * 10;

  // add css transform with the offset variable
  $('#sp-links a').css({
    '-moz-transform': 'rotate(' + offset + 'deg)',
    '-webkit-transform': 'rotate(' + offset + 'deg)',
    '-o-transform': 'rotate(' + offset + 'deg)',
    '-ms-transform': 'rotate(' + offset + 'deg)',
    'transform': 'rotate(' + offset + 'deg)',
  });

});

Taken from: https://codepen.io/chrisoncode/pen/mlJbD

Tried replacing rotate with '-webkit-transform': 'rotate(45deg)' but it doesn't work for scrollTop to go normal

Answer 1

Make something like:

if ( offset < 0 ) {
  offset = 0;
}else if ( offset > 45) {
  offset = 45;
}

This way the rotation will stop once it reaches 0 and will never be higher than 45 degrees.

Working example below

 $(window).scroll(function() { // get the variable of how far we've scrolled from the top var offset = $(window).scrollTop(); offset = offset; if ( offset < 0 ) { offset = 0; }else if ( offset > 45) { offset = 45; } // add css transform with the offset variable $('#sp-links a').css({ '-moz-transform': 'rotate(' + offset + 'deg)', '-webkit-transform': 'rotate(' + offset + 'deg)', '-o-transform': 'rotate(' + offset + 'deg)', '-ms-transform': 'rotate(' + offset + 'deg)', 'transform': 'rotate(' + offset + 'deg)', }); });

 /* change box sizing so padding behaves appropriately */ * { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } /* set body height so we can scroll */ body { min-height:2000px; } h2 small { color:#BBB; font-weight:normal; } /* basic positioning of 3 buttons */ #sp-links { padding-top:20px; position:fixed; text-align:center; width:100%; } /* styling each circle */ #sp-links a { color:#FFF; display:inline-block; font-size:80px; height:120px; margin:0 30px; padding-top:20px; width:120px; border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; -webkit-border-radius:50%; } /* set the background color of each circle */ #sp-facebook { background:#43609C; } #sp-twitter { background:#1CC1F7; } #sp-google { background:#DD4C3B; }.info { position:fixed; bottom:5%; width:100%; text-align:center; line-height:1.5; color:#333; }.info a { text-decoration:none; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- OUR LINKS --> <div id="sp-links"> <h2>Rotating Icons on Scroll <small>use the scrollbar</small></h2> <a id="sp-facebook" href="#"><span class="fab fa-facebook-f"></span></a> <a id="sp-twitter" href="#"><span class="fab fa-twitter"></span></a> <a id="sp-google" href="#"><span class="fab fa-google-plus"></span></a> </div>