Бесконечная прокрутка. Бесконечная прокрутка страницы с записями, средствами jQuery. Недостаток: Дополнительные действия

Блочный элемент в HTML –это такой элемент, который занимает по умолчанию всю ширину родительского элемента. Родительским элементом может быть другой блочный элемент, или окно браузера. Блочному элементу с помощью свойств CSS можно задать ширину (width) и высоту (height). Позиционированием блочных элементов называется процесс их расположения внутри окна браузера и относительного друга с помощью CSS свойств position , left , top , right и bottom . Свойство CSS position предназначено для задания одного из четырёх доступных видов позиционирования: static (по умолчанию), absolute (абсолютное), fixed (фиксированное) и relative (относительное). Остальные CSS свойства, а именно left , top , right и bottom предназначены для задания расстояний относительно левого, верхнего, правого и нижнего края родительского элемента. Также блочные элементы при задании определенных свойств могут накладываться друг друга, и данную возможность то же можно использовать на сайтах.

Позиционирование по умолчанию (static)

Если вы не указали position у блочного элемента или указали static , что одно и то же, то в таком случае блочные элементы располагаются по порядку. Причем следующий блок (например: красный) располагается с новой строки. Так же на данное позиционирование не действует задание расстояний left , top , right и bottom .

Абсолютное позиционирование (absolute)

При абсолютном позиционировании положения элемента задаётся относительно краёв окна браузера с помощью расстояний, задаваемых свойствами left , top , right и bottom . Если указать расстояния left и right одновременно, и они будут противоречить между собой, то предпочтение отдаётся left , то же самое касается top и bottom , в которых больший приоритет имеет расстояние top . Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.

Фиксированное позиционирование (fixed)

Фиксированное позиционирование отличается от других видов позиционирования и не перемещается вместе с контентом при скроллинге страницы. Блочные элементы с фиксированным позиционированием привязываются с помощью свойств left , top , right и bottom к краям окна браузера. Фиксированное позиционирование применяется для создания фреймовых интерфейсов (окно браузера делится на несколько областей), фиксированного меню, фиксированного подвала сайта и "постоянных" блоков (перечень ссылок, социальные кнопки и т.д.).

Относительное позиционирование (relative)

Относительное позиционирование задаётся с помощью задания расстояний left , top , right и bottom относительно его текущего положения.

Однако такое положение блока можно создать и с помощью свойства margin (отступы).

Относительное позиционирование не интересно использовать само по себе, оно в основном применяется вместе с абсолютным позиционированием.

Рассмотрим варианты:

Они работают со всеми позиционированными элементами, кроме статических.

Пример позиционирования.

Элементы могут перекрывать друг друга!

Отображение элемента над остальными!

Свойство position имеет 4 значения: static , fixed , relative и absolute . Каждое из этих значений будет продемонстрировано ниже с примером использования.

Перед тем как подробно разобрать все виды позиционирования элементов на странице, нам придется рассмотреть, что такое поток документа.

Поток документа

По умолчанию элементы на веб-странице отображаются в том порядке, в котором они представлены в HTML-документе, т. е. блочные элементы занимают всю доступную для них ширину и укладываются вертикально один под другим. Строчные элементы выстраиваются по горизонтали до тех пор, пока не будет занята вся доступная ширина, после того как вся ширина будет занята, будет сделан перенос строки и всё пойдет по новой. Такой порядок расположения элементов называется нормальным потоком (его также называют потоком документа или общим потоком ).

С помощью свойства float или position можно убрать элемент из нормального потока. Если элемент "выпадает" из нормального потока, то элементы, которые расположены в коде ниже этого элемента будут смещены на его место на веб-странице.

Статическое позиционирование

Статическим называют позиционирование, заданное по умолчанию для всех элементов на веб-странице. Если к элементу не применять свойство position , то он будет статическим и будет отображаться на веб-странице согласно общему потоку элементов.

При применении CSS свойств top , left , right или bottom к статически позиционированному элементу, они будут игнорироваться.

Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static:

Первый абзац.

Второй абзац.

Попробовать »

Фиксированное позиционирование

Элементы с фиксированным позиционированием располагаются на странице относительно окна браузера. Такие элементы удаляются из общего потока, элементы, следующие в потоке за фиксированным элементом, будут игнорировать его, смещаясь и занимая его место на веб-странице.

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

Текст
 Текст
 Текст
 Текст
 Текст
 Текст
 Текст
 Какой-то текст
 Текст
 Текст
 Текст
 Текст
 Текст

Попробовать »

Относительное позиционирование

Элементы с относительным позиционированием, как и статические элементы, остаются в общем потоке. При применении свойств top , left , right или bottom к относительно позиционированным элементам, они будут смещаться относительно своего местоположения, оставляя пустое пространство там, где элемент располагался изначально.

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

Заголовок первого уровня.

Относительно позиционированный заголовок.

Заголовок третьего уровня.

Попробовать »

Примечание: элементы с относительным позиционированием (relative) обычно используют в качестве родителя для элементов с абсолютным позиционированием (absolute).

Абсолютное позиционирование

Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top , left , right или bottom .

Все абсолютно позиционированные элементы размещаются относительно окна браузера или относительно ближайшего позиционированного предка (если он есть), у которого свойство position имеет значение absolute , fixed или relative .

Изменим расположение логотипа с помощью абсолютного позиционирования.
Теперь логотип будет располагаться в правом верхнем углу страницы.

Попробовать »

Перекрывающие элементы

Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index , чем больше его значение, тем выше будет элемент.

Свойство CSS position отвечает за месторасположения элемента относительно других элементов. Используется в стилях довольно часто и поддерживается всеми браузерами (Internet Explorer, Netscape, Opera, Safari, Mozilla, Firefox, Chrome, Яндекс Браузер). Приведем простенький пример для понимания.

Примера 1 . HTML-код:

Обычный текст Этот текст ниже на 10 пикселей А этот наоборот выше

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

Это самый простой пример использования свойства CSS position . Теперь давайте рассмотрим все возможные атрибуты, которые может принимать этот параметр.

Синтаксис CSS position

position : absolute | fixed | relative | static | inherit ;

Примечание: через | перечислены все его возможные значения. Рассмотри каждый параметр в отдельности

1. CSS position: relative

Свойство position: relative - относительное позиционирование. Мы видели пример использования этого элемента чуть выше.

При задании этого параметра, активизируются следующие параметры:

• bottom
• left
• right

Если не указано никаких смещений, т.е.

top : 0px ; bottom : 0px ; left : 0px ; right : 0px ;

то отображение html-элемента происходит на том же месте как и по умолчанию (т.е. без задания relative). Если же указаны смещения, то элемент будет смещен относительно своего расположения либо ниже, выше, левее или правее. При этом другие окружающие элементы считают, что никакого смещения нету. Короче говоря, использовать relative имеет смысл только если мы задали смещения.

Для пояснения этой особенности приведем пример.

Примера 2 . HTML-код:

В чем же тогда разница?...

Примера 2* . Добавим к первому диву: position: relative; . HTML-код:

В чем же тогда разница? ...

Код преобразуется в следующее:

Наш красный квадрат переместился на 200 пикселей влево и на 100 пикселей вниз и частично своей площадью закрыл текст. При этом то место, где должен был наш квадрат текст по-прежнему его огибает как будто он там есть.

2. CSS position: absolute

Свойство CSS position: absolute - в данном случае считается, что начало отсчета - левый верхний угол. Здесь также действуют свойства top , bottom , left , right . При этом элемент который обладает атрибутом absolute становится как бы блочным элементом. Приведем пример.

Примера 3 . HTML-код:

Текст один Текст два Текст три

Код преобразуется в следующее:

В данном случае все три текста написаны друг за другом. Заметим, что мы специально сделали отступ слева padding-left:100px; в 100 пикселей. Теперь рассмотрим, что будет если мы во второй font добавим атрибут position: absolute .

Примера 3* . HTML-код:

Текст один Текст два Текст три

Код преобразуется в следующее:

Заметим, что текст два уехал влево и теперь стоит на первой позиции. При этом текст три занял место второго. Почему так произошло? Потому что мы добавили position:absolute и отступ слева: left:0px . Как я писал выше, при атрибуте absolute начало отсчета для элемента становится - левый верхний угол.

3. CSS position: fixed

Свойство CSS position: fixed - фиксированное расположение элемента, даже при прокрутке скролла. Пожалуй, это один из самых распространенных вариантов использования position. Если при этом заданы параметры top и left, то элемент будет размещен относительно левого верхнего угла. Если же параметры не указаны, то он будет фиксироваться в таком положении, как он встретиться на странице. Приведем пример.

Примера 4. HTML-код:

Фиксированный текст

Тут идет текст текст текст
Тут идет текст текст текст ...

Код преобразуется в следующее:

В данном примере верхняя строчка с текстом "фиксированный текст" всегда видна на странице браузера в любом положении скролла. Это свойство часто используют сайты, которые размещают рекламные строчки типо NOLIX, DAOS и т.п. См. как сделать строку как NOLIX и DAOS .

4. Остальные значения CSS position

4.1. Свойство position: static - этот параметр стоит по умолчанию. Параметры left, top, right и bottom не работают при этом значении.

4.2. Свойство position: inherit - наследование значение родителя. Т.е. смотрится ближайший элемент, в который заключен этот html-элемент и наследуется его значение.

Для обращения к position из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.position ="VALUE "

a! Разбивка контента на страницы с номерами является классической схемой пагинации, интуитивно понятной и привычной для пользователей. Однако, в последнее время все больше сайтов начинают «применять на практике» такой вид навигации по страницам как, Infinite Scroll (бесконечная прокрутка). Исключением не стали даже такие гиганты как Google, Facebook и ВКонтакте. Естественно у данного вида пагинации есть свои плюсы и минусы, но это уже другой разговор. В этом уроке мы рассмотрим, как можно реализовать подобную навигацию.

Как это работает?!

Да все очень просто, если пользователь уже прокрутил определенное количество записей и находится в нижней части страницы, то с небольшой задержкой подгружаются еще сообщения. Для этого с помощью $.post формируем POST запрос к странице загрузки данных из БД (.php файл), HTML структура записей формируется этом же файле. После чего, структурирование HTML разметкой данные возвращаются в скрипт и размещаются на странице.

Процесс определения положения пользователя на странице:

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

// Если прокрутка включена if ($settings.scroll == true ) { // .. и пользователь прокручивает страницу $(window) .scroll (function () { // Проверяем пользователя, находится ли он в нижней части страницы if ($(window) .scrollTop () + $(window) .height () > $this.height () && ! busy) { // Идет процесс busy $this.) .html ) ; // Запустить функцию для выборки данных с установленной задержкой // Это полезно, если у вас есть контент в футере setTimeout(function () { GetData() ; } , $settings.delay ) ; } } ) ; }

Вы наверняка заметили использование переменных, так сказать параметры плагина, о них немного позже. Функция AJAX запроса к PHP файлу getData() , выглядит следующим образом:

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 27 28 29 30 31 32 33

// Функция AJAX запроса function getData() { // Формируется POST запрос к ajax.php $.post ("ajax.php" , { Action : "scrollpagination" , number : $settings.nop , offset : offset, } , function (data) ) .html ($initmessage) ; // Если возвращенные данные пусты то сообщаем об этом if (data ) .html ($settings.error ) ; } else { // Смещение увеличивается offset = offset+ $settings.nop ; // Добавление полученных данных в DIV content $this.find (".content" ) .append (data) ; // Процесс завершен busy = false ; } } ) ;

Файл AJAX.php

PHP сценарий запроса к БД и формирования структуры выходных сообщений может выглядеть любым приемлемым для Вас образом. Все что Вам нужно сделать, это взять некоторую информацию из базы данных MySQL на ваш выбор. Далее приведен очень простой ajax.php файл, который берет информацию из базы данных MySQL и отображает содержимое с названием и ссылкой.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

mysql_connect ("localhost" , "username" , "password" ) or die () ; mysql_select_db ("database" ) ; $offset = is_numeric ($_POST [ "offset" ] ) ? $_POST [ "offset" ] : die () ; $postnumbers = is_numeric ($_POST [ "number" ] ) ? $_POST [ "number" ] : die () ; $run = mysql_query ("SELECT * FROM ex_posts ORDER BY id DESC LIMIT " . $postnumbers . " OFFSET " . $offset ) ; while ($row = mysql_fetch_array ($run ) ) { $content = substr (strip_tags ($row [ "text" ] ) , 0 , 500 ) ; echo " " . $row [ "title" ] . " " ; echo " " . $content . "... " ;

Использование в качестве плагина

Для этого нужно найти в ИСХОДНИКАХ (ссылка в начале статьи), файлы javascript.js и если желаете стили style.css + должна быть подключена библиотека jQuery. Остается только определиться в какой DIV будут подгружаться данные и вызвать метод scrollPagination с указанием параметров.

Сайты с бесконечной прокруткой или очень долгой на сегодняшний день становятся одними из популярных. Да, тенденция появилась еще пару лет назад, но постепенно становится все известнее. И называть такую прокрутку модой, стилем, «фишкой» не является правильным. Скорее, это необходимость. Необходимость предоставлять взору посетителей большие части контента. Буквально открывать перед ними всё, что есть на сайте.

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

И что самое занятное, у такого скроллинга существуют преимущества. С одной стороны, происходит практически 100% вовлеченность пользователя в изучение контента. Ему не приходится отвлекаться, изучать меню, разделы, ожидать загрузки очередных страниц, даже о навигации ему не приходится задумываться.

С другой стороны, же, бесконечная прокрутка востребована на мобильных устройствах. Чем меньше размер экрана, тем прокрутка нужнее. На таком экране мало что можно расположить, поэтому заголовки, короткое описание, небольшая картинка, и этого вполне достаточно. Уже на больших экранах можно и навигацию отобразить и кнопочки, и рамочки, блоки разные и прочее. Более того, управляя пространством на мобильном экране, прокрутка становится доступнее для использования.

Но это одна сторона медали. Что же дизайнеры? Что находят они в бесконечной прокрутке? Зачем стараются применить её к разным по тематике и стилям проектам, даже если у них нет мобильного варианта? Все просто: бесконечность удобна для конверсии, для внимания, для художественных идей, например Apple Mac Pro , Boat , firewatch .

И даже несмотря на то, что не на каждом сайте можно использовать бесконечную прокрутку, есть идеи и решения мастеров, как достичь успеха.

Поощрение

Прокручивать страницу дальше и дальше пользователи будут только тогда, когда им это интересно. Особенно в момент завершения загрузки начальной страницы. Поэтому, если они видят нужные им фотографии, заголовки, текст, то можно уже не сомневаться в их действиях. Дизайнеры как раз и воплотили это в, например, Cheetos , Photobazaar , Komarnicki подборки на Pinterest, Deviantart стараются сначала заинтересовать контентом, а затем позволяют посетителям искать и изучать имеющееся.

Ненавязчивость

Многие веб-дизайнеры стремятся не навязывать длинную прокрутку зрителям. И это верно, ибо не всегда и не всем пользователям хочется бесконечно прокручивать и прокручивать контент в поисках интересного или нужного. Более того, всегда хочется иметь перед глазами какие-то ориентиры: где находимся, в каком разделе, что еще есть на сайте. Именно поэтому частенько мы видим в верхней части страницы плавающую панель навигации. И это удобно, поскольку бесконечная прокрутка попросту скрывает строчку меню с глаз, и совершить переход в иной раздел не всегда удобно. Это Uplug , Voux , Geranandpartners , Company.airbus (навигация бела перемещена вправо).

Все имеет начало

Бесконечный или даже длинный скроллинг способствует тому, что пользователи теряются на странице. Им сложнее сориентироваться: вначале они еще или уже в середине. Более того, даже при наличии кнопки «вверх» или «назад» (обычно она в виде стрелочки) посетители возвращаются в начало станицы, а не туда, где остановились. В ленте новостей ВКонтакте «Назад» реализована именно для удобства. То есть, она возвращает наш взор туда, где мы били ранее. Аналогично реализована работа и на flickr . Если выбрать изображение, открыть его в этом же окне, а затем нажать кнопку «назад», то вернёмся мы именно к моменту, где были раньше, а не в началао страницы. Аналогично работает и интернет-магазины etsy , amazon .

Но, наоборот, проект Fomo не позволяет такого. Всегда будет загружаться начало страницы с плитками и материалами. И даже Boomandthearty тоже нет, несмотря на, казалось бы, не такую уж и простую навигацию при большом объеме контента.

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

Активность перед глазами

Согласитесь, но весьма удобно бывает, если не просто знаешь, что информация на странице обновляется с некоторой периодичностью, но еще и видишь это обновление. И это дизайнеры используют часто, добавляя самые разные индикаторы прогресса загрузки. Используют индикатор и для подзагрузки контента. При этом анимация загрузки настолько быстра, почти мгновенная, что зачастую глаза не улавливают её даже.

Например, это использование кнопок «загрузить больше» или почти мгновенная анимация подзагрузки Time , Vogue , Яндекс Дзен , Voux , Ria .

Влияние на бесконечность

Даже если страница имеет бесконечную прокрутку, пользователям хочется пролистать её быстрее. Подсознательно. Особенно это заметно, если прокрутка не бесконечная, а просто длинная и рано или поздно, но кончается. Желание веб-дизайнеров иное - задержать посетителей на сайте, поэтому чаще всего прокрутка странниц всегда имеет одну и ту же скорость. Иными словами, как бы быстро мы не крутили колёсико мышки, скорость появления нового материала не увеличится и появится контент только тогда, когда задумали разработчики. Это отлично реализовано на Apple Mac Pro . Можно даже в настройках мышки задать скорость прокрутки в количестве строк, но контент на сайте будет меняться со своей заданной скоростью. Аналогично работает и Амурский тигр , company.airbus .

Сложно говорить, хорошо это или плохо. Зависит, разумеется, от контента, от его особенностей, требований на усвоение.

Удобство просмотра

В первую очередь, касается это интернет-магазинов и карточек товаров. Например, веб-мастера добавляют иконки «Нравится» к каждому товару или «Добавить в закладки». Это упрощает изучение контента, если его много. Более того, во время поиска отображается и количество найденного. То есть, даже если станица с выбранными товарами бывает неимоверно длинной, пользователь ориентировочно знает уже, сколько он просмотрел и сколько ему еще впереди осталось. Это удобно, хотя дизайнеры частенько и игнорируют такой подход. Куда проще создать карточки с товарами и загрузить их на единый холст. Так и сделали на Ericbeauduin , Vagabond , Skechers даже фотобанк Photobazaar не предлагает отбирать на будущее фотографии.

Но иные проекты, наоборот, позволяют сортировать информацию. Это и Wildberries , Ozon , Lamoda .

Эффекты, больше эффектов

Без эффектов сложно представить современных сайт. Без них он был бы скучным. Некоторые назовут его даже простеньким и унылым. И самый простой способ оживить длинные и бесконечные страницы с контентом - это добавление анимации загрузки, плавного появления плиток контента. И разумеется, параллакс в различном своем проявлении.

Как известно, в среднем пользователь пребывает на станице сайта 8 секунд . Если он заинтересован, то останется надольше и будет возвращаться в будущем. И как раз таки параллакс способен добавить интереса, привлечь внимание посетителей. Мы рассказывали ранее о сути данного эффекта, и как он влияет на конверсию.

Но иногда дизайнеры, используя его при бесконечной загрузке станицы, наоборот, только вредят. Например, вы хотите что-то купить, и каждый раз вам приходится просматривать эффект параллакса в ожидании загрузки информации о товаре или наблюдать эффект анимации. Приятно? Не очень. Магазин Ericbeauduin использовал эффект псевдо-параллакса, но очень мало. Он не нарушает привычного нам хода изучения контента, но добавляет небольшой изюминки.

Новаторство

Бесконечная прокрутка станиц интересна, она дает простор воображению и творчеству. Но одно дело просто рассмотреть пути реализации и некоторые моменты такого явления, как бесконечная прокрутка страницы. Другое дело разыскать . Реально красивые.

Lexus предлагает изучение технологий, разработки и прочего в весьма необычной форме. Тематика контента выбирается с помощью движения мышки, а после выбора перенаправляет на соответствующую станицу. Здесь же все изображения искажены в перспективе, предлагается и подзагрузка материала. Анимация переходов и появлений есть, но легкая и почти незаметная. А параллакс использован на главной станице выбора тематик.

Claridgeicon обладает долгой прокруткой, но интересной. Даже если сами мы не имеет отношения к строительству, проектированию зданий, этот сайт увлечет. Контента так много, и такого разного, что невольно прокручиваешь страницу и смотришь на него. То видео, то чертежи, то инфографика, то фотографии. И, да, верхнее «липкое» меню всегда есть на глазах, и каждый пункт его прикреплен к секции странницы. Что уж говорить о панорамном видео в 360 градусов.

Foodisforeating с секретом. Навигация настолько миниатюрна, что её легко пропустить и не заметить, но обладает одной большой страницей с прокруткой, которая влияет на… отображение контента и инфографику. Да, и такое бывает. Иными словами, вы не просто листаете её вниз. С помощью колесика мышки можно увидеть загрузку изображений, постепенное появление текста, графиков и прочее. Трудно описать, и лучше посмотрите своими глазами. Эффектов много, но в целом все выглядит просто и функционально.

Сhannel Nationalgeographic тоже способен поразить. Станица может и не выглядит большой и длинной, но зато контент можно прокручивать в разные стороны. Много разделов и секций, и прокрутка в каждой есть влево-вправо и верх-вниз. При этом не просто загружается подборка записей, а все окружение (фотографии, видео, новости, статьи) на какую-то тему. Оригинально и наглядно. Действительно смотришь, ищешь, разглядываешь даже. И на конверсию влияет положительно такая вовлеченность.

Powerofpossible рассказывает о человеческой энергии, о технологиях, о возможностях человека, о нефти и энергии солнца и о многом ином. Но рассказывает в анимационной форме, где каждая часть контента появляется при прокрутке колесика мышки. При этом все создано на красивых фонах, с загадочной идеей появления людей и мыслей в облаках, а затем они спускаются на землю и под воду (подводный мир). Длинная страница, долгая прокрутка, но интересный контент.

Twinpinejourney также предлагает пройти историю и узнать подробности казино и отелей Twin Pine в Калифорнии. С одной стороны, предлагается просто просмотреть станицу сверху вниз, с другой, пролистать отдельные секции слева-направо с тем, чтобы узнать некоторые подробности. Даже дорожная карта и то обладает анимацией, что зависит от прокрутки колесика мышки. И даже от вашей скорости прокрутки зависит. Интересно и красиво все в целом.

Завершение

Новаторских идей еще много и бесконечная прокрутка страницы или долгая на таких сайтах не вызывает ни раздражения, ни неудобства. Так или иначе, такое, если не тренд, но явление способно создать совершенно невообразимый захватывающий опыт при просмотре сайта. Если прокрутка интуитивно понятна, аналогично пользовательскому интерфейсу, то её только приветствуют.

В любом случае, нужно четко решить для себя, нужна ли бесконечная прокрутка данному проекту или нет. Недостаточно просто подобрать контент и прописать код, чтобы он весь загружался сразу на главную страницу.

А это значит, что простора для идей очень много и реализовывать их можно много раз и всегда по-разному. Что еще раз подтверждает, веб-дизайн - сфера деятельности очень творческая, новаторская, технологичная.