Интересные примеры перетаскивания элементов

demosourse

Сегодня мы представим два демо, где показываем забавные примеры использования перетаскивания элементов.

Внимание: в данных примерах используются экспериментальные CSS свойства, которые не будут функционировать в старых браузерах (CSS анимация, CSS фильтры, и т.д.). Internet Explorer 11 не поддерживает transform-style: preserve-3d ни CSS фильтры.

В данных примерах используются Draggabilly плюс imagesLoaded от Dave de Sandro, а так же Dynamic.js от Michaël Villar.

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

Одной из самых интересных вещей является вычисление прозрачности объекта в зависимости его позиции по оси x. Нам нужно написать линейную функцию. Имея координаты двух точек, нам необходимо вычислять значение y в зависимости от смены x. Давайте рассмотрим пример: элемент находится по центру. Организуем расчёт значения прозрачности в зависимости от перемещения элемента по оси x. Основное расстояние - половина от размера окна: ww/2. Значение прозрачности может варьировать от 0 до 1. На изначальной позиции (посередине экрана) значение прозрачности должно быть максимальным. Приближаясь к краям окна, значение прозрачности должно достигать нуля. Итак, в результате у нас есть две точки P1( x1, y1 ) и P2( x2, y2 ): P1( 0, 1 ) и P2( ww/2, 0 ):

Для этих двух точек можем написать линейную функцию:

f(x) = y = (( y2 – y1 ) / ( x2 – x1 )) * x + b

Мы знаем, что b, равное 1 является пересечением с осью y. Используя данные точки получим в итоге:

f(x) = y = (2/ww) * x + 1

Данная функция будет рассчитывать уровень прозрачности y в зависимости от расстояния по оси x.

Тот же принцип работает в случае фильтров (используется от 0% до 100% для y1 и y2).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2015/07/08/playful-interaction-for-draggable-elements/
Перевел: Станислав Протасевич
Урок создан: 14 Июля 2015
Просмотров: 9060
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^