Повернуть текст навигации на 45 градусов при прокрутке

Question

Я пытаюсь воссоздать аналогичную навигацию в верхнем меню, показанную здесь: https://www.avenircreative.com/ - при прокрутке повернуть текст на 45 градусов - при прокрутке вверх сохранить его нормальным

Я нашел похожий код, который можетбыть полезным, но я не могу заставить повернуть его обратно на 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)',
  });

});

Получено из: https://codepen.io/chrisoncode/pen/mlJbD

Попытка замены rotate на '-webkit-transform': 'rotate (45deg) 'но scrollTop не работает нормально

Answer 1

Сделайте что-то вроде:

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

Таким образом, вращение остановится, как только достигнет 0, и никогда не будет выше 45 градусов.

Рабочий пример ниже

$(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>