Страница 1 из 11
Модератор форума: JonMagon 
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » jQuery » Автоматическая подгрузка элементов страницы при скроле
Автоматическая подгрузка элементов страницы при скроле
levinson
Сообщений: 113
Репутация: 29

Сообщение # 1 | 16:31:08
В интернет-магазине есть много товаров, и было бы красиво и удобно, если бы новый товар подгружался при прокручивании страницы вниз.
Так же как например подгружаются блоки del . Или тут (обратите внимание на блоки справа, они появляются по мере прокрутки страницы. Сайт на Юкозе кстати)
Из того, что я понял при изучении внутренностей сайта по последней ссылке: в эффекте участвует файл animate.min.css (который почему-то не скачивается вместе со страницей), далее немного из my.css (а именно класс .sidebox {... ), и еще возмоэно ui.js (его роль понятна меньше всех. Ясно что без JS не обойтись, но вскрытие его ничего кроме совпадения одного класса особо не показало).
На форуме никаких аналогичных ситуаций не обнаружил.
Быть может я не совсем в ту тему лезу, так что за возможный офтоп извиняюсь.
Сообщение отредактировал levinson - Понедельник, 03 Ноя 2014, 16:31:20
Head-Mad
Сообщений: 378
Репутация: 129

Сообщение # 2 | 18:05:53
Цитата levinson ()
и было бы красиво и удобно, если бы новый товар подгружался при прокручивании страницы вниз
Это не совсем то что показано в примерах. В примерах, блоки изначально присутствуют на странице, и при попадание в зону видимости происходит просто анимация их появления. В случае с товаром- придется реально подгружать товар с другой страницы+ анимация появления. Скрипт - не самый сложный, но и не самый простой. Так что думаю, ни кто просто так делать не станет.

Можешь забрать этот код и вставить его себе, сам знаешь куда.
levinson
Сообщений: 113
Репутация: 29

Сообщение # 3 | 23:40:43
Ну хорошо. Тогда впринципе, как это работает?
понял что для всего фокуса достаточно одного CSS. Выглядит это так:
Код
<div class="sidebox animated fadeInUp" data-effect="fadeInUp">
<img src="/_sh/7/775m.jpg" >
содержание слоя
</div>
А CSS побольше будет:

Код
.sidebox {background:#fff;padding:12%;margin:0 0 17%;font-size:.9em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.animated{   -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
.animated.hinge{   -webkit-animation-duration:2s;
    animation-duration:2s
}
.fadeInUp{   -webkit-animation-name:fadeInUp;
    animation-name:fadeInUp
}
...
Там еще много всякой дряни написано нерусской.
Вопрос в том, что сама анимация у меня почему-то загружается вместе со страницей, я даже не сразу понял что она работает, т.к. пока ниже опустишься он уже отыграет.
Какое свойство отвечает за начало анимации при попадании слоя в зону видимости?
Полный css тут.
Head-Mad
Сообщений: 378
Репутация: 129

Сообщение # 4 | 09:57:27
Цитата levinson ()
Ну хорошо. Тогда впринципе, как это работает?
понял что для всего фокуса достаточно одного CSS. Выглядит это так:
Нет, одного css не достаточно. Анимация может быть сделана на css? а вот запускать ее должен JS. Хотя для большей универсальности, наверное стоит и анимацию сделать на JS, если до сих пор ориентируетесь на старые браузеры.

Можешь забрать этот код и вставить его себе, сам знаешь куда.
levinson
Сообщений: 113
Репутация: 29

Сообщение # 5 | 14:13:06
Чем же тогда юкоз может не удовлетворять скрипт уже действующий на другом юкозовском сайте?!
Head-Mad
Сообщений: 378
Репутация: 129

Сообщение # 6 | 14:16:41
Цитата levinson ()
Чем же тогда юкоз может не удовлетворять скрипт уже действующий на другом юкозовском сайте?!

это вообще о чем?

Можешь забрать этот код и вставить его себе, сам знаешь куда.
levinson
Сообщений: 113
Репутация: 29

Сообщение # 7 | 15:58:35
Цитата Head-Mad ()
это вообще о чем?

скрипт и css были любезно списаны с сайта euroinvision.ru , работающего на Юкозе. Правда скрипт видимо в кодировке ЮТФ-8 или еще какой и непонятно что внутри.
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » jQuery » Автоматическая подгрузка элементов страницы при скроле
Страница 1 из 11
Поиск: