Сайт

Прокрутка сайта – Плавная прокрутка сайта

13.11.2017

Содержание

Несколько неочевидных frontend-хитростей / Wargaming corporate blog / Habr

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



Оформление декоративной линии текста (text-decoration-style, text-decoration-color)

В Firefox и Safari уже довольно давно появились дополнительные возможности для оформления декоративной линии, которая добавляется к тексту с помощью свойства text-decoration.

К примеру, можно задавать свойству text-decoration сразу несколько значений (причем это работает уже очень давно):

.multiple {
  text-decoration: underline overline;
}

Можно задавать цвет для оформления текста:
.color {
  text-decoration-color: blue;
}

А также стиль линии:
.dashed {
  text-decoration-style: dashed;
}
.dotted {
  text-decoration-style: dotted;
}
.wavy {
  text-decoration-style: wavy;
}

Учтите, что в данный момент работают новые свойства только в Firefox и, частично, в Safari. Посмотреть рабочий пример можно здесь
Плавная прокрутка страницы на CSS (scroll-behaviour)

Малоподдерживаемое, но очень полезное свойство scroll-behaviour позволит нам одной строкой сделать скролл на странице плавным. Работает как при прокрутке в нужное место при переходе по якорям, так и при прокрутке страницы JS-ом.
 
body {
  scroll-behavior: smooth;
}

Свойство может принимать 3 основных значения:
  • smooth — плавная прокрутка;
  • instant — мгновенная прокрутка;
  • auto — на усмотрение браузера.

Когда нибудь (надеюсь, совсем скоро) нам не придется больше писать функции для плавной прокрутки на JS или подключать сторонние библиотеки.

Если плавная прокрутка страницы на вашем сайте не является чем-то критичным, смело используйте это свойство. Вы получите плавный скролл при переходе по якорям с помощью всего одного CSS-правила как минимум, в Firefox

.
Пример

Анимация появления элемента (быстро и легко)

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


Как это часто делали раньше:
1) на сервер посылаетcя запрос;
2) после загрузки ответа данные добавляются в скрытый на странице блок;
3) блоку присваивается класс, в котором прописана анимация его появление (либо (о, ужас!) блок анимируется JS-ом).

Так вот, последний пункт можно считать избыточным, ведь у нас есть старое доброе CSS-свойство

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

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.content {
  animation: fade-in .4s ease;
}

Вот и все, что нужно для создания простой анимации появления. Плюсы такого подхода очевидны:
  • Прописав @keyframes один раз, можно использовать их в любом месте CSS для добавления типовой анимации всем нужным элементам;
  • Обращения к DOM в JS будут сведены к минимуму, что при большом количестве элементов или итераций поможет снизить нагрузку на страницу.

Минус у данного подхода только один: новые элементы не могут храниться в DOM и ждать, пока мы наполним их контентом. Их разметку придется хранить на стороне JS…

Изучить рабочий пример можно здесь.

Разрыв строки на CSS

Если в определенном месте на странице вам нужно добавить перенос строки, а в HTML лезть не хочется (или невозможно), на помощь придет CSS. Первое, что приходит в голову — добавить псевдоэлемент с тегом внутри:
.break:after {
    content: '<br />';
}

К сожалению (а может, и к счастью), добавлять теги в псевдоэлементы, нельзя. Но выход есть!
.break:after {
    content: '\A'; //код переноса строки
    white-space: pre; //заставляет браузер отображать текст с учётом всех пробелов и переносов, добавленных в код
}

Маленький пример.
SVG с интерактивными элементами

Если вам когда-нибудь приходилось оформлять взаимодействие с SVG-элементами, вы знаете, что сделать это не так-то просто. Чтобы обращаться в CSS к отдельным SVG-элементам, приходится добавлять на страницу не тег <img/&gt, а код всего SVG-изображения целиком. Это делает HTML-код ужасно громоздким. В результате нам приходится жертвовать размером страницы и лаконичностью кода ради визуальных эффектов.

Но! У нас есть неплохая альтернатива — прописывать все стили взаимодействия прямо в SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            rect {
                fill: blue;
            }
            rect:hover {
                fill: orange;
            }
        </style>
    </defs>

    <rect />
    <rect />
    <rect />
    <rect />
</svg>

Казалось бы, если мы прописали стили в самом изображении, то они должны отрабатывать при добавлении SVG как обычного <img />! Однако, не все так просто. Добавленные таким образом стили все равно работать не будут. Но мы можем сделать ход конем и добавить SVG на страницу с помощью
<iframe> или <object>:
<iframe src="icon.svg"></iframe>
или
<object type="image/svg+xml" data="icon.svg"></object>

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

UPD. Пользователь Large поделился классным решением, которое подробно описано здесь.
Еше одно интересное решение от пользователя exeto.

Кстати, при желании в SVG-файл можно добавить и CSS анимацию:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            @keyframes fill-change {
                0% {
                    fill: blue;
                }
                50% {
                    fill: orange;
                }
                100% {
                    fill: blue;
                }
            }
        
            rect {
                animation: 2s ease fill-change infinite;
                fill: blue;
            }
        </style>
    </defs>
    
    <rect />
    <rect />
    <rect />
    <rect />
    <path />
</svg>

Надеюсь, описанные здесь вещи показались вам интересными, а кому-то даже пригодятся на практике. До новых встреч!

habr.com

8 сайтов с горизонтальной прокруткой, которыми нельзя не восхититься

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


Строгий и минималистичный сайт-портфолио дизайнера из Италии, область компетенций которого простирается от работы с jQuery и брендирования до проектирования взаимодействия и рекламы. В 2014 году площадка удостоилась звания «Сайта дня» по версии CSS Winner и Awwwards. Прокрутка возможна посредством управления с клавиатуры.


Самые популярные хэштеги 2014 года — от #ICantBreathe до #Sochi2014 — собраны здесь и иллюстрированы различными художниками. Сайт является производным Hshtags.com. Скроллинг осуществляется с помощью перетаскивания специального ползунка.


Московская консалтинговая компания, действующая на территории СНГ в области охраны здоровья и труда. Основное тело сайта выполнено в технике аккордеона: каждый раздел, соответствующий одной из четырёх основных услуг организации, реагирует на движение курсора.


Ресурс для интересующихся самостоятельными путешествиями по Австралии. Интерактивная карта, функционирующая здесь, позволяет наметить оптимальный маршрут движения, заблаговременно подыскать места для ночлега, питания и восхищения достопримечательностями континента. «Сайт дня» в сентябре прошлого года на Awwwards.ru.


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


Сайт-портфолио фотографа, режиссёра, сооснователя и креативного директора Studio White Сирила Массона. На площадке представлено множество прекрасных снимков знаменитостей, а также фотографий, сделанных для Nike, Perrier, ID Parfums и других именитых организаций.


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


Ещё один сайт-визитка — на этот раз от 21-летнего французского программиста Гийома Жевуне. Для навигации по площадке юноша предлагает пользователю взять под управление маленького робота, который, передвигаясь по горизонтальной плоскости, знакомит нас с личностью и деловыми качествами его создателя. Выглядит необычно, забавно и непринуждённо.

infogra.ru

Сайты с вертикальным скроллингом. Примеры

Если раньше многие старались «вписать» главную страницу сайта в размер «первого экрана», чтобы пользователь гарантировано увидел все, то теперь более распространенными становятся сайты с вертикальным (или горизонтальным) скроллингом. 

Эта тенденция наблюдается последние 1,5 – 2 года, и, даже несмотря на разные исследования, утверждающие, что пользователи редко прокручивают «резиновые» сайты до конца, она не теряет своей популярности. Трудно сказать, чем это обусловлено: то ли стремлением попробовать что-то новое, то ли нежеланием отставать от моды, но факт остается фактом – пользователям, равно как и веб-дизайнерам, такие сайты нравятся. И есть за что: возможность реализовать интересные дизайнерские задумки; отпадает надобность бродить по страницам второго, третьего уровня и т. д. К сожалению, увидеть дизайн сайтов с вертикальной прокруткой целиком практически невозможно, ведь мы ограничены размерами наших мониторов, а при прокрутке не получается увидеть общую картину. Но веб-дизайнеры с большим вниманием относятся к проработке дизайн-макетов и охотно делятся ими на профильных сайтах. В этом посте мы предлагаем посмотреть на 15 дизайн-макетов веб-сайтов с вертикальным скроллингом. Некоторые из них  уже реализованы, другие еще нет, но все они являются примерами крутого дизайна и источником вдохновения.

Frú Frú by Johanna Roussel

B Yoga Website by Agency Dominion

Daniel Simon Website by Lance Culbreth

Cutthroat & Cavalier Website by Brijan

Rosa Restaurant Website by George Olaru

Apidura by Owen Perry

Market Street Catch by Agency Dominion

Gauthier & Nolet Architects by Justin Bechard

This is Ground by Charles Riccardi

OBH Landing Page Concept by Thomas Le Corre

Lexus HTML5 Parallax by bil Chamberlin

Toby Steaks Restaurant by Ink Ration

Bentley The New Flying Spur by Impossible Bureau

Telfez by Mani

Dapper Ink Website by Joel Reid

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

Related

studio.everypixel.com

Создание прокрутки лендинга с помощью плагина fullPage.js