Разное
★ Рубрика: Разное
★ Тема: CSS

Анимация macbook на чистом css

Если вам надо написать очередную статью про macbook или у вас есть интернет-магазин и там следует разместить изображение ноутбука, то вы безусловно задумаетесь над тем, как привлечь внимание потенциального покупателя. Тысячи одинаковых картинок, фотографий уже не вызывают интереса.
MacBook Air
А если вспомнить, что посетитель смотрит контент страницы не больше 10 секунд, чтобы оценить ее и принять решение остаться или уйти, то задачка не из простых. Вот тут вам и может пригодиться такой же трюк, как на этой странице. Признайтесь, первое, на что вы обратили внимание, зайдя сюда - это рандомно крутящийся макбук. Вы вынуждены наблюдать за ним, вы пытаетесь понять, есть ли система в его вращении. Вы оцениваете реалистичность динамики вращения. Цель достигнута, внимание привлечено и вы уже размышляете над тем, как это сделано и думаете, а не прикупить ли вам macbook pro i9. Но, что замечательно в этой анимации, так это то, что она реализована без скриптов, на чистом css, а это означает, что вы легко (ну почти легко) сможете ее изменить под ваши потребности. Кстати, обрати внимание на тень от macbook. И эта тень выглядит очень естественно. Более того, она падет на текст. И вы ждете когда текст откроется, чтобы прочитать его. В таких случаях говорят - залипательно. Но и это еще не все. Вы обратили внимание, что на экране macbook отображается логотип нашего сайта. А еще обратите внимание на тень, которая отбрасывается на экран. А как вам логотип Apple? Наблюдая за повадками macbook вы застряли на этой страничке, что и требовалось по сути.

Для справки: Ноутбук macbook pro i9 оснащен 6-ядерным Intel Core i9 2,9 GHz и увеличен объем оперативной памяти в два раза - 32 Gb LPDDR4 (ранее в ноутбуках Apple использовалась память LPDDR3), работающая на частоте 2400 МГц (было 2133 МГц)
 Похожие публикации: CSS

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]