Member 13805815 Ответов: 1

Как мне изменить непрозрачность и положение div в зависимости от того, где я прокручиваю?

Я пытаюсь сделать очень текучую страницу, которая похожа на https://www.apple.com/macbook-pro/. Если вы посмотрите, то увидите, что при прокрутке вверх слова на первом баннере становятся более заметными и поднимаются к вершине снизу. Кто-нибудь знает, как сделать этот эффект возможным или на каком языке я буду его кодировать? Моя цель-создать аналогичный первый раздел "р" на веб-сайте, над которым я работаю.

Что я уже пробовал:

Я изучал страницу в течение бесчисленных часов и вырезал код слева и справа. Но я не могу заставить этот первый div "p" появиться, и я не могу получить эффект текучести и непрозрачности букв.

1 Ответов

Рейтинг:
0

Anil Bandela

С помощью JavaScript это может быть достигнуто. На основе прокрутки окна значение непрозрачности нужно изменить. Согласно apple URL изначально его непрозрачность 0.35 при прокрутке его изменение на 1.

используйте эту ссылку для ознакомления ScrollMe - для простых эффектов прокрутки[^]

попробуйте что-то вроде приведенного ниже

var divs = $('.social, .title'),
    limit = 35;  /* scrolltop value when opacity should be 0 */

$(window).on('scroll', function() {
   var st = $(this).scrollTop();

   /* avoid unnecessary call to jQuery function */
   if (st <= limit) {
      divs.css({ 'opacity' : (1 - st/limit) });
   }
});
when scrolltop reaches 35px then opacity of divs is 1 - 35/35 = 0