Реклама


Онлайн редактор HTML/CSS/JS кода- ( КЛИК ). Подробно - (Тут) | Онлайн COLOR PICKER - ( КЛИК ).
Инструменты для программиста - ( КЛИК ). | Лента - ( КЛИК ). | BB-коды - ( КЛИК ).
iCoder.Uz  iCoder.Uz

Показано с 1 по 1 из 1

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


  1. ID сообщения 11227 #1
    Альваро вне форума

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

    Пожалуйста, войдите или пройдите Регистрацию чтобы увидеть содержимое "IMG" BBкода...

    Пожалуйста, войдите или пройдите Регистрацию чтобы увидеть содержимое "URL" BBкода...
    /
    Пожалуйста, войдите или пройдите Регистрацию чтобы увидеть содержимое "URL" BBкода...



    Прочитав заголовок вы подумаете, что ничего нового в этом уроке вы для себя не найдете, но не спешите делать выводы. В сегодняшнем уроке мы рассмотрим достаточно новый и экспериментальный эффект перетаскивания элементов, который наверняка вас удивит. Во время перетаскивания объектов мы будем менять их форму для добавления интерактивности. Одной из самых интересных вещей является вычисление прозрачности объекта в зависимости его позиции по оси 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 ):

    Пожалуйста, войдите или пройдите Регистрацию чтобы увидеть содержимое "IMG" BBкода...


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

    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 на нужных страницах вставьте:
    Пожалуйста, войдите или пройдите Регистрацию чтобы увидеть содержимое "XCODE" BBкода...


    2#: Диалоговое окно и кнопку, его открывающую, оформляем так:
    Пожалуйста, войдите или пройдите Регистрацию чтобы увидеть содержимое "XCODE" BBкода...


    Осталось лишь залить три JS файла из прикреплённого архива в папку js и CSS файл в папку css
    Вот и все. Готово!
    Пожалуйста, войдите или пройдите Регистрацию чтобы увидеть содержимое "URL" BBкода...
    .
    Поблагодарили:


Похожие темы

  1. Ответов: 0
    Последнее сообщение: 03.03.17, 23:58
  2. Ответов: 0
    Последнее сообщение: 02.03.17, 05:41
  3. Меню для сайта с эффектом размытия на CSS3
    от Альваро в разделе HTML/CSS
    Ответов: 0
    Последнее сообщение: 01.03.17, 22:44
  4. Ответов: 0
    Последнее сообщение: 27.02.17, 00:13
  5. Диалоговое окно
    от Guard в разделе Вопросы по Pawn-скриптингу
    Ответов: 2
    Последнее сообщение: 29.05.15, 16:19

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •  

12+