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

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

25.01.2015, 19:10. Показов 1654. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Первый деплой
lagorue 16.01.2026
Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru