Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
В экстазе
 Аватар для wolfalone
168 / 152 / 38
Регистрация: 05.08.2012
Сообщений: 767
Записей в блоге: 3

Плагин для JQuery для показа блоков при скролле

25.01.2015, 19:10. Показов 1681. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток уважаемые!

Подскажите пожалуйста, есть ли какие-то плагины, которые бы позволили автоматизировать процесс создания "эффектов появления" блоков при скроллинге страницы?

Пример можно посмотреть тут.

P.S. Когда скроллинг доходит до определённого набора элементов на экране - они появляются с эффектом "увеличения" и/или эффектом "fadeIn". Хотелось бы получить нечто подобное, в уже готов виде. Спасибо.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
25.01.2015, 19:10
Ответы с готовыми решениями:

Плагин для показа одной картинки в привязке к дню
Здравствуйте. Ищу плагин, смысл которого в том, чтобы каждый день на сайте в одном блоке менялась картинка (img). Чтобы можно было забить...

Где скачать плагин для jquery вывод сообщения для старых браузеров?
Добрый день! Подскажите плагин jquery для распознавания браузера и вывод сообщения об обновлении браузера при ее старых версиях типа IE...

Анимированное появление блоков на странице при скролле
Помогите разобраться, хочу сделать при скролле анимацию, в плане выдвижения блоков слева и справа, вот пример -...

4
39 / 39 / 43
Регистрация: 14.07.2014
Сообщений: 230
27.01.2015, 00:49
Кода тут на самом деле очень немного.
А с вашего же примера в коде я нашел подключаемый скрипт, на удивление, с подробнейшими комментариями.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
        var winHeight = window.innerHeight ?
                function() {
                    return window.innerHeight;
                } :
                function() {
                    return document.documentElement.clientHeight;
                };
        $('.scroll-animate').each(function () {
            var block = $(this);
            $(window).load(function(){
                //отступ блока от начала документа
                var top = block.offset().top;
                //(отступ блока от начала документа) - (высота окна)
                top = top - winHeight();
                //на сколько px прокрутили документ
                var scroll_top = $(this).scrollTop();
                //если прокрутка больше чем отступ блока сверху (- ширина окна). т.е в тот момент когда блок появляется снизу
                //анимируем блок
                if ((scroll_top > top)) {
                    if (!block.hasClass('animate')) {
                      block.addClass('animate');
                    }
                } else {
                    block.removeClass('animate');
                }
            });
Сами же эффекты реализованы через CSS3 висящем на классе animate
1
В экстазе
 Аватар для wolfalone
168 / 152 / 38
Регистрация: 05.08.2012
Сообщений: 767
Записей в блоге: 3
27.01.2015, 00:54  [ТС]
Az Rieil, спасибо что откликнулись!

Я видел ссылку на этот класс, и уже даже сам написал всё это добро на JS/CSS... Но, дабы впредь не морочиться с подобными задачами, хотелось бы найти какой-то готовый плагин для JQeury для решения подобных задач...

P.S. Безусловно, можно написать подобное решение самостоятельно (как частное, так и плагин), но, хотелось бы рассмотреть готовые варианты, если таковые будут иметься.
0
39 / 39 / 43
Регистрация: 14.07.2014
Сообщений: 230
27.01.2015, 01:26
Ну держите
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#someelem').css('opacity',0);
jQuery.fn.epicScrollFadePlugin = function () {
    var bottomBorder = this.offset().top + this.height();
    var e = this;
    jQuery(window).scroll(function(){
        if(jQuery(window).scrollTop() > bottomBorder){
            e.animate({
                'opacity'   : 1
            },1000);
        }
    });
}
 
$('#someelem').epicScrollFadePlugin();
Не протестируете?)

Добавлено через 22 минуты
Проверил, работает, но 6ую строку лучше заменить.
JavaScript
1
 if(($(window).scrollTop()+document.body.clientHeight) > bottomBorder){
1
В экстазе
 Аватар для wolfalone
168 / 152 / 38
Регистрация: 05.08.2012
Сообщений: 767
Записей в блоге: 3
27.01.2015, 01:47  [ТС]
Az Rieil,

Ещё раз благодарю, я не проверял, но из кода - не сложно понять его суть...

Под "плагином", я имел в виду универсальное решение для большего кол-ва задач, нежели пара fade-эффектов. Мало ли, на будущее пригодится...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
27.01.2015, 01:47
Помогаю со студенческими работами здесь

Плагин для всплывающих/исчезающих блоков
Помогите найти плагин вордпресс для создания вот такого блока (как в примере) один открыт, нажимаем на вторую кнопку (миф #2) первая...

Два jquery для разных блоков
Здравствуйте!!!! Подскажите пожалуйста можно ли привязать jquery один к одному диву, другой к другому и чтоб они друг друга не видели,...

Плагин jQuery для работы с таблицами
Добрый день! Необходимо написать плагин, который берет данные из JSON и формирует из них таблицу. Эту часть я осилил по примерам, коих...

Revolution slider плагин для jquery
Всем доброго дня! Хотел бы спросить ваше мнение и обратиться за советом.. Может быть кто-нибудь использовал плагин Revolution slider...

Плагин jQuery Carousel Evolution для WordPress
Есть ли кто работал с данным плагином? Можете ли объяснить как его реализовать? Плагин представлен как набор скриптов и как их вставлять в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики.
Hrethgir 07.04.2026
Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .
Горе от ума
kumehtar 07.04.2026
Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
Использование значений реквизитов справочника в документе, с определенными условиями и правами
Maks 07.04.2026
1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию
Maks 07.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .
Уведомление о неверно выбранном значении справочника
Maks 06.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt
8Observer8 05.04.2026
Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .
AkelPad-скрипты, структуры, и немного лирики..
testuser2 05.04.2026
Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru