Чуточку не по теме:
русские фриланс биржи - одна большая клоака, особенно когда речь идет о старте и низких рейтах. Лучше найдите работу по удаленке (или в офисе неподалеку на крайний случай) и параллельно изучайте английский, чтобы потом фрилансить в валюте. А то вы так все нервы угробите себе.
Ну и к тому же варианты "сделаю за еду/с большой скидкой" отпугивают любых нормальных заказчиков.
Владислав Чернушевич: В общем там идет главный блок с общим gradientom с углом в 45%. И есть 2 блока маски, один с красным радиальным, другой с фиолетовым. Если ховеришь верхнюю часть блока - активен красный, если нижнюю то фиолетовый. При активности соответственно opacity становится 1.
Владислав Чернушевич: У них реализовано как то вот так i.imgur.com/rxHRIM1.png
Код к сожалению глянуть я не в состоянии, ибо там все минифицировано. Но там 100% юзается анимация на raf, только вместо непосредственного изменения свойства gradient они меняют положение маски как я понимаю.
Анна Бакурова: Попробуйте для анимируемых блоков/картинок добавить backface-visibility: hidden; в css для теста. Ваша задача "промоутнуть" их в отдельные слои до старта их анимации. Просто у вас на сайте слишком много всего, чтобы я вот мог сесть и запрофилировать это вечером воскресенья :)
Градиенты нельзя менять транзишеном :) Градиенты можно анимировать на css с помощью:
1) Background-position
2) Дополнительного элемента с другим градиентом и изменением opacity (с 1 до 0 у оригинала и с 0 до 1 у второго).
3) Css animation не чекал
>Все остальное не только не приносит удовольствия, так еще и по качеству получается хуже.
Основа основ :) Можно даже вывести какую-нибудь теорему, что каждый час написания кода, после отработанных 8 часов в дне, будет потом стоить N времени рефакторинга или посиделок с мыслями "какой м*дак это писал и что мне теперь с этим делать". Единственное исключение - запиливание каких-нибудь простых демок, где главное это демонстрация proof of concept.
По нормальному такие вещи делаются с помощью добавления/убирания класса, что будет триггерить css transition анимацию. Использование jQuery.animate() в 2015 должно расцениваться как преступление.
Анна Бакурова: Без профилирования никуда не уйти :) Кстати, только что глянул что у вас через Network вкладку. 30 метров трафика! Вот это жесть :) Вот скриншот - i.imgur.com/zZXMCq8.png и на нем видны картинки по 1.5-2+ метра. Отрисовка такой жирноты при анимации может весьма много сжирать. Оптимизируйте все что можно, ибо 30 метров это прям таки хардкор.
Назар Мокринский: Поддерживаю. Во фронте вообще можно забить на 90% готовых либ, не знать cms и не работать с бэкендом, и при этом получать отличные деньги, за умение пилить вещи "руками". Ибо далеко не всем нужен очередной сайтик на вордпрессе, с дизайном как у сотни других сайтов и таким же функционалом.
Serj-One: Мой комментарий был лишь на тему использования css трансформов, из-за которых появляется sub-pixel rendering (лесенка). По идее без трансформа с 2px шириной бордера лесенка если и будет, то менее заметная.
Эммет же в основном юзают для вложенных множеств тегов. Аля .cont>.block*10>.text*5{lorem10}
Писать такое руками даже с суперскоростью - застрелиться проще.
Александр: Если человек использует бутстрап, то юзать просто btn это ок. В верстке без фреймворков лучше давать определенные классы кнопкам (так как у них будут разные margin'ы скорее всего и возможно еще какие части) а "общие стили" применять на уровне препроцессоров, с помощью mixin'ов или extend.
Позволю себе не согласиться, автоматизирование бем верстки обычно хорошо подходит только для гигантских проектов, в случае же когда верстальщик один, достаточно юзать наследование с препроцессорами, аля
.block {
&__element {}
}
