Плавное исчезновение текста при scroll

263

06 января 2018, 04:50

при скролле в низ текст начинает исчезать

Пример Сайт))

http://kenarai.github.io/#/about

Заранее Очень благодарю

Answer 1

Как вариант мы можем просто уменьшать прозрачность текста.
Подробней о .scrollTop()

$(window).scroll(function() { 
  var height = $(window).scrollTop();              // Текущая позиция  скрола 
  $(".text").css("opacity", (150 - height) / 100); // Так как нужно указывать прозрачность вроде .50 и т.д., то делим на 100 
});

body { 
  min-height: 250vh; 
} 
 
.text { 
  font-size: 300%; 
  font-weight: bold; 
  text-align: center; 
  padding-top: 190px; 
  opacity: 1; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="text"> 
  My name is Ken Arai and I am a product designer 
</div>