Как работает сегодняшний (Жюль Верн) Google Doodle?

Я уверен, что многие из вас уже проверяли сегодняшний (2011-02-08) дудл Google ( ссылка на статью на CNN, если дудл изменится ).Это было потрясающе, и я попытался выяснить его реализацию в Firebug , кое-что, что я обнаружил, было то, что он имеет около 3 слоев изображений (для 3D-эффекта), которые панорамируются и вращаются ( -moz -transform: rotate () ) и т. д. Чего я не нашел, так это (и мои вопросы):

  • Как он скрывает курсор мыши, когда вы держитесь за ручку, я знаю, что это курсор : none в CSS, но я все еще видел этот CSS для дескриптора:

     # verne-drag {нет  в CSS, но я все еще видел этот CSS для дескриптора: 
    
    
     # verne-drag {нет  в CSS, но я все еще видел этот CSS для дескриптора: 
    
    
     # verne-drag {
     фон: url ("logos / 2011 / verne-hp.png") прокрутка без повтора 1000 пикселей 1000 пикселей прозрачный;
     курсор: указатель; / * здесь его указатель не отсутствует * /
     высота: 150 пикселей;
     слева: 565 пикселей;
     позиция: абсолютная;
     верх: 15 пикселей;
     ширина: 150 пикселей;
     z-индекс: 700;
    }
    
  • Как он позволял перетаскивать дескриптор таким образом и переключаться между 9 изображениями в соответствии с положением одновременно.

  • Пролил свет на его Javascript (я не нашел ни одного в firebug ... только обычный скрипт для поиска , и этот небольшой код, который просто вычисляет мод (как насчет возможного кода для других задач)

     google.doodle.mod = function (a, n) {return a% n;};
    2 / *! Eval (new String ("google.doodle.mod = function (a, n);)) * /
    

Просто укажите мне, как это реализовано (я упомянул 3, но включил другие моменты, которые могут быть не столь очевидными).


Ресурсы изображений для справки:

The Sprite for resources

Ссылка на другие 3 изображения (они были настолько длинными, что было невозможно показать здесь)

Big FISH, акула
Giant Tail
Подводная фауна
Небо


Обновление

Майлз Грей внес здесь большой вклад, благодаря повторному внедрение (и повышение читабельности) кода Javascript, CSS и HTML, чтобы показать нам, как был реализован Doodle.

Вот ссылка, по которой вы все можете это проверить:

http://jsfiddle.net/Mutant_Tractor / jRkND / 16 /

48
задан 16 revs, 8 users 57% 23 May 2017 в 10:32
поделиться