Array
(
    [0] => Array
        (
            [TEXT] => Услуги
            [LINK] => /development/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 0
            [PARAMS] => Array
                (
                    [FROM_IBLOCK] => 
                    [IS_PARENT] => 1
                    [DEPTH_LEVEL] => 1
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 1
        )

    [1] => Array
        (
            [TEXT] => Разработка сайтов
            [LINK] => /development/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 1
            [PARAMS] => Array
                (
                    [DEPTH_LEVEL] => 2
                    [FROM_IBLOCK] => 
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [2] => Array
        (
            [TEXT] => Интернет-маркетинг
            [LINK] => /internet-marketing/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 2
            [PARAMS] => Array
                (
                    [DEPTH_LEVEL] => 2
                    [FROM_IBLOCK] => 
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [3] => Array
        (
            [TEXT] => Бизнес-интеграция
            [LINK] => /business-integration/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 3
            [PARAMS] => Array
                (
                    [DEPTH_LEVEL] => 2
                    [FROM_IBLOCK] => 
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [4] => Array
        (
            [TEXT] => Брендинг и дизайн
            [LINK] => /branding/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 4
            [PARAMS] => Array
                (
                    [DEPTH_LEVEL] => 2
                    [FROM_IBLOCK] => 
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [5] => Array
        (
            [TEXT] => Работы
            [LINK] => /works/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 5
            [PARAMS] => Array
                (
                    [HIDE_LINK] => Y
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 1
        )

    [6] => Array
        (
            [TEXT] => Web-разработка
            [LINK] => /works/?s=web-razrabotka
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => U
            [ITEM_INDEX] => 0
            [PARAMS] => Array
                (
                    [FROM_IBLOCK] => 1
                    [IS_PARENT] => 0
                    [DEPTH_LEVEL] => 1
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 0
        )

    [7] => Array
        (
            [TEXT] => Продвижение и реклама
            [LINK] => /works/?s=prodvizhenie-i-reklama
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => U
            [ITEM_INDEX] => 1
            [PARAMS] => Array
                (
                    [FROM_IBLOCK] => 1
                    [IS_PARENT] => 0
                    [DEPTH_LEVEL] => 1
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 0
        )

    [8] => Array
        (
            [TEXT] => Автоматизация бизнеса
            [LINK] => /works/?s=avtomatizatsiya-biznesa
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => U
            [ITEM_INDEX] => 2
            [PARAMS] => Array
                (
                    [FROM_IBLOCK] => 1
                    [IS_PARENT] => 0
                    [DEPTH_LEVEL] => 1
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 0
        )

    [9] => Array
        (
            [TEXT] => Компания
            [LINK] => /about/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 6
            [PARAMS] => Array
                (
                    [HIDE_LINK] => Y
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 1
        )

    [10] => Array
        (
            [TEXT] => О компании
            [LINK] => /about/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 0
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [11] => Array
        (
            [TEXT] => Отзывы
            [LINK] => /about/reviews/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 1
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [12] => Array
        (
            [TEXT] => Достижения
            [LINK] => /about/progress/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 2
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [13] => Array
        (
            [TEXT] => Команда
            [LINK] => /about/team/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 3
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [14] => Array
        (
            [TEXT] => Вакансии
            [LINK] => /about/job/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 4
            [PARAMS] => Array
                (
                    [HIDE_IN_TOP] => Y
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [15] => Array
        (
            [TEXT] => Блог
            [LINK] => /blog/
            [SELECTED] => 1
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 7
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 
        )

    [16] => Array
        (
            [TEXT] => Вакансии
            [LINK] => /about/job/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 8
            [PARAMS] => Array
                (
                    [HIDE_LINK] => Y
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 
        )

    [17] => Array
        (
            [TEXT] => Контакты
            [LINK] => /contacts/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 9
            [PARAMS] => Array
                (
                    [HIDE_LINK] => Y
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 
        )

)

HTML-ликбез: введение в визуальные эффекты

Андрей Щетина 6 августа 2014

Ежедневно крутясь в среде разработчиков, digital-менеджеры впитывают всю тяжесть цифровой лексики, после чего обычные люди с ними общаться не могут, либо испытывают серьёзные затруднения. Попробуй пойми человека, у которого две трети слов в предложении не то что в словаре Даля отсутствуют – они в русском языке не числятся.

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

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

HTML-эффекты можно условно разделить на группы:

  • Hover
  • Motion
  • Interactive (on click, on move)

Hover-эффекты

Это всеми любимые эффекты наведения. Они срабатывают в момент, когда над объектом оказывается курсор мыши. Используются, чтобы подчеркнуть активность того или иного элемента: подсветить ссылку, обозначить кликабельность картинки, заставив увеличиться / повернуться / покрутиться / попрыгать. Всё это стихия ховеров. Существует их великое множество.

Motion-эффекты

Эффекты, создающие динамичное предоставление информации пользователям. Проще говоря, обычные слайдеры во всех доступных вариациях. Digital-сообщество не скупилось на «народные» названия для разновидностей этого незаменимого в современном вебе элемента, что положительно сказалось на интуитивной понятности оных:

  • Слайдер – Просто картинки или картинки с текстом, сменяющие друг друга с применением тех или иных визуализаций, знакомых многим по MS PowerPoint.
    • Slide 1

    • Slide 2

    • Slide 3

    Prev Next
  • Карусель – слайдер, базовый вид которого действительно похож на детский аттракцион: несколько расположенных подряд изображений прокручиваются вокруг невидимой оси.
  • Аккордеон – эта html-гармошка представляет из себя перечень блоков, чаще прямоугольных, которые скрывают за собой текстовую информацию. При клике один из блоков разворачивается по аналогии со спойлером, предоставляя возможность ознакомиться со спрятанной под ним информацией.

    Phasellus sed libero urna. Curabitur dui nisi, porta ut tincidunt feugiat, interdum quis sapien. In feugiat egestas elit, eu adipiscing lectus fringilla non. Nulla nunc mi, aliquet non euismod a, varius varius magna. Proin nec lorem turpis. Cras sapien arcu, aliquet ut malesuada id, viverra quis ligula. Praesent vitae dolor id magna bibendum molestie. Aliquam sapien odio, rhoncus ullamcorper egestas a, suscipit at dolor. Cras viverra pulvinar quam, non tempor ipsum varius a. Aenean condimentum scelerisque justo vel congue. Etiam augue ante, vestibulum in condimentum sit amet, volutpat vel ligula. Suspendisse potenti. Cras condimentum ultrices congue.

    Phasellus sed libero urna. Curabitur dui nisi, porta ut tincidunt feugiat, interdum quis sapien. In feugiat egestas elit, eu adipiscing lectus fringilla non. Nulla nunc mi, aliquet non euismod a, varius varius magna. Proin nec lorem turpis. Cras sapien arcu, aliquet ut malesuada id, viverra quis ligula. Praesent vitae dolor id magna bibendum molestie. Aliquam sapien odio, rhoncus ullamcorper egestas a, suscipit at dolor. Cras viverra pulvinar quam, non tempor ipsum varius a. Aenean condimentum scelerisque justo vel congue. Etiam augue ante, vestibulum in condimentum sit amet, volutpat vel ligula. Suspendisse potenti. Cras condimentum ultrices congue.

    Phasellus sed libero urna. Curabitur dui nisi, porta ut tincidunt feugiat, interdum quis sapien. In feugiat egestas elit, eu adipiscing lectus fringilla non. Nulla nunc mi, aliquet non euismod a, varius varius magna. Proin nec lorem turpis. Cras sapien arcu, aliquet ut malesuada id, viverra quis ligula. Praesent vitae dolor id magna bibendum molestie. Aliquam sapien odio, rhoncus ullamcorper egestas a, suscipit at dolor. Cras viverra pulvinar quam, non tempor ipsum varius a. Aenean condimentum scelerisque justo vel congue. Etiam augue ante, vestibulum in condimentum sit amet, volutpat vel ligula. Suspendisse potenti. Cras condimentum ultrices congue.

    Read more ...
    • Lorem ipsum dolor sit amet

      Phasellus sed libero urna. Curabitur dui nisi, porta ut tincidunt feugiat, interdum quis sapien. In feugiat egestas elit, eu adipiscing lectus fringilla non. Nulla nunc mi, aliquet non euismod a, varius varius magna. Proin nec lorem turpis. Cras sapien arcu, aliquet ut malesuada id, viverra quis ligula. Praesent vitae dolor id magna bibendum molestie. Aliquam sapien odio, rhoncus ullamcorper egestas a, suscipit at dolor. Cras viverra pulvinar quam, non tempor ipsum varius a. Aenean condimentum scelerisque justo vel congue. Etiam augue ante, vestibulum in condimentum sit amet, volutpat vel ligula. Suspendisse potenti. Cras condimentum ultrices congue.

    • Lorem ipsum dolor sit amet

      Donec scelerisque dictum dolor, eget pellentesque felis venenatis nec. Vestibulum convallis, est non porttitor eleifend, mauris justo iaculis turpis, sit amet euismod arcu mi nec odio. Donec mattis, sem nec porta blandit, nisi nulla varius leo, eget porttitor nisl dolor at turpis. Cras ut magna massa. Vivamus ipsum ipsum, rutrum nec adipiscing at, sodales vel odio. Integer eget ligula est, quis lobortis enim. Ut convallis, neque in pulvinar tristique, tellus metus pretium nulla, non ultricies orci quam sit amet nisi. Praesent in nisi dolor. Sed viverra pellentesque metus, vel varius augue vehicula non. Fusce placerat commodo nibh id ultrices. Vivamus tincidunt diam id est vehicula at rhoncus metus suscipit.

    • Lorem ipsum dolor sit amet

      Sed elementum tincidunt turpis, a auctor orci sagittis quis. Integer placerat auctor felis eget pretium. Sed eget aliquam ligula. Sed dictum iaculis ligula, eu congue lorem suscipit et. Curabitur dignissim, nibh quis fringilla elementum, ligula arcu iaculis velit, sit amet mattis augue arcu eget mauris. Sed mollis vehicula velit non pulvinar. Nunc viverra, leo sit amet laoreet sodales, tellus elit lobortis purus, vel vulputate tortor lorem quis felis. Praesent condimentum tempus metus, vel pretium nulla euismod sit amet. Nam a adipiscing mauris. Integer id libero mauris, a tempor eros. Suspendisse accumsan urna non elit mattis mattis. In scelerisque, est faucibus rutrum mollis, felis risus euismod massa, nec faucibus ligula lectus eu sapien.

  • Таб – хороший способ уместить большой объём информации в ограниченном пространстве.

    Tab 1 Quisque vitae erat libero. Etiam vestibulum metus eu nulla placerat dictum

    Tab 2 Quisque vitae erat libero. Etiam vestibulum metus eu nulla placerat dictum nulla placerat dictum

    Tab 3 Quisque vitae erat libero. Etiam vestibulum

Interactive-эффекты

Активно взаимодействуют с пользователем сайта, реагируя на движения мыши, скроллинг и прочее. Ярчайшим представителем данной группы эффектов является параллакс.

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

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

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

Section1

Section2

Section3

параллакс
параллакс
параллакс

Безусловно, многие эффекты остались без внимания, но все они так или иначе берут свои корни из рассмотренных примеров.

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



Поделитесь материалом с друзьями и коллегами

Подпишитесь на блог Uplab.
Мы будем делиться с вами всем лучшим, что у нас есть!

Комментарии к статье
Обратная связь
ПРЕЗЕНТАЦИЯ (.PDF)
ул. Новослободская д. 61, стр. 2
+7 (495) 241 - 59 - 48
ул. Ярморочная 7
+7 (495) 241 - 59 - 48
© 2006–2016
digital-агентство Uplab
Пользовательское
соглашение
Обратная связь
ул. Новослободская д. 61, стр. 2
+7 (495) 241 - 59 - 48
ул. Ярморочная 7
+7 (495) 241 - 59 - 48
ПРЕЗЕНТАЦИЯ (.PDF)
© 2006–2016 digital-агентство Uplab
Пользовательское соглашение