Адаптивная верстка Landing Page | Создание анимированного прилоудера. #1

Автор Georgiy Dronov
Адаптивная верстка Landing Page | Создание анимированного прилоудера. #1

Всем привет.

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

Задавай свои вопросы и самые интересные комментарии.

Я возможно столбы ролик погнали. С чего нужно начать конечно же нам нужно начать создание папки создаем папку следующее, что нам нужно сделать — это открыть соответственно заходим View синтаксис с. Димой документ очень удобно то есть не надо сохранять у нас сразу нужно будет сохранена mlf прописываем скелет дабы сократить время с онлайн позволяет нам максимально быстро — это всё сделать даём utf-8 кодировку Python назовём так и мы в принципе можем сразу же подключить стили конечно пока их не создали, но ну подключён как обычно style.css так с чего мы начнём мы с вами начнем создание анимации то есть мы с вами создадим вот эту анимацию прелоадера то есть мы создадим свою Lauder начинаем и создание класса стоимость султаном закрыть так всё. Давайте сохраним com. МТС controls вот эту папку назовём. Яндекс Яндекс. Всё, что мы создали. Давайте теперь создадим команд style.css тоже самое мы заходим фу синтаксис CSS начинаем конечно же. Бади Бади Flow X hidan — это нужно чтобы не было. Вот горизонтальной прокрутки внизу вот тут вот есть. Нижняя прокручивать мы можем видеть объект поставили Hitman то есть скрыть у нас не будет рублёвки нас будет. Вот так обрезано вот поэтому на самом деле не нужна у нас будет адаптивном — это в принципе не нужен. Так двигаемся дальше. Давайте теперь прописан для класса Open наши вот открывающуюся открывай прелоадера pointer-events pointer-events — это чтобы не было. Знаете Вот как вот здесь вот блин когда мы носок ножом пальчик такой появляется типа действие. Какой — это мы можем нажать здесь никаких действий не будет произведение. Никита объекты будет по курсу обычной 10.000 максимальный знаем заезда — это слой на слой под слоем то есть вот — это будет Open будет на самом верху то есть он не будет первым слоем. Так давайте мы сохраним тоже не знаем style.css всё — это мы сохранили давайте мы в принципе можем посмотреть, что у нас есть на данный момент открываем нас пока ничего нет, но мы можем проверить объект посмотреть всё ли у нас тут есть выход у нас впереди уже подключены в моде смотрим там же у нас есть опыт. Ну вот всё уже тут видно так давайте дальше пустой прозрачный фон у нас есть идём теперь прописываем класс для VR. Советов копировать класса чтобы не допустить ошибок можно так прописать на — это вот допустил ошибку так делаем. Абсолют так ширина высота по 100% с сайта мы сделали так и вот новое свойство анимейшн как новая вы в прошлый урок не увидели просто здесь она новая необычная 1С — это у нас анимация то есть мы сейчас для опыта название нашей анимация название сценария так сказать мы будем сейчас прописывать анимейшн Open. Вот, что значит Out Animation медленно начинается медленно заканчивается следующее, что мы сделаем — это зададим свойства для loading так как у нас там — это у нас идёт решётка не.. Так мы прописали свойства для лобзика для нашего вот этого кружочка который будет кружиться, но в принципе всё понятно. если — это ты полосочки будет украл. Это белая которая будет бегать. Вот и тут у нас понимаешь опять мы сейчас зададим сценарий и тут есть Out опять же медленно начинается и заканчивается find повтор повторялось. Так теперь мы сейчас сдадим с вами сценарий для. Вот именно кружочка сценария вот мы задались цена Spin 1 заниматься чтобы именно воспроизводилось, что трансформация 360 градусов по кругу. Давайте посмотрим в каждом и ничего не увидим потому, что мы ещё пока не прописали фон так следующее свойство и класс — это Open опять же наш имбирем прописываем свойства для второго. Валера вот уже для этого есть 1. У нас есть теперь 2 мы прописали для второго наши. Валера то есть мы можем в принципе сделать написать vr2, но мы просто сделали, что 2 млрд Child применяться свойства фон с индексом будет самое главное анимация 1. Секунда spfx в ряд. Ну в принципе онлайн блог. конечно гораздо больше твой снова сейчас используют. Ну и всё по центру. Сейчас посмотрим отобразилось она что-нибудь так у нас пока есть фон вот наш уже кружочек если вспомнил. Лудинг свойства. У нас тут имеются нету наш loading посмотреть вот здесь у нас уже есть какие-то команды. Так давайте последнее, что нам осталось сделать — это прописать сценарий анимации опять же я возьму отсюда ребят скопирую по 150 раз одно и тоже не писать просто я задам анимация для окон всё про писали сценарий, что при загрузке 0 60 90 9%. То есть вчера у нас короче он потом. Он исчезает ещё,. Ну посмотрим так фон у нас исчезает. Через секунду. Всё круто то есть он от темного становится светлым почему-то не работает у нас loading. Давай сейчас смотрим. Почему он не работает. Если увидите ошибки. Ничего страшного в этом нет. И тебе даже я встаю. Хотя я ранее уже достал этот макет меня есть ошибки на ошибки. Это хорошо благодаря им мы только учимся всё ребята я нашёл ошибку ошибка заключалась в том, что я написал We bleed. А надо выпит.

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

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