Loputon vieritys. Viestejä sisältävän sivun loputon vieritys jQueryn avulla. Haittapuoli: Lisävaiheet

HTML:n lohkoelementti on elementti, joka vie oletuksena koko leveyden. pääelementti. Pääelementti voi olla toinen lohkoelementti tai selainikkuna. Voit asettaa lohkoelementin leveyden ja korkeuden CSS-ominaisuuksien avulla. Lohkoelementtien sijoittaminen on prosessi, jossa ne sijoitetaan selainikkunan sisään ja suhteessa niihin. CSS:n avulla ominaisuuksien sijainti, vasen, ylä, oikea ja alaosa. CSS-sijaintiominaisuus on suunniteltu asettamaan yksi seuraavista neljä saatavilla paikannustyypit: staattinen (oletus), absoluuttinen, kiinteä ja suhteellinen. Muita CSS-ominaisuuksia, nimittäin vasen , ylä , oikea ja alaosa , käytetään etäisyyksien asettamiseen yläelementin vasempaan, ylä-, oikeaan ja alareunaan nähden. Myös lohkoelementit voivat mennä päällekkäin tiettyjä ominaisuuksia määritettäessä, ja Tämä mahdollisuus samaa voidaan käyttää verkkosivuilla.

Oletussijainti (staattinen)

Jos et määrittänyt lohkoelementille sijaintia tai määrittänyt staattista , joka on sama asia, lohkoelementit järjestetään järjestykseen. Lisäksi seuraava lohko(esimerkiksi: punainen) sijaitsee kanssa uusi rivi. Myöskään etäisyyksien asettaminen vasemmalle, ylhäältä, oikealle ja alas ei vaikuta tähän sijoitukseen.

Absoluuttinen sijainti (absoluuttinen)

Absoluuttisessa sijoittelussa elementin sijainti määritetään suhteessa selainikkunan reunoihin käyttämällä etäisyyksiä, jotka määritetään vasen , ylä , oikea ja alhainen ominaisuuksilla. Jos määrität etäisyydet vasemmalle ja oikealle samanaikaisesti ja ne ovat ristiriidassa keskenään, etusija annetaan vasemmalle , sama pätee ylhäältä ja alhaalta , joissa etäisyys ylhäältä on etusijalla. Absoluuttista paikannusta käytetään hyvin usein suunnittelutarkoituksiin yhdessä suhteellisen paikantamisen kanssa, kun on tarpeen sijoittaa erilaisia ​​​​elementtejä toisiinsa nähden, sitä voidaan käyttää myös pudotusvalikoiden, sivuston asettelun jne.

Kiinteä asento

Kiinteä sijoittelu eroaa muista sijoittelutyypeistä, eikä se liiku sisällön mukana vierittäessäsi sivua. Estä elementit kiinteä sijainti m on liitetty selainikkunan reunoihin käyttämällä vasenta , ylä-, oikeaa ja alaosaa. Kiinteää sijoittelua käytetään kehysrajapintojen luomiseen (selainikkuna on jaettu useisiin alueisiin), kiinteä valikko, kiinteä kellari sivusto ja "pysyvät" lohkot (linkkiluettelo, sosiaaliset painikkeet jne.).

Suhteellinen sijoittelu

Suhteellinen sijainti määritetään määrittämällä etäisyydet vasemmalle , ylhäältä , oikealle ja alapuolelle suhteessa sen nykyiseen sijaintiin.

Tämä lohkopaikka voidaan kuitenkin luoda myös käyttämällä marginaalin ominaisuudet(sisennykset).

Suhteellinen paikannus ei ole hauska käyttää sellaisenaan, sitä käytetään enimmäkseen yhdessä absoluuttinen paikannus.

Harkitsemme vaihtoehtoja:

Ne toimivat kaikkien sijoitettujen elementtien kanssa paitsi staattisten elementtien kanssa.

Sijoitusesimerkki.

Elementit voivat mennä päällekkäin!

Näytetään elementti muiden yläpuolella!

Sijaintiominaisuudella on 4 arvoa: staattinen, kiinteä, suhteellinen ja absoluuttinen. Kukin näistä merkityksistä esitetään alla esimerkin avulla.

Ennen kuin tarkastelemme yksityiskohtaisesti kaikentyyppisiä elementtien sijoittamista sivulle, meidän on pohdittava, mikä asiakirjavirta on.

Asiakirjan kulku

Oletusarvoisesti verkkosivun elementit näytetään siinä järjestyksessä, jossa ne näkyvät HTML-dokumentissa, eli lohkoelementit täyttävät niille käytettävissä olevan leveyden ja pinotaan pystysuunnassa päällekkäin. Sisäiset elementit rivissä vaakasuoraan, kunnes koko käytettävissä oleva leveys on varattu, kun koko leveys on varattu, tehdään rivinvaihto ja kaikki alkaa alusta. Tätä elementtien järjestelyä kutsutaan normaali virtaus(kutsutaan myös asiakirjavirta tai yleinen virtaus).

Voit käyttää float- tai position-ominaisuutta poistaaksesi elementin normaalista virtauksesta. Jos elementti "putoaa" normaalista virtauksesta, elementit, jotka sijaitsevat kyseisen elementin alla olevassa koodissa, siirtyvät paikoilleen verkkosivulla.

Staattinen paikannus

Staattinen on web-sivun kaikkien elementtien oletussijainti. Jos et käytä elementtiin sijaintiominaisuutta, se on staattinen ja näkyy verkkosivulla elementtien yleisen kulun mukaisesti.

klo CSS:n avulla ominaisuudet top , left , right tai bottom staattisesti sijoitettuun elementtiin, ne ohitetaan.

Tarvittaessa voit asettaa tyylisivun staattisen paikantamisen käyttämällä staattista arvoa:

Ensimmäinen kappale.

Toinen kappale.

Yrittää "

Kiinteä asento

Kiinteästi sijoitetut elementit sijaitsevat sivulla suhteessa selainikkunaan. Tällaiset elementit poistetaan kokonaisvirrasta. Vuon kiinteää elementtiä seuraavat elementit ohittavat sen siirtyen ja ottavat paikkansa verkkosivulla.

On syytä kiinnittää huomiota siihen, että kiinteästi sijoitetut elementit voivat olla päällekkäin muiden elementtien kanssa piilottaen ne kokonaan tai osittain. Rullattaessa pitkiä sivuja, ne luovat vaikutelman liikkumattomista kohteista, jotka pysyvät samassa paikassa:

Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti

Yrittää "

Suhteellinen sijoittelu

Elementit suhteellisella sijoittelulla, kuten staattisia elementtejä, pysyvät yleisessä virtauksessa. Kun käytät ylä-, vasen-, oikea- tai ala-ominaisuuksia suhteellisesti sijoitettuihin elementteihin, ne liikkuvat suhteessa sijaintiinsa jättäen tyhjää tilaa elementin alun perin sijainneille.

Tällaiset elementit eivät vaikuta niitä ympäröivien elementtien asentoon, muut elementit pysyvät paikoillaan ja ne voivat olla päällekkäin suhteellisen sijoitetulla elementillä:

Ensimmäisen tason otsikko.

Suhteellisen sijoitettu otsikko.

Kolmannen tason otsikko.

Yrittää "

Huomautus: Elementtejä, joilla on suhteellinen sijainti (suhteellinen), käytetään yleensä ylätason elementeille, joilla on absoluuttinen sijainti (absoluuttinen).

Absoluuttinen asemointi

Absoluuttisesti sijoitetut elementit poistetaan kokonaan kokonaisvirrasta, loput elementit vievät vapaan tilan jättäen täysin huomioimatta täysin sijoitetut elementit. Voit sitten sijoittaa elementin mihin tahansa Oikea paikka Web-sivuja käyttämällä ylä-, vasen-, oikea- tai alhaisia ​​ominaisuuksia.

Kaikki absoluuttisesti sijoitetut elementit sijoitetaan suhteessa selainikkunaan tai suhteessa lähimpään sijoitettuun esi-isään (jos sellainen on), jonka sijaintiominaisuus on absoluuttinen , kiinteä tai suhteellinen .

Muutetaan logon paikkaa käyttämällä absoluuttista sijoittelua.
Logo tulee nyt sivun oikeaan yläkulmaan.

Yrittää "

Päällekkäiset elementit

Kun elementit ovat sivun kokonaisvirran ulkopuolella, ne voivat mennä päällekkäin. Tyypillisesti elementtien järjestys vastaa niiden järjestystä sivun HTML-koodissa, mutta päällekkäisyyden järjestystä on mahdollista ohjata CSS-ominaisuuden z-index avulla, mitä suurempi sen arvo, sitä korkeampi elementti on.

CSS-sijaintiominaisuus vastaa elementin sijainnista suhteessa muihin elementteihin. Sitä käytetään melko usein tyyleissä ja sitä tukevat kaikki selaimet ( Internet Explorer, Netscape, Opera, Safari, Mozilla, Firefox, Chrome, Yandex-selain). Otetaan yksinkertainen esimerkki ymmärtämisen vuoksi.

Esimerkki 1. HTML-koodi:

Обычный текст Этот текст ниже на 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 в Калифорнии. С одной стороны, предлагается просто просмотреть станицу сверху вниз, с другой, пролистать отдельные секции слева-направо с тем, чтобы узнать некоторые подробности. Даже дорожная карта и то обладает анимацией, что зависит от прокрутки колесика мышки. И даже от вашей скорости прокрутки зависит. Интересно и красиво все в целом.

Завершение

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

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

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