В Google самые крутые эффекты - когда это была игра Pac-man, сегодня, по всей видимости, 160-летие первой Всемирной выставки, и логотип Google имеет ее образ. Они также превращают мышь в увеличительное стекло, которое может подметать изображение (золотое кольцо).
Мне интересно, как они это делают. Очевидно, Javascript, и я посмотрел на источник страницы, но это не особенно читаемо (не удивительно).
Глядя на их исходный код, кажется, они используют довольно простые методы для достижения этого.
Игнорируя все встроенные изящные анимированные gif, есть в основном два изображения - большие и маленькие от всей сцены. Изображение большего размера повторяется три раза в документе. Посмотрите на аннотированное изображение ниже, чтобы лучше понять, как работает масштабирование.
Часть внутри увеличительного круга разделяется на три div-top, mid и bottom. Переполнение для каждого div должно быть скрыто. Каждый div относительно расположен внутри круга масштабирования. При перемещении мыши измените абсолютное положение круга масштабирования на координаты мыши. В их примере также используется CSS3 для масштабирования и добавления некоторых задержек анимации.
Здесь сортируется минимально реконструированный пример.
Другой пример, где мы не скрываем переполнение div, чтобы показать всю вещь как квадрат.
Хорошо, во-первых, для тех, кто хочет использовать такой эффект, есть множество плагинов jQuery. Вот лишь несколько:
Во-вторых, это довольно легко достичь. Просто загрузите полноразмерное изображение, но дайте ему width меньше фактической ширины, поэтому он масштабируется с помощью CSS. Затем используйте JavaScript + CSS для создания Div (увеличительного стекла) с тем же изображением, что и фон, но измените свойство background-position на соответствующую масштабированную координату x,y, которую пользовательская мышь в данный момент включена.
Есть другие способы сделать это, я полагаю, и Google может делать это по-другому, но это самый очевидный способ для меня, который приходит на ум.
Посетите http://codeblab.com/glass/ для примера реальной жизни и подробно объясните эту технику. Flash и CSS v3 имеют широкие возможности для создания круглого увеличительного стекла.
Однако simulate-a-circle-with-overlapping-rectangles работает на многих платформах.
(РАСКРЫТИЕ: codeblab.com - мой личный блог хобби с некоторыми слабыми ссылками на мою работу в Нидерландах.)
Существует полный пример увеличения любого вида HTML, включая HTML5, в http://www.aplweb.co.uk/blog/js/magnifying-glass/. Работает кросс-браузер тоже - хотя округленные углы немного в большинстве браузеров - так что вам придется использовать поле, а не круг.
Вот как это работает:
Это в значительной степени это тоже. Есть много мелочей, которые нужно искать, хотя для работы над всеми браузерами.
Я не знаю, как Google это делает, поскольку логотип больше не отображается в моей области; но этот эффект может быть достигнут путем отсечения увеличенного анимированного GIF поверх обычного изображения с использованием холста. В качестве альтернативы, также можно создать создание кругового обрезания с использованием граничного радиуса CSS (обычно используемого для реализации закругленных углов).
EDIT: я взломал это вместе, чтобы показать основную технику, которая вам нужна, если вы используете граничный радиус CSS: http://jsfiddle.net/yjBuS/
Похоже, они используют два изображения: один для логотипа и один для увеличения (увеличенный на самом деле нарезанный, для запуска анимации отдельно...?) Вероятно, они обнаруживают, что мышь над нормальным логотипом, затем покажите желтый круг и прикрепите его к позиции мыши. Затем показывается другое изображение, смещая его напротив мыши. Или что-то подобное.