Задавайте вопросы

Задавайте вопросы и получайте ответы от нашего сообщества

Отвечайте

Отвечайте на вопросы и станьте экспертом по своей теме

Свяжитесь с администрацией

Наши специалисты готовы ответить на ваши вопросы

Модальное окно с эффектом перетаскивания на JS

Информация о теме

О теме Здравствуйте, вы читаете тему Модальное окно с эффектом перетаскивания на JS созданную в в разделе JavaScript пользователем Альваро. Эта тема была просмотрена 2 277 раз(а), получила 0 комментариев и 1 очки реакции...
Название категории JavaScript
Название темы Модальное окно с эффектом перетаскивания на JS
Автор темы Альваро
Дата начала
Ответы
Просмотры
Количество реакций
Последнее сообщение Альваро

Альваро

Пользователь
Регистрация
26.10.2015
Сообщения
76
Реакции
34
Баллы
25
Лучшие ответы
0

Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!
/
Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!



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

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

Чтобы получить такой эффект нам нужно написать линейную функцию. Имея координаты двух точек, нам необходимо вычислять значение 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).

1#: После /head на нужных страницах вставьте:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
2#: Диалоговое окно и кнопку, его открывающую, оформляем так:
HTML:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Осталось лишь залить три JS файла из прикреплённого архива в папку js и CSS файл в папку css
Вот и все. Готово!
Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!
.
 
Верх Низ