Как называются сайты с анимированным содержимым, которое меняется при скроллинге, и как такие сайты делают?

@ixon codepen.io/cleric/pen/AzoIi

Как называются сайты с анимированным содержимым, которое меняется при скроллинге, и как такие сайты делают?

@ixon Какие технологии организуют движение объектов по скроллу на сайте?

Почему нужно задавать в em, а не px?

@Libris округление до целого или смягчение границ (альясинг, сглаживание) происходило всегда — давно появилась возможность менять разрешение экрана (ведь количество триад при этой процедуре не меняется, не так ли?:). Просто эти приёмы стали изощрённее. Стоит отметить, что алгоритмы расчёта могут отличаться для разных случаев (элементы и фоновые изображения), а уж в части шрифтов там вообще всё сложнее и круче.

Достаточно попробовать задать дробную часть ширины блоков. Произойдёт округление, причём если блоки представляют часть размерной цепочки, то округление сильно усложняется. При масштабировании (системном или CSS) округление происходит заново. Для шрифтов сглаживание работает совершенно по-другому, и для них дробные части проявляются всегда.

Однако, в статьях речь идёт про другое. В спецификации по-прежнему указано, что px = .75pt, что вытекало из борьбы двух концепций — 72ppi (что было крайне удобно для полиграфии) и 96ppi. В CSS2.1 описано, что пиксель отныне сам по себе и не связан с абсолютной величиной. Тем не менее, этот архаизм остался. Как обычно, чтобы не дай бог не испортить вид созданных говнокодерами документов, задающих экранные размеры в типографских единицах.

Разговор про пиксель всегда имеет смысл в связке с разрешающей способностью человеческого глаза, которая если память не изменяет, колеблется в районе 30'' – 2', а усреднённая равно 1' (одной минуте). Вот от неё и пляшут в расчётах. Например, в спецификации CSS2.1 считали, что расстояние до наблюдателя примерно равно средней длине вытянутой руки (28 дюймов), от которой и отталкивались при расчёте пикселя. Очевидно, что для проекционных устройств с расстоянием до наблюдателя в 10 метров пиксель не может быть равен /75pt, и вот про это и говорится в картинках и объяснениях.

Мобильные устройства, для которых примерно ясен контекст в части расстояния глаза от экрана максимальное разрешение, превышать которое не имеет смысл, колеблется (по причине разной разрешающей способности глаза) в районе 200–500 ppi. Эта связь закреплена в названии Retina. К слову, увеличение ppi — серьёзная задача для мобильных, где львиная доля энергии тратится на свечение пикселей, поэтому не стоит ожидать появления устройств с ppi больше, чем 400 — нет никакого смысла.

Почему нужно задавать в em, а не px?

Пиксель в CSS не равен физическому пикселю, а не пикселю экрана.
А разрешение экрана полностью соответствует пикселям в CSS.

Как реализовать цепочку функций?

@EarthFM почитайте habrahabr.ru/post/175371 про классы, обратите внимание на их вызов, наличие instanceof и задайте ещё раз вопрос себе и своим советчикам: классы — это сахар над конструкторами или фэнтазийные прототипы-трансформеры?

Как реализовать цепочку функций?

@EarthFM покажите мне именованный прототип, к которому прилагался бы безымянный конструктор.

Как реализовать цепочку функций?

@EarthFM если что-то можно делать, это — ещё не повод так делать. Посмотрите на любые API в HTML5 — именованные конструкторы.

Object.create().constructor() точно так же предполагает использование оператора new.

Как реализовать цепочку функций?

@EarthFM вот как вы думаете, если вам 2 человека написали варианты с использованием одной функции для передвижения, это что-то значит?))

Обычно конструкторы именованные, а прототипы и есть прототипы, чтобы к ним как к свойствам обращаться. А вы всё перевернули. Зачем? Мало того — для IE8 будете полифилл Object.create() писать?

Зачем конструктору возвращать this?

Это не сделает ничего
this.y + this.step;

Использовали хотя бы
this.y += this.step;

Как сделать метку ссылкой на другую страницу на Яндекс.Картах?

@colix да, если у всех меток нужен переход, то hasBalloon: false нужно в коллекцию перенести.

Как сделать метку ссылкой на другую страницу на Яндекс.Картах?

@colix в принципе, можно не отменять балун, проверяя условие в цикле. Скажем, наличие свойства href.

Как сделать метку ссылкой на другую страницу на Яндекс.Картах?

@colix ну вы же — грамотный человек:) Раз говорите про коллекции, то знаете про эти моменты. Безусловно, вешаем слушатель на коллекцию.

Пускай есть объект objects, описывающий объекты, на основании которого мы строим маркеры.

var map = new ymaps.Map(...),
	collection = new ymaps.GeoObjectCollection();

for (var i in objects) {
	collection.add(new ymaps.Placemark(
		objects[i].coords
		{
			...
		},
		{
			hasBalloon: false,
			href: objects[i].href
			...
		}
	));
}

collection.events.add('click', function (e) {
	location = e.get('target').options.get('href');
});
map.geoObjects.add(collection);

Как перевести юникод средствами js?

@rock да, так много лучше

function getRussian (string) {
	return string.replace(/%([^%]+)/g, function () {
		return unescape('%u' + ('000' + (parseInt(arguments[1], 16) + 848).toString(16)).slice(-4));
	});
}

Ну я написал reduce и, конечно же, вспомнил:) В хорошем смысле этого слова. Как айтишник может вспомнить айтишника. Без лишних фантазий.

Как расположить две кнопки так, что-бы расстояние между ними и расстояние до границ было одинаковое?

@SelenIT2 коли память не подводит, font-size:0 только Presto и не понимал.

Как расположить две кнопки так, что-бы расстояние между ними и расстояние до границ было одинаковое?

@SelenIT2 хороший трюк с word-spacing. 0.1px — это оперный реверанс?))

Чем можно заменить это событие что бы из-за одного него не прибегать к jQuery?

@tryvols как же тяжело с любителями нативного JS, но которые его не знают и не умеют задавать вопросы...
Сделайте пример на jsfiddle.net
Что такое элемент с #content? Мы тут не телепаты.

Чем можно заменить это событие что бы из-за одного него не прибегать к jQuery?

@tryvols почему? Вы будете тратить массу времени на велосипеды. Я знаю нативный JS, но не занимаюсь написанием кода, избегая библиотек.

Не забывайте про нативный JS, изучайте его параллельно, но не пытайтесь с самого начала писать только на нём.

Как перевести юникод средствами js?

@tryvols а это на чём?)) Я функцию написал только для академического интереса.
Ещё раз прочитайте фразу в ответе про encodeURIComponent и decodeURIComponent. Не занимайтесь ерундой.

Как перевести юникод средствами js?

@mikluha unescape не может помочь ни в каком случае. Потому что urencoded — это UTF-8.

Как перевести юникод средствами js?

console.log(unescape("%C8%EC%FF")); // Èìÿ
// Потому, что
console.log(escape('Имя')); // %u0418%u043C%u044F

Как перевести юникод средствами js?

@Taraflex ах, точно... Есть же такой странный PHP. Там при использовании HTML-шаблонов в скрипте такая проблема, так вроде?