Анимация при прокрутке JS
Я новичок в JavaScript и пытаюсь добавить анимацию при прокрутке на сайт.
У меня есть несколько div, каждый с уникальным именем класса, и все с одним и тем же классом .раздел.
Я хочу анимировать каждый .раздел при прокрутке, не вызывая другой .секции
<section class = "home__one section></section>
<section class = "home__two section></section>
<section class = "home__three section></section>
<section class = "home__four section></section>
$(window).on("scroll",function(){
var winTop = $(this).scrollTop();
var section = $(".section").offset().top;
if (winTop >= section-400) {
$(".section").addClass("animate");
};
});
Приведенный выше код, очевидно, запускает каждый .раздел, когда первый достигает своей позиции при прокрутке.
Я не могу понять, как вызвать один .раздел, когда он появится в поле зрения.
Возможно, я делаю это совершенно неправильно, поэтому, если это так, ваша помощь будет очень признательна.
@VTodorov Не совсем так. По крайней мере, не для этого случая.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Здесь вам нужно пройтись по всем доступным разделам, и в зависимости от того, какой раздел соответствует, вы должны применить класс.
if (winTop >= section - 400) {
$(".section").addClass("animate");
};
Кроме того, у вас нет ; в конце оператора if.
Ваш окончательный код будет выглядеть так:
$(window).on("scroll", function(){
var winTop = $(this).scrollTop();
$(".section").each(function () {
var section = $(this).offset().top;
if (winTop >= section-400) {
$(this).addClass("animate");
}
});
});
Я бы предложил убрать класс animate со всех остальных разделов. Итак, измените свой код следующим образом:
$(window).on("scroll", function(){
var winTop = $(this).scrollTop();
$(".section").removeClass("animate").each(function () {
var section = $(this).offset().top;
if (winTop >= section-400) {
$(this).addClass("animate");
}
});
});
Кроме того, как только вы начнете добавлять класс, вы не хотите, чтобы в других был этот класс. Итак, дайте максимальное значение тоже.
$(window).on("scroll", function(){
var winTop = $(this).scrollTop();
$(".section").removeClass("animate").each(function () {
var section = $(this).offset().top;
if (winTop >= section-400) {
$(".section").removeClass("animate");
$(this).addClass("animate");
}
});
});
Рабочий фрагмент:
$(window).on("scroll", function(){
var winTop = $(this).scrollTop();
$(".section").removeClass("animate").each(function () {
var section = $(this).offset().top;
if (winTop >= section-400) {
$(".section").removeClass("animate");
$(this).addClass("animate");
}
});
});.section {
height: 750px;
}
.animate {
background: #960;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class = "home__one section">Section one</section>
<section class = "home__two section">Section two</section>
<section class = "home__three section">Section three</section>
<section class = "home__four section">Section four</section>Предварительный просмотр:
Демонстрация, которую вы можете увидеть в работе, медленно прокручивая: Демонстрация JSBin.
Это именно то, что мне было нужно, и это работает. Большое спасибо.
Если я не хочу, чтобы класс удалялся, как мне изменить этот код? У меня мигает при прокрутке :(
@Leanne Вы можете попробовать добавить какие-то переходы ... Я дам вам еще один фрагмент. Вот. ?
Это не сработало. Класс добавляется, а затем удаляется при прокрутке. Я хочу, чтобы класс оставался добавленным.
@Leanne Требуется небольшое пояснение. Вы хотите, чтобы класс остался? О, извините, просто удалите строку $(".section").removeClass("animate");. Сначала не понял.
Это нормально, спасибо за вашу помощь. Вы когда-нибудь использовали это для такого рода вещей? silvetreh.github.io/onScreen Я пытался это реализовать, но у меня не вышло.
@Leanne Извините за задержку с ответом, так как я в офисе. onScreen великолепен, и я использовал его, чтобы делать забавные вещи на основе прокрутки. Да, скажите мне, что вы хотите с ним, рад помочь вам.
У меня это работает на codepen, но не работает на моем локальном сайте WordPress. JS:(function(d,w,$) { var os = new OnScreen({ tolerance: 200, debounce: 25, container: window }); os.on('enter', '.section', (element, event) => { element.classList.add("animate"); }); })(document, window, jQuery); Что я делаю не так? Большое спасибо, я очень ценю всю вашу помощь и не беспокоюсь о задержке :)
@Leanne Ааа, местный WordPress? Хорошо... Тем не менее, эта демонстрация выглядит неплохо.
Спасибо. Да, местный WordPress. Любые предложения относительно того, почему это не сработает?
@Leanne Проверить наличие ошибок консоли, например $ not found или что-то в этом роде?
@Leanne Woah ... Вы запускаете код до загрузки элемента?
Я думаю, что использую ES6 и, возможно, мне нужен ES5?
@Линн Ха, попробуй. Стоит попробовать.
Нет, я использую ES5. Я понятия не имею, что с ним не так! Грррр
@Leanne Должны ли мы отключить это от переполнения стека? Стреляйте мне быстро по электронной почте может быть? Электронная почта в моем Веб-сайт.
Используйте идентификаторы, а не классы, если вам нужны отдельные функции.