0

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

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

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

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

введите сюда описание изображения

1 ответ 1

4

Как вариант мы можем просто уменьшать прозрачность текста.
Подробней о .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>

1
  • да - если заглянуть внутрь того сайта, то эффект реализован через прозрачность.
    – Dmytro
    4 янв 2018 в 11:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.