Эффект перехода через масштабирование

Question

Куча сайтов, таких как http://scaleofuniverse.com/,, имеют масштабируемые интерфейсы, которые позволят вам «пролистывать» элементы, чтобы обнаружить «меньшие» элементы, содержащиеся в них.Я всегда видел, как это делается во Flash, но мне интересно, как это можно сделать с помощью JavaScript и CSS.Существует ли какая-либо библиотека с открытым исходным кодом, поддерживающая эту функцию?

Кроме того, я посмотрел на strike.js, в котором есть несколько очень интересных функций, но я не уверен, смогу ли я выполнитьжелаемый эффект с помощью этой библиотеки.Это просто вопрос использования правильных стилей CSS?

Answer 1

Процесс очень сложный, но выполнимый, вот отличная статья о том, как это сделать, Создайте масштабируемый пользовательский интерфейс с CSS3 , а также плагин jQuery, который обеспечивает эффект, близкий кВы ищете, Zoomooz .

Answer 2

Если элемент интерфейса является элементом HTML, вы можете расширить элемент до тех пор, пока он не заполнит экран, в то же время уменьшив прозрачность до 0. Этот метод будет зависеть от масштабируемости любых изображений, используемых в элементе интерфейса. (возможно используйте background-size: cover).

Вы можете использовать CSS-переходы или JavaScript для достижения эффекта.

Answer 3

В итоге я использовал урезанную версию zoom.js , которая предоставляет возможность увеличения любого элемента DOM. Он похож на Zoomooz, но гораздо менее раздутый и дал мне возможность выделить несколько строк кода, которые были необходимы для достижения эффекта, без необходимости загружать внешнюю библиотеку.