Как мы любим Google Doodles? Давайте посчитаем пути.
Они великолепны. На самом деле, мне даже нравится вставать каждый день, зная, что где-то в Маунтин-Вью, вероятно, есть люди, которые кричат: « Уху! На следующей неделе у папы Роберта Хайнлайна день рождения! Я хочу сделать анимационную ракету в Google сегодня! ‘
У всех нас есть наши любимые. Я любил дань Pacman . Играбельная гитара Les Paul . Удивительная глубоководная дань Жюля Верна . Это правда, планка была установлена очень высоко.
Дань Google Генриху Герцу — 22 февраля 2012
Но когда Дэн Лейдлер указал на сегодняшнее празднование великого немецкого физика Генриха Герца , мы все немного удивились.
Работа Герца была сосредоточена вокруг волн — от света до радио — поэтому Google отдал дань его 155-летию, превратив их знаменитый логотип в мягко движущуюся волну, которая повторяет формы букв Google.
Это была достаточно хорошая идея, но именно от того, как они заставили ее покачиваться , мы почесали свои коллективные головы.
Потому что здесь у нас была (возможно) самая технически продвинутая веб-компания на планете, которая решила анимировать волну как анимированный GIF с большой задницей .
Точнее, 197-килобайтный, 49-кадровый, отчасти рваный анимированный GIF. Брови были нахмурились.
Очевидный вопрос: «Почему?». Конечно, мы все знаем, что поддержка анимированных GIF-файлов повсеместна, и зачастую простое решение — лучшее решение. Однако для компании, которая так энергично отстаивает возможности HTML5 в частности, и сети в целом, это кажется странным решением.
Поэтому вместо того, чтобы просто блеять об этом — хотя нам это тоже нравится — мы быстро поигрались с альтернативами. Вот результаты пока.
Метод CSS3 Only
Самый простой способ заставить что-то работать — это CSS3. Мы начнем с самого простого мыслимого HTML.
Примечание. Для ясности ниже я покажу только стандарт W3C, но пример содержит все необходимые префиксы CSS.
<div id="wavelength"></div>Базовая настройка CSS не намного сложнее. Мы даем ширину и высоту DIV и встраиваем нашу графику волны в фон.
#wavelength{
width:380px;
height:223px;
margin: 100px auto;
border:1px #ddd dashed;
background: url(http://sitepointstatic.com/examples/css3/animation/hertz.png);
position:relative;
}
Код анимации ключевого кадра просто перемещает положение фонового изображения со значения по умолчанию (0px 0px) до 380px влево.
@keyframes hertz {
0% {background-position:0px 0px;}
100% {background-position:-380px 0px;}
}
Затем мы просто прикрепляем анимацию к #wavelength DIV.
animation: hertz 4s infinite linear; /* w3c standard */
Как последний штрих я использую псевдоэлементы : before и : after DIV #wavelength для создания пушистых белых краев, которые вы видите с левой и правой сторон оригинального GIF.
Здесь работают демонстрационные версии как на Codepen>, так и на JSFiddle .
Работая бок о бок с GIF, версия CSS3, безусловно, намного визуально более плавная, а размеры файлов резко сокращаются. Наш волновой рисунок теперь имеет размер менее 3 КБ, что означает — и даже с учетом нескольких префиксов — нам нужно чуть более 1400 символов CSS. Это общий вес чуть более 4 КБ или менее 3% от оригинала.
Конечно, мы не можем притворяться, что у CSS3 нет недостатков.
Аудитория Google так же широка, как и они, поэтому метод, который не работает на старых Internet Explorer (до IE10), вероятно, не вариант. Тем не менее, если вы запустили GIF как запасной вариант, используя что-то вроде Modernizr для старых браузеров, я думаю, у вас будет очень жизнеспособное решение.
Метод JQuery
JQuery — это простой способ нацеливания как старых, так и новых браузеров с помощью единого подхода. Есть несколько способов сделать это, но вот самый простой способ, о котором мы могли подумать (приветствует Харли).
Мы начинаем с того же базового HTML и CSS, что и в предыдущем примере, за исключением кода анимации CSS.
Затем мы создаем простую функцию ( waveloop (); ), которая сбрасывает нашу фоновую позицию X в 0px.
function waveloop(){
$('#wavelength').css({'background-position-x': 0});
});
}
Затем нам нужно анимировать фоновую позицию 380px слева от экрана (отсюда и минус) следующим образом:
function waveloop(){
$('#wavelength').css({'background-position': 5});
$('#wavelength').animate({'background-position': '-380px'},3700,'linear';
});
}
Мы обнаружили, что 3700 миллисекунд — это довольно близкое совпадение с временем GIF, хотя оно немного меняется от компьютера к компьютеру.
В этот момент наша волна оживляет влево, но останавливается после первого прохода. Мы хотим, чтобы он зациклился без необходимости каждый раз повторять запуск. Самый простой способ — заставить функцию снова запускаться после завершения. Это обратный вызов, и мы можем позвонить так:
function waveloop(){
$('#wavelength').css({'background-position': 5});
$('#wavelength').animate({'background-position': '-380px'},3700,'linear', function(){ waveloop();
});
}
Наконец, нам просто нужно вызвать нашу функцию с помощью функции готовности документа jQuery.
$(document).ready(function() {
waveloop();
});
Вот и все.
Вот рабочая демонстрация, показывающая Google GIF вверху в качестве сравнения.
Около полдюжины строк кода для более плавного кросс-браузерного результата с меньшей пропускной способностью. Конечно, нам нужно включить в загрузку минимизированную библиотеку jQuery, но даже добавление этого файла размером 30 КБ не дает нам где-то около 40 КБ или пятой части размера файла GIF.
И jQuery здесь действительно излишний — мне просто нужно было закончить другую работу.
Так что ты думаешь?
- Facebook переманивал Google Doodlers?
- Возможно, у вас есть еще лучший способ сделать это?
- Я недооцениваю силу и красоту анимированного GIF?
Или я просто немного жесток с бедными парнями?