Если вам интересны такие вещи, вы должны поиграть с Chrome Developer Tools, Firefox Firebug Addon или Safari в меню «Developer».Они действительно великолепно дают вам представление о том, что происходит на веб-странице
Что касается того, «как они это создали», существует множество различных технологий, используемых в стеке веб-приложений.Имейте в виду, что серверы, хранящие, кэширующие и извлекающие все эти данные, являются такой же частью веб-приложения, как и веб-интерфейс.Но я предполагаю, что ваш вопрос спрашивает, как «как они заставили эту веб-страницу делать все эти интерактивные вещи».
По сути, все выглядит так, как будто это все традиционный HTML / CSS - никаких махинаций с холстом "HTML5" или Flash.
Интерактивность происходит от их пользовательского кода Javascript.Я попытался выяснить, используют ли они какую-то популярную стороннюю платформу Javascript Framework (например, jQuery или Prototype), но они импортируют так много сценариев, что им трудно следовать.Интересно, что jQuery и $ не являются определенными переменными на странице Evernote, поэтому похоже, что они не по крайней мере с использованием jQuery.Они ясно написали много Javascript, чтобы запустить эту штуку и запустить ее, так что не сложно представить, что они просто решили оставить весь свой код внутри себя.
К вашему сведению: три столбца просто расположены и имеют размер <div> с.
<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 0px; top: 0px; bottom: 0px; width: 220px; ">...</div>
<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 220px; top: 0px; bottom: 0px; width: 360px; ">...</div>
<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 580px; top: 0px; right: 0px; bottom: 0px; ">...</div>
Прокрутка, которую вы видите в этих столбцах, выполняется в дочерних <div> с.