Эффекты при прокрутке страницы

@pitline · Регистрация: 21.12.2013

Студворк — интернет-сервис помощи студентам

Как добавляются эффекты при прокручивании страницы? Допустим что бы анимация секции страницы выполнялась не при загрузке, а при появлении этой секции на экране пользователя

@Micheal · 17.07.2014, 11:52

в jQuery это функция - scroll(callback)

Добавлено через 8 минут
чтобы определить текущую позицию ползунка прокрутки - используй

JavaScript
1
$(document).scrollTop()

Так, если вцелом описать:

JavaScript
1
2
3
$(document).scroll(function(){
alert($(document).scrollTop());
});

Вместо алерта используй проверку текущего положения ползунка с позицией элемента, который необходимо анимировать

@vovandr · 17.07.2014, 11:53

Вам нужен плагин waypionts http://imakewebthings.com/jquery-waypoints/.

zhibirc · 17.07.2014, 12:23

Анимацию элементов с точки зрения производительности лучше отключать при скроллинге. Задача пользователя, который скроллит страницу, как правило, доскроллить до нужного места. Ему мало важно, что там мигнет или выскочит пока он скроллит контент. Потом всю анимацию можно вернуть. Делается просто:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function addHandler(elem, event, callback) {
        if (elem.addEventListener) {
            elem.addEventListener(event, callback, false);
        }
        else if (elem.attachEvent) {
            elem.attachEvent('on' + event, callback);
        } else {
            elem[event] = callback;
        }
    }
// !!!
    var body = document.body, timer;
    addHandler(window, 'scroll', function() {
        clearTimeout(timer);
        if (!body.classList.contains('disable-hover')) {
            body.classList.add('disable-hover');
        }
        timer = setTimeout(function() {
            body.classList.remove('disable-hover');
        }, 500);
    });

CSS
1
2
3
.disable-hover {
    pointer-events: none;
}

@pitline · 17.07.2014, 15:20 **[ТС]**

вот нашел решение один к одному http://markgoodyear.com/labs/headhesive/
в значении offset задается положение скролла (идентификатор элемента или числовое значение, без "px" )
Тема закрыта

@kalabuni · 17.07.2014, 15:37

pitline, код по вашей ссылке "ключница делала" (с)

назначать id тегу <BODY>, да ещё и давать ему значение top - это только очень крутой идиот может

свойство scrollTop (как и scrollLeft) по определению возвращает/устанавливает значения в целых числах (соответствующих пикселям)

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@pitline 42 / 10 / 6 Регистрация: 21.12.2013 Сообщений: 208

	Эффекты при прокрутке страницы 17.07.2014, 11:11. Показов 4892. Ответов 5 Метки нет (Все метки) Как добавляются эффекты при прокручивании страницы? Допустим что бы анимация секции страницы выполнялась не при загрузке, а при появлении этой секции на экране пользователя 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	17.07.2014, 11:53
	Вам нужен плагин waypionts http://imakewebthings.com/jquery-waypoints/. 0

@pitline 42 / 10 / 6 Регистрация: 21.12.2013 Сообщений: 208
	17.07.2014, 15:20 [ТС]
	вот нашел решение один к одному http://markgoodyear.com/labs/headhesive/ в значении offset задается положение скролла (идентификатор элемента или числовое значение, без "px" ) Тема закрыта 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	17.07.2014, 15:37
	pitline, код по вашей ссылке "ключница делала" (с) назначать id тегу <BODY>, да ещё и давать ему значение top - это только очень крутой идиот может свойство scrollTop (как и scrollLeft) по определению возвращает/устанавливает значения в целых числах (соответствующих пикселям) 0