Райля Имельбаева

Добавлено 2 недели назад в вязалки рецепты

180327 Мастерская 5 Анимация и эффекты на сайте

180327 Мастерская 5 Анимация и эффекты на сайте  Подробнее »

 
Текст из видео:
  • 00:00:00: [музыка] [музыка]
  • 00:00:30: [музыка]
  • 00:01:09: [музыка] [музыка]
  • 00:01:47: 1 2 35 добрый вечер всем приветствую кто слушает нас в прямом эфире приветствую
  • 00:02:20: всех кто смотрит нас в записи таких людей тоже очень много и я прошу тех кто в прямом эфире поставьте в чат от нуля до десяти чтобы я увидел что мой голос и мое изображение до вас долетает а пока вы пишете десяточки и скажем так готовитесь к занятию ментально морально я вам расскажу вкратце очень быстро историю которая
  • 00:02:50: произошла миллиард лет назад я тогда проходил обучение у репетитора то есть это был 10 11 класс под такое я ездил к репетитору по физике и по математике для того чтобы поступать в институт и один раз была жуткая пурга жуткое и я даже думал не ехать и но так как были заплачены дичайшие деньги у нас было почасовая оплата то есть моя мама
  • 00:03:22: платила почасовую оплату и я поехал естественно ехать нужно было на часа полтора с двумя с тремя пересадками да с тремя пересадками в один конец и я очень сильно замерз более того я приехал очень рано и так как я парень скромные я не стал звонить в дверь стоял в подъезде продолжал мерзнуть и вот началось занятия мы сидим она занималась три человека мы сидим преподавательница
  • 00:03:53: сидит рядом у нее дома занимались а за окном бушует пурга метель так что окна трясутся ну очень сильно и пурга была и она глядя на меня говорит всем собравшимся она говорит что мальчики мы бы там были только мальчики мальчики чтобы не происходило на улице чтобы не происходило в этом мире забудьте обо всем и сосредоточтесь в
  • 00:04:25: этот час на учебе вот в этом самом месте где вы сидите сейчас здесь тепло уютно хотите чай я вам сейчас сделаю но нужно сосредоточиться на учебе потому что это очень важно и я очень хорошо запомнил эти слова что действительно несмотря на то что происходит во всем мире раз уж мы чем-то занимаемся на этом нужно фокусироваться и я жду от вас
  • 00:04:55: сегодня что вы сфокусирована будете смотреть это занятие это первый момент второй момент это то что татьяна батурина самом первом сообщении написала что у нее там какие-то неполадки с точками остановки давайте друзья поступим следующим образом если останется время у меня то я в конце расскажу вам про точки остановки но это
  • 00:05:25: я вам предупреждаю сразу это для мега мозгов это задание для мега мозгов вам ксену не каждому оно будет интересным но в конце если я вдруг забуду про точки остановки мне напомните и я расскажу каких сделать ну как бы я отвечу татьяне батуриной но и плюс для вас будет какая-то дополнительная информация это момент номер два момент номер три следующий владимир жигалов наш ученик создал вот такую pdf инструкцию и выложил выложил
  • 00:05:58: ее в skype чате это как загрузить сайт на хостинг владимиру большое спасибо за то что проделал эту работу и я с вами делюсь этой ссылкой пока в чате берите забит но забирайте ее потом будете просматривать в час сейчас ничего не пишите вот если промахнулись или еще что-то ну попросите владимира жигалова или коллег
  • 00:06:29: однокурсников по этому курсу попросите инструкцию владимира жигалова по ну как загружать файлы на хостинг это у нас момент номер два организационный можно так сказать и ну и собственно наверное все давайте то на начинать смотрите сегодняшнее занятие она будет не не длинным коротким я буду ну покажу вам естественно разумеется
  • 00:06:59: анонсированную мной и анимацию покажу вам несколько примеров несколько упражнений делая которые вы не только освоить и анимацию но еще и познаете новые функции adobe muse которые могут пригодиться вам в дальнейшей вашей карьере создателя сайтов если вы захотите продолжать это дело сегодня же сделаем кнопки на сайт и собственно вот и все занятия и тем самым
  • 00:07:32: мы финале мы сегодня зафиналим полностью сайт единственная мы к нему еще вернемся когда мы с вами создадим группу во вконтакте напишите те у кого группы нет напишите группы нет у кого группа есть во вконтакте ничего пожалуйста не пишите вот прям сейчас пишем группы нет те у кого во вконтакте нет группы мы с вместе с вами на одном из занятий создадим группу наполним ее контентом я скажу что
  • 00:08:05: но что должно быть группе обязательно научу вас оформлять посты шапку оформим ну то есть сделаем разделы в ней той будет полноценная группа и мы ее свяжемся с сайтом то есть сеть сегодня мы final им сайт все закончили и еще один раз мы к нему вернемся в тот момент когда создадим группу чтобы группу привязать кнопкам на сайте так смотрим группы нет
  • 00:08:35: группы нет отлично все многих группы нет значит будет значит будет что же друзья давайте тогда потихоньку начинать давайте поступим так я покажу как создать и кнопки это довольно быстро покажу как создать кнопки у кого группы есть сразу же привяжите группам своим у кого нет он никуда не привязывайте пусть кнопки будут просто нарисованы потом
  • 00:09:05: привяжите и затем я показываю анимацию и после этого дают домашнее задание и отпускаю вас свободное плавание до завтрашнего дня окей что ж давайте в чат нолики 5 нулей в чат и я начинаю и я начинаю смотрите в раздаточных материалах сегодня будет
  • 00:09:36: информации и несколько больше смотрите сколько в раздаточных материалов сколько картинок вы получите сегодняшним заданием занятиям а начинаю я с файла пример 2 news который у вас должен быть уже готов это тот на котором мы остановились рисовать сайт вот я его открываю и чтоб его не испортить я сохраняю его как
  • 00:10:08: пример 3 ну то есть третье занятие третье занятия что же дальше я рисую кнопки смотрите чтобы мне нарисовать кнопку а для чего нужны кнопки смотрите мы когда просматриваем сайт мы читаем информацию пролистываем экраны и все классно потому что здесь же указан номер телефона
  • 00:10:41: правильно здесь же указан e-mail то есть если человек захочет он просто пас они правильно наберет номер и позволю но давайте предстоя с моделирующая с ситуацию что вот он я посетитель смотрю на сайт начиная его просматривать и вот в этот момент когда я смотрю на текст отбор лучших представителей меня отвлек телефон я взял трубку алё алё да да и ушел и ушел то есть я потерял нить разговора но смысле нить повествование на сайте именно поэтому
  • 00:11:13: а вторая ситуация 2 ситуации я просматриваю сайт досмотрел вот до этого момента или вот до этого момента досмотрел и в эту секунду я уже хочу заказать заказать услугу мне понравилось что здесь вот есть красивые подарочные упаковки и в эту самую секунду я хочу заказать и если я если заказать и никак не могу нет такой возможности разработчик сайта не предоставил такой возможности я продолжу дальше листать
  • 00:11:44: и могу забыть почему я захотел заказать именно в ту секунду когда я вам показал так вот по именно поэтому на каждом экране должна быть кнопка то есть на каждом экране должна быть . захвата контакта посетителей грубо говоря здесь должна быть кнопка должна быть следующий экран должна быть должна быть должна быть должна быть должна быть видите на каждом экране должно быть по кнопке чтобы когда бы человек не захотел
  • 00:12:15: он мог на что-то нажать ok как рисуется кнопка смотрите я выбираю вот этот текст дайте затем я нажимаю библиотеку мини-приложений здесь вот есть категории я раскрываю кнопки один момент вот так курсор побольше смотрите я
  • 00:12:47: раскрываю кнопки и беру кнопку состояния вот она кнопку состояния перетаскиваю на на сайт вот я и поставил смотреть такая серенькая невзрачная кнопка и сейчас я ее настроя на ваши глаза давайте я сделаю масштаб побольше увеличительное стекло чтоб вам было поближе видно вот такая кнопка 1 первое что я делаю я нажимаю на ней проучился правый клик делаю и нажимаю отменить все
  • 00:13:18: использованные стили все она становится прозрачной но тем не менее это все еще кнопка дальше смотреть я второй раз щелкаю по центру здесь текст написан вот я текст выбрал правый клик отменить все использованные стилях хлоп и того смотрите контур кнопки у меня есть и внутри него есть те когда я перемещаю контур текст естественно внутри перемещается вместе со мной давайте мы сделаем ей заливку заливку ну покрасим ее в какой-нибудь
  • 00:13:50: свет по цвету скажу следующее она должна быть достаточно яркой и выделяться на фоне всего остального что есть на сайте у нас зеленоватый фон темно-зеленого ты фон у вас я не знаю какого он цвета то есть каждый делал что-то свое и в данном конкретном случае подойдет примерно вот такой желтый цвет ярко желтый цвет выбираем и и тот же цвет подойдет для белого фона то есть когда я вот здесь
  • 00:14:20: буду размещать эту кнопку он тоже подойдет хорошо что же смотрите я ее покрасил в желтый цвет отлично теперь смотрите я иду в перспективу и ширину кнопки ставлю 220 220 пикселей затем высота 50 пусть остается 50 далее я у этой кнопки закругляя углы вот иду сюда и ставлю радиус 5 как закруглять углы вы
  • 00:14:50: уже знаете вот я их закруглил далее давайте с текстом разберемся текст я ставлю вот так от края до края в кнопке затем я выделяю его ставлю размер 16 и выбираю pt sans the sands регуляр и делаю его посередине вот так давайте в тексте в настройках текста мы сделаем его жирным и большими
  • 00:15:23: буквами заглавными буквами чтобы все было написано и я здесь сделаю следующее надпись сделать заказ вот так вроде бы все хорошо но давайте мы добавим еще один штришок который сделает нашу кнопку но более похожее на кнопку смотрите я ее выделяю еду в обводку открываю обводку и
  • 00:15:53: толщину вот здесь вот есть толщина я убираю вот этот замочек вот раз нажал и убрал его разъединил и вот здесь вот в этом вот этот параметр я ставлю 3 то есть это означает 3 пикселя внизу вот видите до 3 пикселя внизу поста я теперь смотрите у этой обводки давайте сделаем цвет не черный ну вот кстати неплохой такой оранжевый темно-оранжевый какой-то
  • 00:16:27: вот такой как то так вот так вот ok все осмотрите кнопка готова посередине смотрите внимательно когда вы будете делать кнопку не делайте вот такую ошибку вот это неправильная кнопка нужно чтобы текст вот этот был четко по середине у кнопки ну посередине по высоте кнопки вот так тогда будет красота неописуемая вот так все я
  • 00:16:58: возвращаю масштаб сто процентов делаем вот у нас такая кнопка давайте посмотрим как оно смотрится смотрится интересно и сейчас моя задача размножить ее по всему сайту как я ее буду разумно жевать умножить смотрите я ее выделяю и нажимаю control x я таким образом ее вырезал но news ее запомнил у себя в
  • 00:17:30: голове теперь смотрите я беру вот этот текст двойной клик два раза интер control v и вставляю прям в текст внутрь текста вставляю эту кнопку когда я вставлял у меня опустился вниз фотография и вот эта надпись я удерживая shift выделяем фотку удерживая shift выделяю вот эту мечту но это обращение и поднимаю наверх поднимая
  • 00:18:01: наверх так чтобы низ фотографии совпадал с низом вот это нижняя часть чтобы совпадал а вот так вот то есть я поднял ok давайте чуть поменьше сделаем вот так вот этот чуть повыше поднимем так вот таким образом не забываем о том что внутри памяти мьюза все еще хранится кнопка но давайте на всякий случай
  • 00:18:32: допустим ну вдруг не хранится до чтобы нам не рисковать я выделяю вот эту кнопку control c и теперь так вот это побольше кстати сделать и теперь она у меня точно внутри памяти теперь смотрите я идут сюда в текстовый блок 1 2 2 раза интер control в вставляю кнопку смотрите у меня когда я вставил кнопку у меня увеличивался вот этот прямоугольник видите здесь белая
  • 00:19:04: линия появилась следовательно мне нужно поменьше сделать вот поменьше вплотную к фотографии самый простой способ самый чёткий вернее я нажимаю на перспективу и просто вот в этом месте высоту ставлю 550 все он четко у нас же фотки эти 550 как вы по нити да и высота вот этого блока 550 окей дальше идем я беру вот этот текст можно кстати его увеличить текстовый фрейм и вставить и тогда вот этот блок
  • 00:19:35: не будет увеличиваться ну смысле вот эта вот белая часть увеличиваться нибудь все я вставил дальше идем вот он второй побольше делаю текстовый фрейм чтобы не трогать вот этот блок смотрите вот я щас control z нажму control z если у меня будет маленький вот этот блок и я начну его редактировать и интер ставить видите у
  • 00:20:06: меня увеличивается вот этот то есть как бы продавливается весь сайт вниз поэтому лучше его сделать побольше чтобы ничего не продавливалась control вы нажали все отлично дальше идем здесь мы кнопку ставим так часа сейчас друзья подойдите здесь мы кнопку поставим вот в это место
  • 00:20:37: окей теперь смотрите у тех у кого есть все мы кнопки поставили давайте посмотрим как оно будет выглядеть кнопка есть кнопка есть все очень цивильно и аккуратно вот здесь вылезла видите белое надо подправить идем отсюда 550 так побольше делаем все
  • 00:21:07: то есть смотрите если у вас вылазит а размер и вот как сейчас было смотрите в прямом эфире он показал смотрите видите в мезе нормальное нормально все да здесь белой линии нет вот я на прямоугольник и щелкаю и он высотой 550 но когда я просматриваю браузере здесь появляется белая полоса это от того что вот этот вот фрейм текстовый недостаточно большой его чуть-чуть увеличиваю по высоте и все
  • 00:21:39: видите теперь все хорошо то есть текстовые фреймы делайте побольше все в целом здесь в целом здесь все хорошо теперь смотрите когда для тех у кого уже есть группа в вконтакте вы можете сделать следующее вы можете допустим давайте открою свою группу во вконтакте вот своей моя группа в вконтакте и допустим
  • 00:22:12: вот у меня есть здесь фотоальбом фотоальбом допустим вот фотоальбом работы учеников мастерской 3 да я его выделяю вот здесь вот ссылку сверху выделяю kontrol ц нажимая предположим у вас тоже где то есть портфолио но имеется ввиду в вашей группе есть ссылка на портфолио поэтому вот в этом месте отбор лучших представителей можно логично поставить смотреть каталог
  • 00:22:42: до написать или смотреть портфолио понимаете да окей написал я смотреть портфолио допустим вот я выбираю эту кнопку затем я иду гиперссылки водами гиперссылки вот эту стрелочку вниз нажимая и вот в это место вставляют ту ссылку которую я скопировал из группы нажимаю enter давайте теперь посмотрим как это выглядит в браузере вот смотреть
  • 00:23:14: портфолио я мышку навожу нажимаю на кнопку и попадаю в портфолио единственный минус этого подхода то что дали один из минусов этого подхода это то что я ухожу из сайта ну то есть посетитель сайт закрыл и попал в группу поэтому в данном конкретном случае не всегда я подчеркиваю это не всегда имеет смысл перекинуть человека в другое окно при нажатии на кнопку чтобы открывалась
  • 00:23:45: другое окно смотрите я нажимаю смотреть портфолио идут гиперссылки нажимаю на гиперссылку и ставлю галку вот здесь открывать ссылку в новом окне давайте посмотрим как это выглядит смотреть портфолио и она открывается в новом окне а сайт остается открытым на этом же самом месте понимаете да окей друзья смотрите следовательно что касается кнопок мы с
  • 00:24:15: вами закончили и по сути вернемся к сайту а ну анимацию еще сделаем и по сути вы сейчас понимаете из чего состоит коммерческий сайт который призван продавать первое это его тизер промо тизер подарок это главный экран затем это этажи этажи которые рассказывают историю этажей может быть
  • 00:24:46: много и они могут быть разного формата я посмотрю если мы будем успевать я посвящу отдельное занятие как можно сюда каталог сделать ну то есть один этаж этаж киры каталог sears портфолио ну вот как то так если будем успевать подчеркивают но в целом сейчас вы уже умеете пользоваться ну то есть вы вы уже умеете создавать сайты дальше что еще должно быть повторяет тизер это это подарок затем должно быть несколько
  • 00:25:18: этажей рассказывающий историю этажи должны быть красиво оформлены это сочные фотографии и емкие лаконичные тексты и третий элемент эта кнопка на каждом экране на каждом экране кнопка вот здесь допустим получите подарок или забрать подарок здесь написать нам здесь смотреть портфолио здесь еще что-то понимаете то есть кнопка не сделать заказ сделать заказ
  • 00:25:48: сделать заказ или закажи закажи закажи нет это скучно и банально так делают все на кнопки должно быть написано что-то персонализированное веку понимаете и на кнопках чтобы но желательно чтобы не повторялось чтобы кнопки по-разному предлагали оставить заявку и по сути получается она и подвал подвал конечно же должен быть у сайта вот и получается что сейчас вы уже обладаете всеми навыками для того чтобы
  • 00:26:18: создавать принципе любые сайты с чем я вас с чем я вас поздравляю но еще рановато потому что у нас впереди еще есть мега украшения это анимация друзья напишите в чате единички напишите единички в чате что вы меня слышали слушаете что вам с этим все понятно и мы сейчас переходим именно к анимации сергей расскажите пожалуйста как сделать
  • 00:26:50: портфолио как у татьяны батуриной а я вот честно говоря не помню как у батурина и татьяны и нам нам сейчас нужно по программе идти поэтому пойдем по программе так окей смотрите давайте тогда двигаться я временно этот сайт закрывая смотрите пример 3 сохраняю я его и закрываю пока теперь
  • 00:27:20: создаю новый проект нажимаю создать столбцов 12 ширина 1120 постоянная ширина постоянная ширина это важно окей все я создал новый проект давайте я себя уберу чтоб вам было видно итак смотрите как работ
  • 00:27:52: эта анимация в adobe muse анимация в adobe muse the animation о которой мы сегодня будем с вами разговаривать она работает только в одном случае а именно при прокрутке с сайта вот смотрите как вы знаете сайт это несколько этажей давайте я их сделал несколько этажей 1 этаж я вам кстати рекомендую вот эти уроки
  • 00:28:22: потом повторить вот прям как я кубики рисую иван я рекомендую точно также повторить чтобы закрепить вот смотрите у меня есть этажи и если я не буду ничего двигать на сайте вот он стоит вот так у никакой анимации происходить не будет я говорю сейчас о об анимации ну о том типе анимации которые мы проходим сейчас но как только я начинаю двигать
  • 00:28:52: вверх-вниз проматывать сайт вверх вниз вот в момент прокрутки мы можем включить эффекты один из эффектов вы можете наблюдать на уже готовом сайте это когда сзади смотрите я прокручиваю меняется задний фон видите это то что вы уже умеете делать это один из элементов анимации и он не работает без прокрутки вот я ничего не делаю и ничего на сайте не происходит но как только я начал
  • 00:29:24: двигать фон начинает меняться вот о таких эффектах мы сегодня и будем с вами разговаривать ok смотрите я нарисовал только что я нарисовал только что три этажа давайте чтобы в полной мере понять работу анимации нам нужно нарисовать много этажей чтобы можно было прокручивать ну подольше прокручивать смотрите давайте поступим следующим образом я это живот 3 нарисовал но
  • 00:29:54: давайте я их сделаю следующем смотрите я в заливку еду убираю цвет заливки изображение добавить и я вставлю клауд один облачко 1.png вот вставляю и говорю ему по размеру окна все дальше следующий этаж заливка убираю цвет нажимая клауд два друга и облачко я говорю ему по размеру окна и
  • 00:30:25: прибиваю в правую часть вот сюда дальше следующий этаж заливка убрать цвет и клауд 3 клауд 3 я говорю ему по размеру окна и вот здесь пускай будет весьма такие облачка как бы да давайте я их все выделю удерживая shift выделяя первое второе и третье я выделил три облачко kontrol ц
  • 00:30:56: control в нажимая и он три объекта мне скопировал и я их опускают самый низ ну я думаю давайте посмотрим как это будет выглядеть в браузере вот у нас такой сайт вот такие облачка давайте еще один раз я скопирую самый низ мотаю control в еще раз он вставил то есть я чтобы побольше это жизнь делать вот так смотрим облака облака
  • 00:31:31: все отлично теперь для того чтобы добавить атмосферу я сделаю следующее все картинки вы получите повторяю смотрите я щелкаю в свободном месте чтобы если у меня что-то выделено чтобы снять выделение щелкают свободном месте и делаю здесь в заливка в браузере нажимаю изображение добавить я добавляю night background gif открыть и ставлю
  • 00:32:03: здесь посередине положение посередине и заполнение режим заполнения прокрутку я убираю галочку прокрутки я убираю что у нас получится смотрите у нас получается облака а сзади ночное небо со звездами это просто обычная гифка которую я скачал из интернета вы можете ввести здесь в гугл-картинках например stars
  • 00:32:33: gif stars gif и подобрать себе какую-то не машку вот пожалуйста анимация просто берете сохраняете и потом какия добавляете в news мне вот это нравится смотрите у нас задний фон со звездами и я прокручивая сайт у меня облачка прокручиваются теперь смотрите давайте сделаем следующее я беру рисуем
  • 00:33:03: прямоугольник слой 1 да я сверху над слоем один рисую прямоугольник ну давайте вот такого размера пусть он будет я его сразу назову ракета ракета еду в заливку добавить изображение и ищу ракет и найду ракет rocket png открыть вот у меня добавляется ракета я
  • 00:33:34: иду в заливку давайте режим сделаем по размеру окна лучше заполнение нет давайте по размеру окна посередине положение все вот такая будет ракета что же смотрите это объект отдельно то есть облака и так далее это все ok но у меня есть ракета и я ее поставил именно в это место она прям ее нос ракеты начинается прям где заканчивается
  • 00:34:05: вот это облако видите давайте посмотри она стоит четко по середине давайте посмотрим как это выглядит в браузере смотрите ее нос видите щетка где облака заканчивается ее нос и когда я начинаю проматывать ракета движется так же как и движутся облака ну то есть по сути ну как бы ничего не меняется все нормально давайте мы сейчас добавим с вами эффекты прокрутки
  • 00:34:35: анимацию я выбираю ракету выбрал ракету и нажимаю вот сюда эффекты прокрутки выбираю и мне нужно щелкнуть вот на эту вкладку вкладка перемещения и вот здесь поставить галочку перемещение теперь смотрите внимательно давайте я сделаю следующее не важно какие у вас здесь параметры сейчас ну то есть когда вы это сделаете неважно какие
  • 00:35:05: параметры у вас там будут давайте принудительно поставим стрелка вверх до должна быть нажата вот это ставлю единичку суда стрелка вправо я ставлю нолик то есть смотрите стрелка вверх единичка дальше здесь не важно пока что стоит вот здесь в конечном перемещение вот конечное перемещение стрелка вверх остается единичка и второе значение нолик еще раз ракета выбрана стрелка
  • 00:35:36: вверх единица стрелка вправо 0 стрелка вверх единица стрелка вправо 0 давайте посмотрим как это будет выглядеть ничего не изменилось видите да абсолютно ничего не изменилось так и должно быть вот я сейчас поставил параметры когда ничего не меняется запоминаем их единичка 0 единичка 0 все вот эти
  • 00:36:10: параметры когда ракета будет двигаться так же как мы проматываем есть такое понятие как скорость прокрутки то есть вот как я проматываю это скорость до и если стоит единица единичка вот здесь стоит это означает двигаться точно такой же скоростью как проматывает сайт давайте я сделаю следующее вот в этом месте я поставлю двойку вот в этом месте я поставлю двойку
  • 00:36:42: двойка означает двигаться в два раза быстрее чем я проматываю сайт смотрите вот у нас ракета видите ракету я начинаю проматывать и она двигается быстрее видите быстрее чем я проматываю сайт я проматываю со скорость которой я проматываю сайт эта скорость облаков ракета движется быстрее в два раза чем я проматываю сайт давайте я поставлю
  • 00:37:14: другой параметр не два а 1 и 5 полтора раза быстрее давайте смотреть вот ракета и она двигается в полтора раза быстрее чем двигается сайт с этим понятно далее но здесь есть так называемые вот эта штука называется исходная позиция вот она вот исходная позиция что ж это
  • 00:37:45: такое а это друзья вот ракета выбрана давайте и вправо сделаю смотрите как только я включил перемещение во смотреть я выключил сейчас ничего нету ракеты дополнительных элементов управления нет но как только я включаю перемещение появляется такой носик видите вот такая вот такой элемент управления появляется ботан это и называется исходная позиция для чего она нужна
  • 00:38:17: дело в том что анимация в мейозе состоит из двух частей первая часть что происходит с объектом пока он до суда не дошел автора до этой исходной позиции а вторая анимация это что будет происходить вот с этой ракетой после того как она ее пройдет вот смотрите сейчас вы все поймете давайте так я вот эту исходную позицию сейчас помечу прямоугольником смотрите я беру
  • 00:38:47: прямоугольник вот так вот рисую его да вот она исходная позиция прямо утирается в этот прямоугольник чтоб его было лучше видно я его покрашу сейчас какой-нибудь цвет и так не то не то делаю вот заливка вот желтым цветом нормально чтобы прям видно было на ночном небе смотрите я нарисовал прямоугольник вот ракета прям вот этой исходной позиции
  • 00:39:17: она прям упирается вот в эту желтую линию до жёлтый прямоугольник давайте мы теперь посмотрим смотрите до жёлтого прямоугольника ракета будет двигаться со скоростью 1 до жёлтого прямоугольника она будет двигаться со скоростью 1 то есть будет двигаться со скоростью с сайта как с сайта прокручивая на таки будет двигаться и когда она дойдет до вот этой вот точки 263 она вот она равна смотрите начиная ее менять и вот здесь
  • 00:39:49: меняется число видите меняется то есть когда она дойдет вот до этой точки включится вторая часть анимации а вторая часть анимация будет двоечка вот здесь то есть до желтой линии ракета будет двигаться со скоростью 1 но после желтой линии она начнет летать быстрее со скоростью 2 давайте посмотрим вот ракета смотрите я двигаю и и двигаю
  • 00:40:22: и она двигается также как двигаются облака эта скорость 1 а теперь смотрите внимательно на желтую вот эту штуку жёлтый прямоугольник вы помните что где-то здесь рядом с желтым при вот этим вот жёлтой линией находится . после которой поменяется анимация ракет а поменяется она когда желтая полоска уйдет за края экрана вот за вверх смотрите ракета двигается нормально уходит . и ракета
  • 00:40:52: начинает двигаться быстрее видите смотрите до того как желтая линия на экране ра вот эта анимация с единичкой с единичной скоростью как только она ушла включается вторая часть анимации и ракета взлетает вверх видите да теперь смотрите что вообще было понятно еще вторую часть анимации вот конечное перемещение я поставлю стрелку вниз вот
  • 00:41:22: я вниз поставил стрелку было стрелка наверх я поставил вниз давайте смотреть смотрите вот ракета все окей но вторая часть анимации вниз час включится hop вниз пошла видите да таким образом вы управляете что будет происходить с объектом до точки определенные и после определенной точке но смотрите чтоб она перемещалась
  • 00:41:55: вниз это в случае с ракета это катастрофа не нужно нам такого давайте мы сделаем по-другому я верну я сделаю так что ракета понижая ее опущу так вот так сделаю чтобы вот здесь она двигалась со скоростью полтора чтобы она на экране двигаясь со скоростью полтора а потом
  • 00:42:25: взрыва выси со скоростью 3 давайте смотреть вот ракета она двигается смотрите на фоне облака она двигается со скоростью полтора и потом ой вниз пошла опять сейчас секунду наверх стрелка наверх двигается и потом резко взлетает вверх смотрите двигается и потом резко вверх взлетает видите таким образом друзья вы
  • 00:42:56: можете управлять элементами на сайте и создавать то анимацию которая вам интересна давайте я с дублирую эту ракету конечно вот это мы можем сейчас удалить вот этот желтый прямоугольник мы удаляем я его показал вам для чтобы вы поняли в какой момент включается вторая часть анимации смотрите без всяких желтых элементов ракета взлетает ввысь теперь смотрите я беру эту ракету
  • 00:43:26: kontrol ц control в копирую-вставляю вот здесь ее увеличиваю давайте сделаем гигантскую ракету большую-большую при большую ракету вот такую это получается только космический корабль
  • 00:43:56: давайте посмотрим как она себя будет вести то есть она ракета большая которая до вот этой точки будет двигаться со скоростью полтора окей а потом будет двигаться со скоростью не 3 но давайте сделаем тоже полтора вот так вот сейчас проверим смотрите я запускаю
  • 00:44:27: ракета 1 взлетает 2 появляется и двигается со скоростью полтора видите да но что если нам хочется почему мы только вверх-вниз управляем давайте мы добавим движение в сторону пусть эта ракета давайте мы ее повыше поднимем пусть эта ракета до первой точке двигается полтора скорость будет а
  • 00:44:57: во второе у после перехода точки вот этой исходной позиции она будет двоечка то есть по быстрее двигаться вверх и при этом еще начнет уходить влево вот я единичку поставил и нажимаю влево давайте смотреть видите начала уходить левого смотрите вот я сейчас я поставлю желтый прямоугольник
  • 00:45:27: вот в этом месте когда вот это место коснется края экрана ракета начнет уходить влево я рисую прямоугольник желтый чтобы вам было понятно вот . прям жёлтый прямоугольник упирается вот он желтый этот прямоугольник смотрите вот ракета летит большая и в этот момент она начинает уходить влево и так вы можете сделать каждым объектом соб с облаками
  • 00:46:00: чтоб облака начали расходиться понимаете то есть когда человек крутит мышку у него облака начинают расходиться например понимаете друзья напишите свои впечатления об этом маленьком уроки прям сейчас пишите потому что впереди следующий урок это была демонстрация с ракетой вы ее выполните вы ее выполнить я сейчас будет другая демонстрация тройка пускай
  • 00:46:32: будет давайте свои впечатления что вы меня смотрите за одну связь проверим вот такая классная анимация с смотрите у нас получается так что сзади сзади есть фон потом есть фон из облаков 3 получается это у нас ракеты то есть как бы три слоя которые действуют друг с
  • 00:47:03: другом и ну и вы пишете сейчас воу воу мощно молодцы именно такой эффект я и добивался и смотрите [музыка] голливудские спецэффекты делаются точно так же то есть создается иллюзия то есть у вас создается иллюзия что здесь как бы 3d
  • 00:47:34: а на самом деле это декорации которые [музыка] которые созданы архитектором скажем так и которые ну производят эффект wow вот знаете как работает голливуд ok друзья давайте это не все это как бы у нас 1 1 урок теперь следующее смотрите я беру убивая вот этот проект он нам уже не нужен и начинаю
  • 00:48:04: и начинаю делать следующую демонстрацию смотрите внимательно я создаю новый проект столбцов 12 постоянная ширина 1120 ok а вот так вот открываем и теперь смотрите как вы уже знаете анимация анимация работает в музе таким образом что она должна быть прокрутка если
  • 00:48:36: прокрутке нет ничего работать не будет ну естественно давайте мы тогда чуть побольше сделаем размер этого сайта по высоте и сделаем теперь следующее смотрите я беру прямоугольник беру прямоугольники примерно на расстоянии 750 вот смотрите здесь вот 750 написано да вот здесь в полосы прокрутки давайте я вот примерно здесь нарисую
  • 00:49:09: прямоугольник от края до края и покрашу его в коричневый цвет как выбрать да еще вот коричневый цвет окей теперь я сделаю следующее я возьму надпись напишу сайт про аэропорт аэропорт выделяем его по середине делаем
  • 00:49:39: семьдесят два пикселя вот такая надпись будет на экране и стоять и льна будет примерно вот здесь окей дальше смотрите я делаю следующее я беру прямоугольник и рисую его вот в этом месте ну пока так вот так я его нарисую еду в заливку изображение добавить и выбираю изображение
  • 00:50:09: airport один airport 1 или air пор 2 выберите сами ну давайте airport 2 открыть у меня появляется здесь здание аэропорта я делаю заполнение по размеру окна вот здесь по размеру окна посередине пусть будет все у меня здание аэропорта только на воздухе висит ей ужасно землю поставлю вот так вот сделаю примерно все дальше смотрите следующие
  • 00:50:40: я рисую вот здесь прямоугольник вот так иду заливку изображение добавить и ищу airport tower башня рапортов ская башня выбираю вот эту ir port tower airport tower 3 открыть далее я делаю по размеру окна посередине пусть будет все отлично теперь смотрите снова
  • 00:51:12: оптическую иллюзию сделаем с вами то есть выглядит все ну как и такая декорация до определенная симпатично все смотрится давайте мы сделаем оптическую иллюзию сделаем так чтобы аэропорт был как бы в далеке я щелкаю по аэропорту еду в заливку и делаю ему непрозрачность ну допустим вот так вот такую 50 процентов например нет слишком сильно 60 процентов пусть
  • 00:51:46: будет смотрите то есть опять мы пытаемся ну скажем так обмануть и глаза как будто бы аэропорт находится далеко а вышка поближе видите да аэропорт подальше вышка поближе таким образом вы управляете опять же вниманием посетителя дальше смотрите что я делаю давайте возьмем текстовый блок нет текстовый блок мы брать не будем давайте мы теперь сделаем следующее сейчас соображаем я поставлю
  • 00:52:19: прямоугольник вот здесь прямоугольник заливка добавить и здесь есть plain один plain 2 plain 3 и plain 4 видите да то есть разные гифки анимации самолетов давайте плейн 3 поставим и чтобы он был вот в этом в этом вот прямоугольники
  • 00:52:51: здесь я сделаю заполнение посередине по размеру окна вот так вот давайте посмотрим как это будет выглядеть вот такой самолет на трассе на взлетной полосе давайте посмотрим вот самолет на взлетной полосе окей теперь смотрите нужно сделать буквально следующее надо включить ему
  • 00:53:21: анимацию так стоп проматываю если я вниз давайте мы еще внизу чуть нарисуем давайте мы сделаем следующее смотрите так как нам нужно добавить прокрутки еще я сделаю вот так я выделяю вот эту землю аэропорт удерживая shift и башню kontrol ц мотаю в самый низ и нажимаю control в вот так я скопировал аэропорт и начинаю
  • 00:53:52: опускать вниз ниже ниже ниже ниже ниже ниже ниже ниже ну давайте пока оставим на уровне вот чтобы здесь была тысяча семьсот написано вот в этом месте чтобы было 1700 и сразу давайте поменяем декорации башню сдвинем вот сюда аэропорт поставим вот здесь башню
  • 00:54:22: выделяем заливка airport tower выбираем вторую airport tower просто ботан открыть вот такая башня будет дальше аэропорт выбираем заливка и выбираем airport 1 вот так вот открыть пальмы и так далее прозрачность уже стоит то есть аэропорт как бы вдалеке и того что мы
  • 00:54:52: имеем давайте посмотрим на сайте надпись сайт про аэропорт декорацию с аэропортом самолетик здесь машет крыльями я начинаю проматывать вниз и здесь 2 декорация тоже с аэропортом но давайте мы мы ее здесь поставили но все же давайте мы еще увеличим высоту сайта сделаем побольше вот так давайте смотрим браузере так
  • 00:55:23: проматываю и этот аэропорт уходит вверх все отлично все готово для того чтобы начать настраивать анимашку смотрите у нас есть самолет и при прокрутке при прокрутке я хочу она сначала мы ему даем эффект прокрутки я нажимаю вот я выбрал самолет эффект прокрутки перемещения ставлю галку и помните как в первый раз с ракетой я выставляю
  • 00:55:55: следующие значения 0 единиц и единица 0 1 0 1 0 пока так пока так чтобы самолет двигался вместе с сайтом видите самолет двигается с такой же скоростью как двигается сайт теперь я хочу сделать следующее давайте мы поставим чтобы вот до этой точки давайте ею помечу сейчас
  • 00:56:28: снова нарисую прямоугольник покрашу его ну чтобы вам было понятней покрашу его в красный цвет вот так и у самолета вот самолет прямо в него упирается так вот смотрите до этого прямоугольника до этого я хочу чтоб самолет двигался вправо вот по этой полосе вправо для этого я начальное перемещение стрелку вправо ставлю единичкой давайте смотреть
  • 00:57:00: и самолет начинает двигаться видите да вот этой точке он начинает двигаться видите да все и потом он останавливается а после этой точки я хочу чтобы он начал взлетать для этого вот здесь пусть продолжает двигаться вправо с единичкой но вверх с двоечка чтоб он двигался
  • 00:57:30: взлет чтоб начал смотреть вот он двигается и когда красная линия дойдет коснется в верхушке экрана самолет начнет взлетать видите да полетел вверх полетел вверх мы можем его поставить поближе вот сюда к башне вот таким образом и тогда получается что он взлетает вот здесь то есть вот он
  • 00:58:02: находится здесь news просчитывает сама его первое положение то есть смотрите мы же поместили его вот здесь вот в этой точке а он почему-то оказался то и смотрите здесь он находится почти в конце здания аэропорта а здесь почему-то в начале аэропорт аэропорт а дело в том что news прочитал где он должен находиться чтобы вот с этого места начать взлет понимаете да давайте ещё раз посмотрим самолет
  • 00:58:33: полетел вверх отлично давайте продолжать в том же духе мы возьмем скопируем этот самолет kontrol ц control v и поставим его поставим этот самолет на взлетно-посадочную полосу вот здесь пусть он стоит здесь вот так только давайте мы заливку и мы сделаем другую гнусность я самолет другой поставим
  • 00:59:04: flame 4 вот три самолета которые летят пусть они будут здесь так как они смотрят вниз вот вниз смотрят мы их сейчас подправим вот я к уголку подвожу появляется инструмент поворота и я их поворачиваю вот так чтоб они чуть чуть вверх смотри отлично теперь смотрите давайте я отсюда вот этот прямоугольник убирают там же у нас все настроено уже я
  • 00:59:34: вам рекомендую тоже выполнять эти упражнения с прямоугольником чтобы понимать как что двигается смотрите вот они эти самолеты вот прямоугольник давайте сделаем следующий я хочу чтобы до этого прямоугольника самолеты начали лететь вниз смотрите да прямоугольника они будут лететь вниз вот я показал вниз и вправо
  • 01:00:04: единичка единичка единичку то есть они будут лететь вниз и вправо давайте посмотрим этот у нас летит вверх а эти самолёты летят вниз видите и они будут лететь пока до тех пор пока вот это не коснется все она коснулась и они снова взлетают вверх но это потому что анимация от прошлого самолета осталось а мне нужно чтобы они приземлились и поехали вот сюда следовательно я выбираю вверх я делаю единичку а вправо пуская
  • 01:00:36: единичка остается короче вот в этой вот в этом положении вот у этого этих самолетиков все единички будут и 1111 и вот стрелочки вот также выставлены вниз вправо вверх вправо давайте посмотрим вот они приземляются и едут по взлетной полосе видите да едут по взлетной полосе только не слишком под большим углом
  • 01:01:06: приземляются давайте мы сделаем угол приземления так a05 можно ну-ка давайте тестировать минуту до не прям падают давайте тогда 1 и 5 окей окей здесь нужно поиграться в общем
  • 01:01:39: есть друзья уже вот эти нюансы как что падает как что это это уже вы сами по играетесь суть вы поняли так дальше дальше так смотрите следующие то есть мы сделали анимации теперь сайт
  • 01:02:11: должен рассказывать историю какую историю можно суда внедрить я вам просто сейчас но чтобы у вас фантазия разыгралась я вам чтобы что это не просто так поиграться это может быть реально сайтом для аэропорта смотрите я беру вот здесь вот текст вот так вот пишу вставляю текстовый фрейм и пишу следующие в нашем порту пассажирские самолеты взлетают взлетают и высь к небесам если
  • 01:02:52: можно так выразиться ok дальше следующий kontrol ц control в точно такой же текст я иду вниз вниз вниз самой и вставляю где-нибудь вот здесь и приземляются в любой точке мира в любой точке мира до 100 доставляя
  • 01:03:27: круглосуточно людей товары товары и продукты но грубо говоря вот так да но это естественно текст высосан из пальца для примера но смотрите что получается а получается то промо-сайт промо-сайт для аэропорта если поработать над дизайном
  • 01:03:59: этого сайта и сайт про аэропорт шифтом мощным написать задний фон сделать из облаков сделать вот здесь контур сайта ну смысле обозначить контур сайта поработать над анимациями моделей потому что их я нашел в свободном доступе а если в фотошопе нарисовать их но более крутые найти здание проработать ну то есть поработать над атмосферой да просто даже элементарно сзади в фотку
  • 01:04:30: большую фотографию красивую сзади поставить и на фоне этой фотографии аэропорт башней самолет взлетает и смотрите первый экран сайта написано там аэропорт внуково но я утрирую сейчас до в нашем аэропорту пассажирские самолеты взлетают тан тан тан тан тан и кнопкой здесь купить билет вот здесь сверху номер телефона а вот здесь сверху логотипы дескриптор понимаете включили фантазию дальше человек заходит на этот
  • 01:05:03: сайт и начинает о проматывать а тут анимашка здесь какие-нибудь тексты идут вот в этом месте какие-нибудь тексты а потом снова другой уже рапорт другая башня другой раппорт и другие самолеты приземляются видите и кнопки здесь пускай будут какие-то снова какие-то тексты пошли таким образом ваш сайт будет рассказывать историю в виде мультфильмов понимаете друзья включили фантазию от пишите в чате как вам
  • 01:05:33: понравился второй урок это урок номер два который вам нужно будет повторить для того чтобы закрепить знания по анимации где в восторге но вот детишки занимаетесь я ваши годы детишки у меня таких возможностей не было я очень любил но я прям хотел снять мультик какой нибудь пожалуйста
  • 01:06:04: все в ваших руках окей что ж друзья этих двух уроков вам вполне хватит для того чтобы пощупать анимацию для того чтобы она вам запомнилось для того чтобы вы поняли ее принципы и чтобы вы могли делать самостоятельно такие сайты можно анимацию про доставку
  • 01:06:34: сделать на сайте или про создание продукта конечно здесь уже ваша фантазия она здесь ваша фантазия она как бы безгранично можно сделать что угодно окей друзья теперь смотрите теперь смотрите давайте мы вот эти принципы сейчас применим к нашему сайту который мы делали вы будете применять их к своему сайту
  • 01:07:05: а я их применю к сайту флориста ok давайте смотреть я это закрываю ракету закрываю я этот проект закрываю пример 3 пример 3 открываем итак смотрите здесь мы сделаем здесь мы добавим сейчас анимации и и
  • 01:07:39: используем те принципы которые о которых я рассказал только что я для того чтобы не путать но не делать кашу моля шу на сайте я сделаю новый слой слои новый слой напишу его назову его а не мация и подниму наверх вот на самый верх теперь смотрите в этом самом слое я рисую прямоугольник вот такой пусть
  • 01:08:12: будет он вот таким заливку еду изображение добавить и выбираю изображение лепесток называется лепесток открыть делаю заполнение по размеру окна вернее делаю посередине пусть будет все смотрите у меня появились лепесточки вот так вот они будут здесь отображаться давайте посмотрим так стоп стоп этот вот
  • 01:08:44: у меня лепесточки здесь отображаются так отмена вот вспоминаем что нужно сделать чтобы включилась анимация нам нужно пойти в эффекты прокрутки и нажать на перемещение в первый раз когда вы включаете перемещение всегда ставьте единичку а здесь нолик здесь единичку во здесь нолик для того чтобы заставить
  • 01:09:14: для pes таки ну или тот объект анимации двигаться вместе с сайтом научить лепестки двигаться вместе с сайтом так вы не запутаетесь в анимации а вот дальше когда вы этому научили давайте сделаем так что начальное перемещение будет двоечка и конечное перемещение будет двоечка давайте смотреть смотрите я начинаю проматывать и лепестки пролетают по экрану
  • 01:09:47: видите таким образом как будто бы сзади у нас есть что-то затем следующий слой это рассказ рассказ о сайте и третий слой это по воздуху как будто бы перед монитором пролетающие лепестки видите да лепестки найдите сами или объекты которые подходят вашему сайту найдите сами в гугл-картинках я просто вел не помню сейчас я лео вес ли вес
  • 01:10:20: png листья png а нет flowers to лепи лепи лепестки png ну вот лепесточки всякие разные задним фоном здесь как пачками есть так и по одному можно найти в общем вот лепесток пожалуйста вырезанные ужину и так далее
  • 01:10:53: находите лепестки которые вам нужны png шины и качаете к себе и вот пожалуйста анимацию уже одна есть давайте мы ее скопируем kontrol ц control в поставим его давайте попробуем вот сюда поставим а больше не стесняемся лепесток три
  • 01:11:24: теперь пусть будет давайте проверим первый пошёл второй пошёл видите да их можно рядом поставить смотрите комбинируйте их можно поставить рядом причем один будет двигаться быстрее например здесь будет скорость 33 вот этот большой будет двигаться быстрее
  • 01:11:56: чем маленький давайте проверим смотрите и большой догоняет видите большой двигается быстрее чем маленький таким образом вы создаете опять же иллюзию иллюзию что большой он и реально и визуально больше он и визуально больше и двигается быстрее потому что находится ближе к но к монитору к посетителю
  • 01:12:27: вот видите какой эффект 3d 3d эффект все друзья в принципе kontrol ц control вы начинаете вот так вот заполнять сайт подобными элементами лепесток 5 давайте мы его сделаем поменьше поменьше
  • 01:12:58: скорость двоечка двоечка вот так вот kontrol ц control в заливка добавить лепесток 5 что я сделал control z control z счет я спешу заливка лепесток 5 вот такой вот лепесточек давайте мы сделаем большим и большому поставим тройку скорость 3
  • 01:13:32: чтобы он быстро передвигался но так давайте смотреть и так двигается все двигается двигается видите красота что же друзья все вот такое чудо нужно будет сделать и вам такое чудо нужно будет сделать иван
  • 01:14:03: вот люди пишут а если сделать движение вниз если вы считаете что в вашем случае что-то должно двигаться вниз можете сделать тоже будет интересный эффект поиграйтесь этим и все будет ну то есть дальше у вас уже ну как бы фан того там люди пишут вниз вниз давайте вниз делаете это как бы вы уже ваши домашкам и нужно будет вызван в ее нужно будет выполнить поэкспериментируйте друзья вот
  • 01:14:34: дальше анимация при прокрутке в мобильной версии сайт не работает я не знаю что у вас не работает юрий если вы создаете анимация работает только с фиксированной шириной вот фиксированная ширина если у вас фиксированная ширина должно все работать по идее должно быть так друзья по идее должно быть так для больших мониторов
  • 01:15:04: для больших мониторов куда можно вместить все вот здесь анимация уместно для больших мониторов для маленьких мониторов это планшеты телефоны и так далее вот оттуда лепестки эти лучше вообще убрать потому что и так экран маленький там нужно тексты размещать да вы еще тут лепестками их закроет поэтому юрий анатольевич из мобильной версии вообще убирайте
  • 01:15:34: лепестки а вы могли бы файлы программы сохранять более ранних версий а у меня нет ранней версии татьяна так друзья вопросы если есть за давайте прямо сейчас если вопросов нет я создаю для вас тему во вконтакте и завтра дам обратную связь так так так так домашнее задание давайте я этот сайт опубликую в папке 20
  • 01:16:08: the cookies так д д м а эксперт дима
  • 01:16:39: эксперт точка ру слэш 20 так друзья дыма сайт дыму сайт отправить сейчас лечат не вижу подождите я домашка публикую так в домашнее задание
  • 01:17:14: обсуждения создать домашнее задание 3 сделать анимацию на сайте типа и вот такая анимация всё другого ничего не будет задание для новичков сделать анимацию , используя готовые картинки задания для роды продвинутых
  • 01:17:46: сделать анимацию со своими картинками в принципе все так материалы для так раздаточные материалы раздаточные материалы скачать по ссылке раздаточный материал по ссылке ссылку я
  • 01:18:18: опубликую чуть позже все в этой теме создавайте вернее выкладывайте сюда свои ссылки так смотрим вопросы когда в личном кабинете откроется мастерская 3 до вам подсказали 5 апреля совершенно верно народ записи где посмотреть в личном кабинете если вы приобретали записи приобретали доступ в
  • 01:18:49: кабинет смотрите в личном кабинете сергея если сделать для мобильных без лепестков как сделать чтобы на версии для теста в лепестки остались так вы сделаете я вам сейчас покажу для тех у кого нет группы то как быть с кнопкой сейчас просто кнопку нарисуйте ссылки не делайте можно ли сохранить сайт в pdf для портфолио не понял сайт получается
  • 01:19:19: адаптивной то есть под компу телефон не только под компьютер под телефоны под планшет отдельно нужно делать это в тарифы серьезный будет урок в личном кабинете я выложу урок как сделать сайт адаптивным не терпится приняться за работу под подскажите пожалуйста почему так
  • 01:19:49: получилось на компьютере тизеры подвал во весь экран а в мобильной версии нет потому что мы мобильную версию не делали почему когда делаешь точки остановки уменьшаешь текст мобильной версии перри переходе на компьютерную версию он остается таким же мелким что я я или я что-то не так делаю яков я не знаю мне нужно увидеть это чтобы вам ответить на этот вопрос в чате задайте и ссылку на сайт скиньте доступ ссылка где марина что вы имеете в виду в доступ к чему
  • 01:20:28: кнопки можно менять цвет при наведении да можно что будет на уроке завтра секрет завтра у нас обратная связь можно ли сделать на кнопки ссылку на почту можно но это некорректно скажите если adobe muse объявили о прекращении объявлений обновление будет ли работать сайт
  • 01:20:58: дальнейшем на этой платформе много-много-много лет ищу будет все работать что такое точки остановки татьяна если вы этого не знаете лучше пока не вникать сделайте как я ну как я говорю в тарифе по 480 рублей будет как сделать сайт адаптивный нет там по мы не будет будет серьезным скажите а бронь на оплату курса до какого времени
  • 01:21:28: действительно обратитесь к елене хами давай куратору курса елена хамидова вам все расскажет марина кузнецова вот у елены ивановой спросите марина кузнецова к кабинету доступ приобретается приобретается покупается купить вы можете у елены хайме за вы вот она внизу в группе вот она находится здесь жанна войнова сергей повторите как
  • 01:21:59: сохранить сайт второй странице на хостинге пожалуйста жанна я рекомендую вам после этого вещания после эфира обратиться в чат там есть pdf к но инструкция pdf на я где владимир жигалов наш ученик он сделал классную инструкцию я сегодня и и показывал самом начале ссылку даже кидал а если есть группа в vk ссылку можно сделать на написать сообщение
  • 01:22:29: елена да конечно можно я вам рекомендую всем подождать занятия по группам и потом вместе дружно сделать и потом вместе дружно сделать кнопочки как можно сохранить сайт в pdf программе muse татьян я не знаю а юлиана я не знаю но я просто как бы я не понимаю зачем это делать александр
  • 01:23:00: кончен ваш брат да наш брат друзья смотрите давайте теперь так поступим кому по анимации все понятно пишите обкому по анимации все понятно можете в принципе ну как закругляться я вас не держу в том плане не то что не держу не задерживаю теперь вопрос отвечают татьяне батуриной а заодно тем кто вдруг
  • 01:23:31: для кого вдруг точки остановки вдруг интересно стали без всяких подробностей просто показываю ответ татьяне батурин и остальные кто нус сможет поймать то что я говорю уловить тот молодец окей смотрите сейчас идет уже не анонсированный контент как бы смотрите я создаю новый сайт 1120 столбцов 12 и постоянная ширина у него посмотрите
  • 01:24:06: знаете что анимация в ней узи в частности в частности эффекты прокрутки они работают только когда стоит фиксированная ширина только когда фиксированная ширина и вот сейчас люди вопросы задают что а как же в мобильной версии так далее смотрите но я уже сказал да что у мобильников экраны маленькие там вообще нужно убирать все лишнее с мобильных телефонов из планшетов красивые эффекты и кучу эффектов оставлять только для больших
  • 01:24:38: экранов поэтому идеология следующие но это для мега мозгов я говорю же идеология следующее мы создаем большую точку остановки с фиксированной шириной для больших мониторов вот я ее создал и давайте здесь я нарисую нарисую прямоугольник который будет ну типа тизерная вот такой прямоугольник и будет внутри квадрат типа лепесток какой-то ну какая-то дополнительная какая-то
  • 01:25:09: анимация все вот у меня сайт и он работает он показывается и работают у меня на большом экране но как только я начинаю уменьшать сайт что-то на нем должно пропасть что-то должно появиться поэтому я делаю вернее что-то должно пропасть ну то есть потому что мы уменьшаем экран и здесь татьяна батурина столкнулась с тем что ей не получается сделать маленькие точки остановки татьяна смотрите как нужно делать я добуду я щелкаю правый клик
  • 01:25:41: здесь добавить точку остановки и пишу здесь 960 пикселей но вот здесь я ставлю гибкое значение ширины окей добавляется . остановки и и ширина 1120 а минимальная 960 видите да теперь смотрите я еще раз правый клик добавить точку остановки и здесь пишу 720 и снова гибкое значение ширины . рисуется
  • 01:26:12: затем я снова нажимаю правый клик добавить точку остановки и пишу здесь 480 гибкое значение ширины теперь смотрите я вот захожу в эту точку вот 720 она до 720 но минимально это 480 я двойной клик делаю и делаю здесь 320 таким образом смотрите у меня получается
  • 01:26:42: следующая большая точка остановки это для гигантских экранов но начиная с 1120 и дальше у меня идут уже гибкое все и без анимации то есть анимация будет работать только в большой точки следовательно в каких-то точках остановки я вот этот прямоугольник могу просто скрыть в точке остановки скрыть в точке остановки все то есть вот здесь он
  • 01:27:12: будет на большом экране на экране по и меньше тоже будет а дальше его не будет следовательно если я посмотрю на на сайт то есть вот он сайт большой экран анимация все дела но когда я начинаю уменьшать у меня что-то начинает исчезать и при этом работают все точки остановки задача решена если я правильно понял татьяну батурину ну и для
  • 01:27:43: остальных такой мега быстрый ликбез друзья если кто то ничего не понял вообще не вникаете но серьезно сделайте анимацию как я вас просил ни в коем случае не не не увлекайтесь вот этим делом пока не научитесь делать вот фиксированной большой шириной что же друзья [музыка] если какие-то вопросы есть по
  • 01:28:14: сегодняшнему уроку друзья по сегодняшнему уроку можете задать прямо сейчас если вопросов нет можете написать как вам понравилось сегодняшнее занятие и сказать до свидания я подскажите если в онлайне нет
  • 01:28:46: возможности работать и во время выкладывать даже в личном кабинете потом возможно будет получить обратную связь от вряд ли алена у нас курс идёт вот в процессе курса я даю обратную связь все молодчина все друзья все молодцы давайте делаем домашку дома шичко самолетики ракеты и до встречи завтра в 16 часов завтра в 16
  • 01:29:16: часов мы с вами встречаемся и будет обратная связь все всем пока курс еще не закончен то ли ещё будет называется всем до свидания