Создаем 3D эффекты CSS при наведении с использованием jQuery

[psman]

Перевод статьи 2012 года…

[psman]

Статья оригинальная на блоге который уже переводили без разрешения авторов. В целом уже в закладках и так же как и http://tympanus.net/codrops/category/tutorials/ в подписках у всех кто хоть как то верстает или следит за вебом.

[Rad1calDreamer]

На tympanus всегда хорошие статьи. Почему, если уж и переводить, то не взять свежие?

[JCHouse]

А я зашел почитать, потому что словил себя на том что не писал на джиквери 4 года! И вот на тебе как раз 2012 год :)

[krosaff4ik]

Круто конечно, но не знаю как вы, а я бы с удовольствием забыл про всякие веб GL и CSS 3 за возврат разницы в 1-2 гб ОЗУ.

[gorodnev]

Нет, от CSS3 точно не стоит отказываться. Добиваться одинаковой отрисовки для разных браузеров и устройств только browser-specific селекторами и свойствами — это боль и унижение.

[RedCatX]

Может тогда хотя бы откажетесь от тяжёлых CSS и JS фреймворков, и будете создавать страницы по старинке, с ручной оптимизацией? Ведь открывать тяжёлые тормозящие сайты — это тоже боль и унижение.

[Fen1kz]

Я думал вы "крутые эффекты" на jQuery уже вымерли.

[Ashot]

Да jQuery-то ту по большому счёту не при чём: эта функция всего лишь создаёт структуру «слайсов» из картинки. Эти слайсы можно было бы и в ручную сверстать, и на pure js написать такую же функцию. Просто на jquery для демки-то это быстрее сделать.

[seokirill]

ничего не хочу сказать, но тут настолько банально, нет какого-то раскрытого тайного знания, чего я всегда жду от хабра(

[ShNURoK42]

Может перестать ждать и начать жить?

[Barafu]

Здесь, в общем-то, раскрывается тайное знание о том, почему блуждание по вебу скоро будет требовать таких же вложений в клиентскую машину, как и игры.
У меня на Haswell и 18Гб оперативки тормозят почти все примеры с этого сайта.

[seokirill]

мак? Уменя даже на телефоне не тормозит

[SerDIDG]

А почему на маке должно тормозить? Всё нормально работает (Air 2014).

[seokirill]

Haswell и 18Гб

Я просто подумал, что у дядьки мак.
Haswell-камни с 13 года на pro ставят.

[Barafu]

Нет, просто Firefox как и у половины населения интернета.

[seokirill]

За что все его любят, если он очевидно крайне медлителен?

[Athari]

Adding some perspective with CSS3 and jQuery — best viewed in WebKit browsers

Этот срам убрать пора. Во-первых, все браузеры умеют. Во-вторых, Хром единственный не справился с плавным включением тени.

[skoder]

Вопрос только — зачем тут jQuery, да еще и в заголовке

function hoverfold() {
    'use strict';
    [].slice.call(document.querySelectorAll('.view')).forEach(function (elm) {
        var img = elm.getElementsByTagName('img')[0],
            src = img.getAttribute('src'),
            div = document.createElement('div'),
            overlay = document.createElement('span'),
            struct = '<div class="slice s1">' +
                '<div class="slice s2">' +
                    '<div class="slice s3">' +
                        '<div class="slice s4">' +
                            '<div class="slice s5">' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>';
        div.innerHTML = struct;
        struct = div.firstChild;
        overlay.className = 'overlay';

        img.parentNode.insertBefore(struct, img);
        img.parentNode.removeChild(img);

        do {
            struct.style.backgroundImage = 'url(' + src + ')';
            struct.parentNode.insertBefore(overlay.cloneNode(), struct);
            struct = struct.firstChild;
        } while (struct);
    });
}