Главная → Программирование → by

Обеспечение интерактивности на ваш сайт с веб-стандарты

Добавление интерактивности и анимации для дизайна doesn’ т должны быть сложными или сделать сайт недоступным при использовании современных веб-стандартов.

В этой статье мы рассмотрим несколько примеров и теорий, которые используют CSS, HTML, SVG, canvas элементов и JavaScript.Некоторые из этих методов you’ будете знать, другие, вы, возможно, не рассматриваются.Let’ начнем с basics.

1.HTML и JavaScript

Манипуляции с HTML с JavaScript является наиболее распространенным методом добавления интерактивности на веб-сайт.Но прежде, чем вы начнете использовать JavaScript, имея четкое понимание CSS визуального форматирования model __ и 7 | окна model имеет важное значение.Они жизненно важны для осмысления того, как HTML элементов можно манипулировать визуально.Когда вы динамически изменять стиль HTML элемент, он будет течь с и реагировать на остальной части документа.Научиться предвидеть и контролировать то, что пострадавших может быть difficult.

Использование библиотек JavaScript, таких как jQuery может принять на себя страдания от кросс-браузерной поддержки.JQuery также обеспечивает общую функциональность, благодаря которой взаимодействуют с HTML быстрый процесс.It’ S необходимо изучить основы JavaScript, прежде чем глядя на библиотеку как JQuery, чтобы убедиться, что вы понимаете основы и поэтому знают how JQuery что-то делает, а не только what он делает.Различие здесь является ключевым чтобы иметь возможность написать свой собственный JavaScript.

Слайд-шоу Example

Веб-сайт для Momento App имеет горизонтальную прокрутку слайд-шоу, которое представляет новый контент, когда пользователь щелкает левой и right.

Momento приложение имеет свой собственный JQuery плагин для слайд-шоу effect.

Как это Works

Пять слайдов img элементов, завернутый в div S и расположены последовательно в своих контейнерах: 

<div id="tour_pages">
    <div id="tour_page_capture" class="tour_page">
		<img src="images/tour/capture.png" />
	</div>

    <div id="tour_page_import" class="tour_page loading">
    	<img src="images/tour/import.png" />
    </div>

    <div id="tour_page_browse" class="tour_page loading">
    	<img src="images/tour/browse.png" />
    </div>

    <div id="tour_page_read" class="tour_page loading">
    	<img src="images/tour/read.png" />
    </div>

    <div id="tour_page_protect" class="tour_page loading">
    	<img src="images/tour/protect.png" />
    </div>

</div>

<a id="tour_nav_previous" href="#">Previous</a>
<a id="tour_nav_next" href="#">Next</a>

Контейнер tour_pages имеет фиксированную высоту и ширину в CSS.Она также имеет overflow набор свойств до hidden. 

#tour_pages {
    position: absolute;
    left: 0px;
    top: 116px;
    height: 420px;
    width: 940px;
    overflow: hidden;
}

Вы можете видеть на изображении ниже, как пять слайдов расположены так, чтобы перемещаться внутри своих контейнеров.Контейнер будет обрезать все, что за ее пределами, потому что в overflow: hidden.Это создает то, что мы можем назвать window или окна effect.

Показаны отсечения кадров и скрытые elements.

Эта установка может быть сделано с CSS и HTML в одиночку.Чтобы создать взаимодействие, мы должны использовать JavaScript, чтобы переместить слайды, когда “Next” или “Предыдущие” нажали.JavaScript используется Momento вполне участвует, поэтому I’ оставляю это как упражнение для читателя, чтобы проверить, но я надеюсь, что этот пример является хорошей иллюстрацией того, как HTML элементы находятся под контролем в то время как остальные части документа structure.

Когда использовать JavaScript

В Momento Например, мы можем видеть, как наличие полезно для контроля доступа к содержимому.Скрыть и показать технику во всех его формах полезен для сохранения видимого содержимого чистой и повышение пользователь experience.

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

Когда не следует использовать JavaScript

Интерактивность может быть намного более интересным, чем статический контент, но it’ Не всегда наиболее удобных решений.Рассмотрим следующий пример:

  • Будет ли пользователь понимает и ожидает соответствующих действий, что происходит
  • Если содержимое скрыто, будет пользователь знает, как получить к нему доступ
  • ? Ли дополнительный вход пользователя на самом деле улучшить общее впечатление
  • Будет ли сайт можно было использовать на всех устройствах

Если вы не можете оправдать наличие на эти вопросы, то you’ D быть мудрым, чтобы остаться в стороне.Будьте бдительны: спросите себя, является ли дополнительные глаз конфеты действительно necessary.

полезная и accessible don’ т просто означает, что устройство технической поддержке веб-сайта.Веб-сайт должен быть простым в использовании насколько это возможно для любой аудитории, от мала до велика и во всех environments.

Далее Reading

Интерактивность и JavaScript являются почти синонимами в веб-дизайне, но, как we’ увидите в следующем примере, JavaScript не всегда necessary.

2.CSS3 Transitions

CSS :hover псевдо-класс позволяет изменение стиля при наведении указателя мыши на элемент.Обычно используется на <a> элемент для ссылки, изменения могут обеспечить визуальную обратную связь для пользователей.Хотя не совсем революционное по своей собственной, :hover могут быть использованы для большого effect.

Дизайнер Кристоф Zillgens использования CSS3 transitions Для усиления эффекта при наведении.Вы можете видеть, переход фазы ниже:

Три фазы перехода наведения: по умолчанию, а затем переход hover.

Как It’ S Done

Проверка HTML doesn’ T предлагают множество улик.На первый взгляд, мы видим нормальную ссылку.Это идеальный вариант для семантической разметки, но как мы создаем переход 

<p class="category_link">
    <a href="http://christophzillgens.com/en/category/posts/">
        <span>View all Posts</span>
    </a>
</p>

Только необычным дополнением здесь является дополнительной span теги упаковки текста.CSS раскрывает секрет.Let’ посмотрим (некоторые стили были опущены ниже для удобства чтения): 

.category_link a {
    display:block;
    background:rgba(0,0,0,.05) url(img/big_icons.png) 10px 10px no-repeat;
}
.category_link a:hover {
    background-color:rgba(180,70,30,.7);
    -webkit-transition:background-color .4s ease;
}
.category_link a span {
    position:relative;
    top:150px;
    opacity:0;
    -webkit-transition:all .3s ease-in-out;
}
.category_link a:hover span {
    top:130px;
    opacity:1;
}

Мы видим в HTML и CSS, что и a и span преобразуются в блочных элементов для обеспечения позиционирования и размеров.Они оформлены в двух состояниях, default и hover. ( A __ и 3 | C в изображение выше)

По умолчанию span запуски с непрозрачностью 0 и 150 пикселов сверху.При наведении, span полностью видна и 130 пикселов сверху.Якорь имеет простое изменение цвета фона между A __ и 3 | C.

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

Добавление Transition

Теперь у нас есть начальная точка и конечная точка для нашей эффект при наведении.Для создания промежуточных переходов, мы можем использовать transition собственность ( определены here) с форматом вроде этого: 

transition: [transition-property] [transition-duration] [transition-timing-function]

По умолчанию span стиль, переход собственности была добавлена ​​следующим образом: 

-webkit-transition:all .3s ease-in-out;

Это означает, что всякий раз, когда по умолчанию применяется стиль, span будет переход между текущим стилем и стилем по умолчанию.В этом случае все свойства CSS затронуты, и переход вызван наведении мыши.Если мы хотим, чтобы переход одного свойства, как background-color на якорь, мы можем это сделать, тоже: 

-webkit-transition:background-color .4s ease;

Создание наведении переходы так же просто, как задание по умолчанию, и при наведении государства с CSS, а затем позволить transition собственность анимировать любые изменения между two.

Когда CSS Transitions Work

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

Тем не менее, переходы также вызвано динамическим HTML изменения с помощью JavaScript.Если you’? Повторно использоваться для переключения классы с JavaScript для изменения стиля, то почему бы не посмотреть, что разница перехода или два может иметь

You’ заметите, что в этом примере используется -webkit- конкретного производителя недвижимости для Safari и Chrome, но переходы также поддерживается в опере помощью -o- префиксом и новый Firefox 4 бета-версии-moz-.

Хорошая новость для изящная degradation вентиляторы в том, что старые браузеры (например, Internet Explorer) игнорировать переход и примените стиль изменения немедленно.Это означает, you’ редко сможете найти ситуацию, в которой использование переходов ухудшает functionality.

Другие Examples

Вот еще несколько веб-сайтов, использование которого переходов CSS примечательно:

  • При использовании наведения, пострадавшие элементы don’ т всегда нужно сидеть в том же контейнере. Любовь Nonsense позволяет использовать соседние селекторы-родственники, чтобы вызвать transitions.
  • Simurai демонстрирует сочетание переходов и преобразований для создания сложных экспериментальных переключатель с помощью только CSS и HTML.
  • :hover не только триггер для перехода. Нил Grosskopf’ с CSS только для lightbox демонстрируется использование :target псевдо-class.

Далее Reading

Вот выбор глубокие статьи, которые охватывают нюансы переходов CSS:

3.Анимации с SVG

Hover эффект хорошо работает для ссылок, но может быть запутанным, когда срабатывает неожиданно на другие элементы.They’ повторно и менее доступны на устройствах сенсорного экрана.Добавление интерактивности, когда пользователь щелкает как правило, очен …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.