Fade In / Out On Scroll - PullRequest
Новая
       100

Fade In / Out On Scroll

0 голосов
/ 01 мая 2020

Я пытаюсь заставить эту серию слайд-шоу постепенно исчезать при прокрутке. Пытаюсь заставить его делать постепенное затухание, но с этим ничего не получится.

https://thetulip.community/Shannon-Garden-Smith

<script>
$(window).scroll(function() {
    $(".image 1").css({
    'opacity' : 0.5-(($(this).scrollTop())/20)
    });          
});
</script>

Я пробовал это, но безрезультатно! Мои знания о Java ограничены, поэтому я не уверен, как заставить каждого из них появляться и исчезать на scorll. Любая помощь будет за пределами благодарности.

Спасибо, S

1 Ответ

0 голосов
/ 02 мая 2020

Добро пожаловать в сообщество.

Я не уверен, какую библиотеку вы используете для презентации в виде слайд-шоу, но jQuery имеет встроенные методы для постепенного увеличения или уменьшения элементов HTML. Вы можете просмотреть их здесь:

Обратите внимание, что каждый метод имеет дополнительную функцию для вызова после завершения анимации, которая вызывается один раз для соответствия элемента. Одним из подходов может быть вызов fadeOut () по щелчку, а затем вызов fadeIn () в полной функции метода fadeOut. Например: 

var images = [
  "https://freight.cargo.site/w/750/i/0c4f83626e13ce4aa69fee4a84d02618c43afa3ff33d3c6bbd8fd6e265aa5538/01-03-downwrong.jpg",
  "https://freight.cargo.site/w/750/i/3aa2564a6c11b13ef5c44820c69b00563e89ddd572372d52d60b6a0bfd80d1bc/01-04-downwrong.jpg"
]

var i = 0;

$(function() {
    $('img').attr('src', images[i]);
});

$('img').click(function() { 

    $(this).fadeOut('slow', function() {

        i = i === images.length - 1 ? 0 : i + 1;
        $('img').attr('src', images[i]);
        $(this).fadeIn('slow');
  });
});

Вот скрипка: https://jsfiddle.net/matthewmeppiel/n28hg4qj/5/

...