Магия CSS #7 — Презентация Apple 2019 и крутая анимация для сайта

Автор Zhanna Belchenko
Магия CSS #7 — Презентация Apple 2019 и крутая анимация для сайта

Прошла презентация Apple и все наверняка уже посмотрели новинки представленные на apple.com возможно кто-то до сих пор не понимает как команда.

Тим Кука додумалась вместить треугольник в квадрат. Славе своим перфекционизмом кстати. Напишите в комментариях.

Что вы думаете о новой продукции которая.

Представила компания Apple. Но — это видео не об этом многие. Из года в год выдается одним и тем же вопросом на фриланс биржах то и дело использовать формулировку сделать сайт как у Apple. Поэтому в этом видеоуроке из серии молись с я покажу на примере. Как из небольших мелочей сайт который больше похож на презентацию созданное с целью продать товар спасибо. Дмитрию автору канала стене в твоём влага за то, что подкинул идею для создания видеоролика в этом видео показать как анимировать элементы на примере страницы где представлен iPad, а именно мы разберём небольшие элементы которые у нас находятся на этом слайдер как мы видим они постоянно циклические обновляются и мы разберём. Как делать такой же у себя на своих сайтах эту страницу я обязательно оставлю под видеороликом. Чтобы могли более детально всё про смотреть и повторять за мной всё то, что я буду показывать в этом видеоролике традиционно всё о чём я буду говорить я буду показывать на. КПП также я буду совместно работать непосредственно с этим сайтом чтобы показывать вам так и откуда берутся все стили которые используют команда Apple вместе с вами я хотел бы вот такую иконку мы её прямо выдерни matsuda из сайта и добавим ноокат дополнительную свою картинку чтобы создать некий образ того, что мы будем анимировать и так мы создадим контейнер бокс и внутреннего у нас будет находиться изображение, но не Apple. А тот который мы самостоятельно установим из интернета специально для нашего видео. Я подобрала тематическое изображение и нам остается только правой кнопкой мыши достать к этому изображению. Мы выбираем пункт. Открыть изображение в новой вкладке копируем путь переходим. Славка тыв attribute Source добавляю нашу картинку вот таким образом и пока больше катман на этом этапе мы трогать не будем. Теперь давайте я расскажу. На чём строится сама картинка которая у нас анимируется здесь во-первых. Прежде всего я предлагаю найти через инспектор путь. Непосредственно Каха для этого мы нажимаем на inspect и далее. Мы должны найти изображение так как у нас несколько слоев в данном слайде и они перекрываются и так давай сейчас я найду быстренько этот момент и так наш элемент был скрыт в кеге пива и сама находится тоже в этом же теги. Почему команда Apple использовала. Именно его они. Иди в либо какой-либо иной так — это было сделано с точки зрения семантики данный тег используется для группирования любых элементов в например изображён подписи к ним и в данном случае мы — это как раз и видим у нас используются изображение плюс кекс. Однако текста. У нас заложен не в отдельном тайге ABBA Tribute. В данный атрибут находится здесь и так раз мы нашли этот элемент то давайте теперь посмотрим какие стили для него конечно же для него мы используем топлива. Это значит, что мы используем в. Абсолют, что в принципе логично так как у нас все элементы расположены в строгом порядке, а их сумма была установить так чтобы они прилегали в конкретной части страницы и самой изображение. Как вы видите находится размещены по локальной ссылки. Я предлагаю. Открыть изображение посмотреть выглядит для этого мы нажимаем правую кнопку мыши и нажимаем на открыть в новой вкладке. К сожалению в браузере мне стоит темная тема. Однако Я надеюсь в этом видеоролике будет видно как отрисовывается данное изображение. Однако мы можем посмотреть, что вторым методом и того чтобы посмотреть. Это изображение давайте мы изменим вид окна. Открой в правой его части отодвинь ним и нажимаем на вкладку Network. Я теперь наша цель найти — это изображение вот таким образом выглядят наши изображение и. Обратите внимание, что она здесь как бы отрисовывается да конечно которые мы видим на сайте. Это говорит о том, что в данном случае используется метод анимации. Как я и говорила — это изображением и выделением из сайта Apple и попробуем его тоже анимировать в нашем катка поэтому сохраняемого можем задать мой любое имя потому, что отдали для того чтобы нам работать с ним мы его под на этот сервис чтобы получить ссылку которую мы уже стоим в катуаре. Но это. Мы также сделаем чуть позже. Теперь давайте вернемся на сайт Apple и посмотрим какие стили используются ещё не выяснили используется background Image background repeat где мы отключаем повтор этого изображения также открыть полную версию этого сайта и ещё раз перезагрузить страницу так и стели здесь постоянно меняется в зависимости от вида отображения и так давайте код открываем картинку для наглядности. Вот она у нас находится здесь и так, что мы видим. Мы видим включенную анимацию — это отключен и перейдем сюда ниже то видим полную запись анимации которая состоит из имени анимации вот такой вот длины название дали время самой анимации. То есть у нас весь цикл проходит за 5 секунд также эта функция анимация который называется степс One Touch он проходит один непрерывный цикл и применяется значение анимация мат который говорит о том как у нас будет изменяться состояние элемента до и после воспроизведения самой.

0 комментариев
0

Читайте также