Анимированные всплывающие окна, как на wunderlist.com

Я наткнулся на wunderlist.com сайт и просто влюбился в зум - подобное всплывающее окно, которое они имеют на изображении прямо под заголовком "Узнайте больше о Wunderlist". Я бы с удовольствием реализовал что-то подобное на своем сайте.

Может кто-нибудь сказать мне, как это делается? Я попытался провести реверс-инжиниринг, но безуспешно :) Я не надеюсь на весь готовый код, но, возможно, некоторые рекомендации о том, как достичь этого с помощью CSS/jQuery.

Или, может быть, вы знаете какой-нибудь плагин jQuery, который я может пригодиться?

4 2
javascript html css jquery jquery-animate

4 ответа:

Они используют все CSS. Довольно просто на самом деле.. Я бы написал полный пример скрипки js для вас, но у меня нет времени, поэтому вместо этого я перечислю различные элементы, которые вам нужны, и как они взаимодействуют.

  1. Во-первых, большое изображение-это просто div с фоновым изображением с набором размеры.
    2. Сами круговые изображения генерируются из одного большого изображения, содержащего все круги в одном месте, это называется спрайтом. Круги просто див с фоном изображения и расположение фона для размещения правильного круга внутри коробки из изображения спрайта.
  2. сами текстовые поля также являются div со стандартными тегами H2 и P для текста.
  3. все абсолютно позиционировано для достижения правильной компоновки.
  4. малые круги-это div с состояниями :hover, которые абсолютно расположены над их соответствующими целевыми областями.
  5. анимация на :hover достигается использованием CSS3 перехода и css3 трансформация.

Это должно помочь вам начать.

Комментируйте, если у вас есть вопросы.

Было немного времени, чтобы повеселиться: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/

1

Попробуйте рассмотреть два основных аспекта: Откройте свой инструмент инспектора выбора и посмотрите, что происходит с body.login .feature ...более конкретно, посмотрите, что происходит с его transform: scale и opacity значениями при наведении.

Подсказка: переход в основном на них.

Все еще находясь в инспекторе, измените масштаб на (1) и непрозрачность на 1. То, как он плавно переходит из одного состояния в другое, диктуется свойством transition.

Это не для того, чтобы сказать вам, как именно этого достичь, но чтобы получить вас на вашем пути:)

1

На самом деле это не так уж и сложно. Команда Wunderlist даже упростила задачу. У них есть большое спрайтовое изображение с увеличенными изображениями, обрезанными и готовыми с закругленными углами, границами и тенями. Вы можете увидеть его здесь: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png

То, что вы делаете, - это при наведении мыши вы показываете полупрозрачный черный фон (может быть положение: фиксированный с полной шириной и высотой). Затем вы создаете элемент с помощью спрайт в качестве фонового изображения (еще лучше, иметь готовый класс в css и добавить его к вновь созданному элементу). Установите положение в положение зависшего элемента.

При добавлении в dom анимируйте масштаб преобразования элемента (начиная с чего-то вроде scale (.24) как они делают).

1

Ну с тех пор, как вы попробовали реверсивную инженерию. Я постараюсь направить вас по этому пути.

Существует только один div с идентификатором overlay, который изменяет его место и содержимое, при наведении любого div с классом feature. Работайте дальше от их приложения js , оно не уменьшено.

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

0