- элемент, который устанавливает заголовок документа, который отображается на вкладке браузера;","type":"unordered-list-item","key":"anp1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"<body> - элемент, содержащий содержимое страницы, которое будет отображаться в окне браузера.","type":"unordered-list-item","key":"5g4jq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это базовая структура страницы, которую мы можем использовать для создания нашей лендинг-страницы.","type":"unstyled","key":"1ahrr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.2)Создание основной структуры лендинг-страницы с помощью HTML разметки","type":"header-three","key":"6nu00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим основу лендинг-страницы:","type":"unstyled","key":"emfeo"},{"data":{"image":{"id":"653cd583cec8b1324aeae575"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7epq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3cf3i"},{"data":{"image":{"id":"653cd59fb664022d715fc28f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7mioc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2g3es"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы использовали следующие теги:","type":"unstyled","key":"kjh7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"<header> - контейнер для заголовка страницы или верхней части сайта, может содержать логотип, навигационное меню и т.д.;","type":"unordered-list-item","key":"e5vsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":9,"offset":77,"style":"BOLD"}],"text":"<nav> - тег, содержащий навигационное меню, обычно располагается внутри <header>;","type":"unordered-list-item","key":"2722c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"<ul> - тег, содержащий маркированный список элементов;","type":"unordered-list-item","key":"5ubv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"<li> - тег, содержащий элемент маркированного списка;","type":"unordered-list-item","key":"4fk44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"<main> - тег, содержащий основное содержимое страницы, кроме верхней и нижней части;","type":"unordered-list-item","key":"b6h1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"<section> - тег, используемый для разделения содержимого страницы на логические блоки, например, для разделения основного содержимого от контактной формы;","type":"unordered-list-item","key":"a4a8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":4,"offset":12,"style":"BOLD"}],"text":"<h1>, <h2>, <h3> - теги, содержащие заголовки первого, второго, третьего уровней соответственно;","type":"unordered-list-item","key":"8f4mn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"<p> - тег, содержащий текстовый абзац;","type":"unordered-list-item","key":"ajl7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"<a> - тег, создающий ссылку на другую страницу или файл;","type":"unordered-list-item","key":"5tkpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"<button> - тег, создающий кнопку, которую пользователь может нажимать","type":"unordered-list-item","key":"a1572"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"<footer> - контейнер для нижней части сайта, обычно содержит ссылки на социальные сети, копирайт и т.д.","type":"unordered-list-item","key":"4cgfp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3)Создание стиля веб-страницы с помощью CSS","type":"header-three","key":"evl16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала создадим пустой файл style.css и подключим его к нашей странице с помощью тега link в секции head:","type":"unstyled","key":"7uf5l"},{"data":{"image":{"id":"653cd4c58c3cc575ff52ae21"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a5lbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем введем в style.css следующий код:","type":"unstyled","key":"fsv4t"},{"data":{"image":{"id":"653cd520c54a25519295702a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"kotb"},{"data":{"image":{"id":"653cd5438b8e37160799eeea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fl5vo"},{"data":{"image":{"id":"653cd5587c8dde29ab55c843"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c17bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже приведены используемые селекторы:","type":"unstyled","key":"5n47d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":4,"offset":44,"style":"BOLD"}],"text":"body - этот селектор применяется к элементу body и задает некоторые общие стили для всего документа, включая отступы, шрифт, размер и цвет текста;","type":"unordered-list-item","key":"bng8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"BOLD"}],"text":"a - этот селектор применяется ко всем гиперссылкам и задает стиль для их текста, включая цвет и отсутствие подчеркивания;","type":"unordered-list-item","key":"a99da"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"}],"text":"ul - этот селектор применяется к спискам и удаляет стандартные отступы и маркеры списка;","type":"unordered-list-item","key":"c5su8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":2,"offset":4,"style":"BOLD"},{"length":2,"offset":8,"style":"BOLD"}],"text":"h1, h2, h3 - эти селекторы применяются к заголовкам первого, второго и третьего уровней соответственно и задают стиль для их текста, включая отступы и жирный шрифт;","type":"unordered-list-item","key":"802fv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":3,"offset":61,"style":"BOLD"}],"text":".btn - этот селектор применяется ко всем элементам с классом btn и задает стиль для кнопок, включая отступы, цвет фона и текста границы, радиус и курсор;","type":"unordered-list-item","key":"4h8ds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":6,"offset":45,"style":"BOLD"}],"text":"header- этот селектор применяется к элементу header и задает стиль для шапки страницы, включая цвет фона, отступы и тень;","type":"unordered-list-item","key":"6sjtj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":3,"offset":43,"style":"BOLD"}],"text":"nav - этот селектор применяется к элементу nav и задает стиль для навигационного меню, включая расположение, выравнивание, отступы и маркеры списка;","type":"unordered-list-item","key":"cp4mp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":4,"offset":62,"style":"BOLD"}],"text":"#hero- этот селектор применяется к элементу с идентификатором hero и задает стиль для блока, включая задний фон, размеры, расположение и цвет текста;","type":"unordered-list-item","key":"damu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":8,"offset":67,"style":"BOLD"}],"text":"#features - этот селектор применяется к элементу с идентификатором features и задает стиль для блока, включая отступы;","type":"unordered-list-item","key":"c4rf9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":8,"offset":67,"style":"BOLD"}],"text":"#services - этот селектор применяется к элементу с идентификатором services и задает стиль для блока, включая отступы и цвет фона;","type":"unordered-list-item","key":"3e5f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"},{"length":7,"offset":66,"style":"BOLD"}],"text":"#contact - этот селектор применяется к элементу с идентификатором contact и задает стиль для блока, включая отступы.","type":"unordered-list-item","key":"bmpd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данный CSS-код содержит множество блоков свойств, каждый из которых определяет стили для определенного элемента или набора элементов на странице. Вот некоторые из них:","type":"unstyled","key":"1h8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"margin: 0; задает отступы внешних границ для всего body элемента (тела документа), устанавливая их равными нулю;","type":"unordered-list-item","key":"6d8qv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"font-family: Arial, sans-serif; устанавливает шрифт для всего текста на странице. Сначала указывается Arial, а если он недоступен, то браузер будет использовать любой доступный без засечек шрифт санс-сериф;","type":"unordered-list-item","key":"7gvgg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"font-size: 16px; определяет размер шрифта в пикселях для всего текста на странице;","type":"unordered-list-item","key":"9kfp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"line-height: 1.5; задает высоту строки текста. Значение 1.5 означает, что междустрочный интервал будет равен 150% от размера шрифта;","type":"unordered-list-item","key":"ba2j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"color: #333; устанавливает цвет текста на странице в темно-серый (#333);","type":"unordered-list-item","key":"8noqv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"text-align: center; выравнивает текст по центру на всей странице;","type":"unordered-list-item","key":"5lb2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"text-decoration: none; убирает подчеркивание у ссылок;","type":"unordered-list-item","key":"3742r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":22,"offset":74,"style":"BOLD"},{"length":10,"offset":138,"style":"BOLD"},{"length":16,"offset":151,"style":"BOLD"}],"text":"ul блок содержит стили для всех неупорядоченных списков на странице. list-style: none; убирает маркеры перед элементами списка. margin: 0; и padding: 0; устанавливают отступы равными нулю, чтобы не было пробелов между списками и содержимым страницы;","type":"unordered-list-item","key":"a9921"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":10,"offset":88,"style":"BOLD"},{"length":23,"offset":141,"style":"BOLD"}],"text":"h1, h2, h3 блок содержит стили для заголовков первого, второго и третьего уровней. margin: 0; убирает отступы перед и после заголовков. font-weight: bold; делает заголовки жирными.","type":"unordered-list-item","key":"b24r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4)Создание функционала с помощью JavaScript","type":"header-three","key":"fubu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":118,"style":"BOLD"},{"length":8,"offset":156,"style":"BOLD"},{"length":3,"offset":177,"style":"BOLD"}],"text":"Сначала создадим пустой файл с расширением .js (например, Проект.js). Затем вставляем ссылку на этот файл внутри тега <head> HTML-документа, используя тег <script> с атрибутом src:","type":"unstyled","key":"2kcj1"},{"data":{"image":{"id":"653cd6cac54a25519298bed1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a0dqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее в пустой файл вводим следующий код:","type":"unstyled","key":"25gbt"},{"data":{"image":{"id":"6580fca8791bc9123e96e5b8"},"images":[{"id":"6580fca8791bc9123e96e5b8"}],"contents":{"6580fca8791bc9123e96e5b8":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bgqfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"83bs0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте разберем, как работает написанный код:","type":"unstyled","key":"30pp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":81,"style":"BOLD"}],"text":"Обработчик события DOMContentLoaded: Общий код обернут в обработчик события DOMContentLoaded, который срабатывает, когда весь DOM документа был полностью загружен и построен. Это гарантирует, что код начнет выполняться только после загрузки всех элементов страницы.","type":"unordered-list-item","key":"d66cq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":65,"style":"BOLD"},{"length":2,"offset":135,"style":"BOLD"},{"length":8,"offset":218,"style":"BOLD"}],"text":"Получение ссылок на элементы навигационного меню: С помощью document.querySelectorAll выбираются все ссылки внутри элементов li в навигационном меню. Полученная коллекция ссылок сохраняется в переменную navLinks.","type":"unordered-list-item","key":"d9jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":101,"style":"BOLD"}],"text":"Обработчик события клика: Для каждой ссылки в навигационном меню добавляется обработчик события click. Когда пользователь нажимает на ссылку, срабатывает функция-обработчик.","type":"unordered-list-item","key":"7egrf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":94,"style":"BOLD"},{"length":22,"offset":222,"style":"BOLD"},{"length":9,"offset":326,"style":"BOLD"},{"length":14,"offset":367,"style":"BOLD"}],"text":"Получение целевого элемента и его позиции: Внутри функции-обработчика получается атрибут href ссылки, на которую нажал пользователь. Этот атрибут содержит идентификатор целевой секции на странице. С помощью document.querySelector выбирается соответствующий элемент на странице, и его вертикальная позиция (offsetTop) сохраняется в переменную targetPosition.","type":"unordered-list-item","key":"cfqbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":81,"style":"BOLD"},{"length":8,"offset":171,"style":"BOLD"}],"text":"Расчет позиции прокрутки: Получается текущая вертикальная позиция страницы (window.pageYOffset) и вычисляется расстояние между текущей позицией и позицией цели (distance).","type":"unordered-list-item","key":"7vja3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":51,"style":"BOLD"},{"length":4,"offset":154,"style":"BOLD"}],"text":"Плавная анимация прокрутки: Создается функция animation, которая будет отвечать за анимацию прокрутки. Внутри этой функции используется функция ease, которая определяет плавность анимации на основе времени и использует эффект плавного движения.","type":"unordered-list-item","key":"1f095"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":37,"style":"BOLD"},{"length":9,"offset":105,"style":"BOLD"},{"length":9,"offset":238,"style":"BOLD"}],"text":"Запуск анимации прокрутки: С помощью requestAnimationFrame запускается анимация прокрутки. Функция animation вызывается рекурсивно до тех пор, пока не пройдет заданная продолжительность анимации. При каждом вызове функции animation обновляется текущая позиция прокрутки, и страница плавно прокручивается к целевой секции.","type":"unordered-list-item","key":"3pvc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":100,"style":"BOLD"},{"length":13,"offset":125,"style":"BOLD"}],"text":"Подключение кода к HTML-странице: Файл \"script.js\" подключается к HTML-странице с помощью тега <script> в разделе <head></head>. Это позволяет браузеру загрузить и выполнить JavaScript-код при отображении страницы.","type":"unordered-list-item","key":"1se40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом, код обрабатывает клик на ссылку в навигационном меню. При клике на ссылку выполняются следующие действия:","type":"unstyled","key":"1jiea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":60,"style":"BOLD"}],"text":"Отмена стандартного поведения ссылки: С помощью метода event.preventDefault() отменяется стандартное поведение ссылки, чтобы предотвратить переход по адресу href.","type":"unordered-list-item","key":"efg53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":68,"style":"BOLD"},{"length":13,"offset":141,"style":"BOLD"}],"text":"Запуск анимации прокрутки к целевой секции: Вызывается функция animateScroll, которая принимает целевую позицию прокрутки. Функция animateScroll запускает анимацию прокрутки страницы к указанной позиции.","type":"unordered-list-item","key":"1thih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":36,"style":"BOLD"},{"length":14,"offset":73,"style":"BOLD"}],"text":"Плавная анимация прокрутки: Функция animateScroll вызывает функцию smoothScrollTo, которая отвечает за плавную анимацию прокрутки. Эта функция принимает целевую позицию прокрутки и запускает анимацию, плавно прокручивая страницу к указанной позиции.","type":"unordered-list-item","key":"b5dk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":75,"style":"BOLD"}],"text":"Завершение анимации: По достижении конечной позиции прокрутки функция smoothScrollTo прекращает анимацию и завершает выполнение.","type":"unordered-list-item","key":"6lpmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом, код позволяет реализовать плавную прокрутку страницы при клике на элементы навигационного меню. При клике на ссылку страница будет плавно прокручиваться к соответствующей секции на странице.","type":"unstyled","key":"ccjhu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3ii81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А вот и результат нашей работы:","type":"unstyled","key":"cn4p7"},{"data":{"image":{"id":"653cd75f6a06345c865dd28a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bc3p7"},{"data":{"image":{"id":"653cd771cbc777678c0e1965"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3fi6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"da20j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"unstyled","key":"d4q8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ereR8HlQUQcMYCm7B7Ed"}],"entityMap":{}},"mentions":[]}</article></body></html>

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня пойдёт речь о веб-разработке и мы научимся создавать простой сайт с помощью HTML, CSS и Javascript. Но прежде чем начать писать код, нам следует подготовить рабочее место.","type":"unstyled","key":"1gc17"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1)Настройка окружения разработки и выбор темы веб-страницы","type":"header-three","key":"ae72t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала нам нужно выбрать текстовый редактор, в котором мы будем писать код. В качестве примера, мы можем использовать бесплатный и популярный редактор кода Visual Studio Code.","type":"unstyled","key":"etknq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того чтобы начать работать с Visual Studio Code, нужно скачать и установить его на компьютер. Затем необходимо установить расширения для работы с HTML, CSS и JavaScript.","type":"unstyled","key":"amm67"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для HTML нам понадобится расширение HTML Snippets, которое предоставляет набор готовых шаблонов HTML-кода для быстрого создания различных элементов страницы.","type":"unstyled","key":"3i55p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для CSS нам понадобится расширение HTML CSS Support, которое обеспечивает автодополнение кода CSS и предлагает подсказки.","type":"unstyled","key":"296gt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для JavaScript нам понадобится расширение JavaScript (ES6) code snippets, которое предоставляет набор готовых шаблонов JavaScript-кода для быстрого создания различных функций и методов.","type":"unstyled","key":"9vce3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы будем писать лендинг-страницу. Лендинг-страница (от английского \"landing page\") - это специально созданная веб-страница, разработанная с целью привлечения внимания посетителей и мотивации их к выполнению определенного действия. Лендинг-страницы обычно представляют собой одностраничные сайты, которые содержат конкретную информацию или предложение, направленные на достижение конкретной цели.","type":"unstyled","key":"f5poe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основная задача лендинг-страницы заключается в привлечении посетителей и конверсии их в потенциальных клиентов или выполнение желаемого действия, такого как покупка товара, подписка на рассылку, регистрация на мероприятие и т.д. Лендинг-страницы обычно имеют простую и привлекательную структуру, яркий дизайн, четко сформулированные предложения и четкое позиционирование продукта или услуги.","type":"unstyled","key":"3cqtu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь мы можем приступить к созданию нашей веб-страницы.","type":"unstyled","key":"abtfm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2)Создание структуры веб-страницы с помощью HTML разметки","type":"header-three","key":"ae9ct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структура веб-сайта — это то, как сайт организован и как связаны между собой его элементы. Логическая структура сайта помогает посетителям и поисковым системам легко перемещаться по нему и находить контент.","type":"unstyled","key":"6a0rk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.1)Создание базовой структуры веб-страницы с помощью HTML разметки","type":"header-three","key":"4o86t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала создадим базовую структуру страницы, состоящую из тегов и служебных элементов с помощью HTML разметки. Открываем текстовый редактор и вводим следующий код:","type":"unstyled","key":"2catm"},{"data":{"image":{"id":"653cd28c0fc4fa08f1045628"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a8tf8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже приведены используемые теги:","type":"unstyled","key":"1rnk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":" - это объявление типа документа, который вы создаете. В нашем случае это HTML5;","type":"unordered-list-item","key":"hjvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":" - элемент, определяющий начало и конец HTML документа;","type":"unordered-list-item","key":"fc1gj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":" - содержит метаданные документа, такие как заголовок, мета-теги и ссылки на внешние файлы;","type":"unordered-list-item","key":"a3tn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":" - тег, содержащий информацию о документе, такую как кодировку, ключевые слова, описание и т.д.;","type":"unordered-list-item","key":"b192c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":" - элемент, который устанавливает заголовок документа, который отображается на вкладке браузера;","type":"unordered-list-item","key":"anp1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"<body> - элемент, содержащий содержимое страницы, которое будет отображаться в окне браузера.","type":"unordered-list-item","key":"5g4jq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это базовая структура страницы, которую мы можем использовать для создания нашей лендинг-страницы.","type":"unstyled","key":"1ahrr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.2)Создание основной структуры лендинг-страницы с помощью HTML разметки","type":"header-three","key":"6nu00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим основу лендинг-страницы:","type":"unstyled","key":"emfeo"},{"data":{"image":{"id":"653cd583cec8b1324aeae575"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7epq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3cf3i"},{"data":{"image":{"id":"653cd59fb664022d715fc28f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7mioc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2g3es"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы использовали следующие теги:","type":"unstyled","key":"kjh7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"<header> - контейнер для заголовка страницы или верхней части сайта, может содержать логотип, навигационное меню и т.д.;","type":"unordered-list-item","key":"e5vsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":9,"offset":77,"style":"BOLD"}],"text":"<nav> - тег, содержащий навигационное меню, обычно располагается внутри <header>;","type":"unordered-list-item","key":"2722c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"<ul> - тег, содержащий маркированный список элементов;","type":"unordered-list-item","key":"5ubv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"<li> - тег, содержащий элемент маркированного списка;","type":"unordered-list-item","key":"4fk44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"<main> - тег, содержащий основное содержимое страницы, кроме верхней и нижней части;","type":"unordered-list-item","key":"b6h1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"<section> - тег, используемый для разделения содержимого страницы на логические блоки, например, для разделения основного содержимого от контактной формы;","type":"unordered-list-item","key":"a4a8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":4,"offset":12,"style":"BOLD"}],"text":"<h1>, <h2>, <h3> - теги, содержащие заголовки первого, второго, третьего уровней соответственно;","type":"unordered-list-item","key":"8f4mn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"<p> - тег, содержащий текстовый абзац;","type":"unordered-list-item","key":"ajl7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"<a> - тег, создающий ссылку на другую страницу или файл;","type":"unordered-list-item","key":"5tkpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"<button> - тег, создающий кнопку, которую пользователь может нажимать","type":"unordered-list-item","key":"a1572"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"<footer> - контейнер для нижней части сайта, обычно содержит ссылки на социальные сети, копирайт и т.д.","type":"unordered-list-item","key":"4cgfp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3)Создание стиля веб-страницы с помощью CSS","type":"header-three","key":"evl16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала создадим пустой файл style.css и подключим его к нашей странице с помощью тега link в секции head:","type":"unstyled","key":"7uf5l"},{"data":{"image":{"id":"653cd4c58c3cc575ff52ae21"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a5lbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем введем в style.css следующий код:","type":"unstyled","key":"fsv4t"},{"data":{"image":{"id":"653cd520c54a25519295702a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"kotb"},{"data":{"image":{"id":"653cd5438b8e37160799eeea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fl5vo"},{"data":{"image":{"id":"653cd5587c8dde29ab55c843"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c17bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже приведены используемые селекторы:","type":"unstyled","key":"5n47d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":4,"offset":44,"style":"BOLD"}],"text":"body - этот селектор применяется к элементу body и задает некоторые общие стили для всего документа, включая отступы, шрифт, размер и цвет текста;","type":"unordered-list-item","key":"bng8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"BOLD"}],"text":"a - этот селектор применяется ко всем гиперссылкам и задает стиль для их текста, включая цвет и отсутствие подчеркивания;","type":"unordered-list-item","key":"a99da"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"}],"text":"ul - этот селектор применяется к спискам и удаляет стандартные отступы и маркеры списка;","type":"unordered-list-item","key":"c5su8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":2,"offset":4,"style":"BOLD"},{"length":2,"offset":8,"style":"BOLD"}],"text":"h1, h2, h3 - эти селекторы применяются к заголовкам первого, второго и третьего уровней соответственно и задают стиль для их текста, включая отступы и жирный шрифт;","type":"unordered-list-item","key":"802fv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":3,"offset":61,"style":"BOLD"}],"text":".btn - этот селектор применяется ко всем элементам с классом btn и задает стиль для кнопок, включая отступы, цвет фона и текста границы, радиус и курсор;","type":"unordered-list-item","key":"4h8ds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":6,"offset":45,"style":"BOLD"}],"text":"header- этот селектор применяется к элементу header и задает стиль для шапки страницы, включая цвет фона, отступы и тень;","type":"unordered-list-item","key":"6sjtj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":3,"offset":43,"style":"BOLD"}],"text":"nav - этот селектор применяется к элементу nav и задает стиль для навигационного меню, включая расположение, выравнивание, отступы и маркеры списка;","type":"unordered-list-item","key":"cp4mp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":4,"offset":62,"style":"BOLD"}],"text":"#hero- этот селектор применяется к элементу с идентификатором hero и задает стиль для блока, включая задний фон, размеры, расположение и цвет текста;","type":"unordered-list-item","key":"damu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":8,"offset":67,"style":"BOLD"}],"text":"#features - этот селектор применяется к элементу с идентификатором features и задает стиль для блока, включая отступы;","type":"unordered-list-item","key":"c4rf9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":8,"offset":67,"style":"BOLD"}],"text":"#services - этот селектор применяется к элементу с идентификатором services и задает стиль для блока, включая отступы и цвет фона;","type":"unordered-list-item","key":"3e5f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"},{"length":7,"offset":66,"style":"BOLD"}],"text":"#contact - этот селектор применяется к элементу с идентификатором contact и задает стиль для блока, включая отступы.","type":"unordered-list-item","key":"bmpd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данный CSS-код содержит множество блоков свойств, каждый из которых определяет стили для определенного элемента или набора элементов на странице. Вот некоторые из них:","type":"unstyled","key":"1h8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"margin: 0; задает отступы внешних границ для всего body элемента (тела документа), устанавливая их равными нулю;","type":"unordered-list-item","key":"6d8qv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"font-family: Arial, sans-serif; устанавливает шрифт для всего текста на странице. Сначала указывается Arial, а если он недоступен, то браузер будет использовать любой доступный без засечек шрифт санс-сериф;","type":"unordered-list-item","key":"7gvgg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"font-size: 16px; определяет размер шрифта в пикселях для всего текста на странице;","type":"unordered-list-item","key":"9kfp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"line-height: 1.5; задает высоту строки текста. Значение 1.5 означает, что междустрочный интервал будет равен 150% от размера шрифта;","type":"unordered-list-item","key":"ba2j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"color: #333; устанавливает цвет текста на странице в темно-серый (#333);","type":"unordered-list-item","key":"8noqv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"text-align: center; выравнивает текст по центру на всей странице;","type":"unordered-list-item","key":"5lb2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"text-decoration: none; убирает подчеркивание у ссылок;","type":"unordered-list-item","key":"3742r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":22,"offset":74,"style":"BOLD"},{"length":10,"offset":138,"style":"BOLD"},{"length":16,"offset":151,"style":"BOLD"}],"text":"ul блок содержит стили для всех неупорядоченных списков на странице. list-style: none; убирает маркеры перед элементами списка. margin: 0; и padding: 0; устанавливают отступы равными нулю, чтобы не было пробелов между списками и содержимым страницы;","type":"unordered-list-item","key":"a9921"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":10,"offset":88,"style":"BOLD"},{"length":23,"offset":141,"style":"BOLD"}],"text":"h1, h2, h3 блок содержит стили для заголовков первого, второго и третьего уровней. margin: 0; убирает отступы перед и после заголовков. font-weight: bold; делает заголовки жирными.","type":"unordered-list-item","key":"b24r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4)Создание функционала с помощью JavaScript","type":"header-three","key":"fubu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":118,"style":"BOLD"},{"length":8,"offset":156,"style":"BOLD"},{"length":3,"offset":177,"style":"BOLD"}],"text":"Сначала создадим пустой файл с расширением .js (например, Проект.js). Затем вставляем ссылку на этот файл внутри тега <head> HTML-документа, используя тег <script> с атрибутом src:","type":"unstyled","key":"2kcj1"},{"data":{"image":{"id":"653cd6cac54a25519298bed1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a0dqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее в пустой файл вводим следующий код:","type":"unstyled","key":"25gbt"},{"data":{"image":{"id":"6580fca8791bc9123e96e5b8"},"images":[{"id":"6580fca8791bc9123e96e5b8"}],"contents":{"6580fca8791bc9123e96e5b8":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bgqfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"83bs0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте разберем, как работает написанный код:","type":"unstyled","key":"30pp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":81,"style":"BOLD"}],"text":"Обработчик события DOMContentLoaded: Общий код обернут в обработчик события DOMContentLoaded, который срабатывает, когда весь DOM документа был полностью загружен и построен. Это гарантирует, что код начнет выполняться только после загрузки всех элементов страницы.","type":"unordered-list-item","key":"d66cq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":65,"style":"BOLD"},{"length":2,"offset":135,"style":"BOLD"},{"length":8,"offset":218,"style":"BOLD"}],"text":"Получение ссылок на элементы навигационного меню: С помощью document.querySelectorAll выбираются все ссылки внутри элементов li в навигационном меню. Полученная коллекция ссылок сохраняется в переменную navLinks.","type":"unordered-list-item","key":"d9jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":101,"style":"BOLD"}],"text":"Обработчик события клика: Для каждой ссылки в навигационном меню добавляется обработчик события click. Когда пользователь нажимает на ссылку, срабатывает функция-обработчик.","type":"unordered-list-item","key":"7egrf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":94,"style":"BOLD"},{"length":22,"offset":222,"style":"BOLD"},{"length":9,"offset":326,"style":"BOLD"},{"length":14,"offset":367,"style":"BOLD"}],"text":"Получение целевого элемента и его позиции: Внутри функции-обработчика получается атрибут href ссылки, на которую нажал пользователь. Этот атрибут содержит идентификатор целевой секции на странице. С помощью document.querySelector выбирается соответствующий элемент на странице, и его вертикальная позиция (offsetTop) сохраняется в переменную targetPosition.","type":"unordered-list-item","key":"cfqbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":81,"style":"BOLD"},{"length":8,"offset":171,"style":"BOLD"}],"text":"Расчет позиции прокрутки: Получается текущая вертикальная позиция страницы (window.pageYOffset) и вычисляется расстояние между текущей позицией и позицией цели (distance).","type":"unordered-list-item","key":"7vja3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":51,"style":"BOLD"},{"length":4,"offset":154,"style":"BOLD"}],"text":"Плавная анимация прокрутки: Создается функция animation, которая будет отвечать за анимацию прокрутки. Внутри этой функции используется функция ease, которая определяет плавность анимации на основе времени и использует эффект плавного движения.","type":"unordered-list-item","key":"1f095"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":37,"style":"BOLD"},{"length":9,"offset":105,"style":"BOLD"},{"length":9,"offset":238,"style":"BOLD"}],"text":"Запуск анимации прокрутки: С помощью requestAnimationFrame запускается анимация прокрутки. Функция animation вызывается рекурсивно до тех пор, пока не пройдет заданная продолжительность анимации. При каждом вызове функции animation обновляется текущая позиция прокрутки, и страница плавно прокручивается к целевой секции.","type":"unordered-list-item","key":"3pvc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":100,"style":"BOLD"},{"length":13,"offset":125,"style":"BOLD"}],"text":"Подключение кода к HTML-странице: Файл \"script.js\" подключается к HTML-странице с помощью тега <script> в разделе <head></head>. Это позволяет браузеру загрузить и выполнить JavaScript-код при отображении страницы.","type":"unordered-list-item","key":"1se40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом, код обрабатывает клик на ссылку в навигационном меню. При клике на ссылку выполняются следующие действия:","type":"unstyled","key":"1jiea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":60,"style":"BOLD"}],"text":"Отмена стандартного поведения ссылки: С помощью метода event.preventDefault() отменяется стандартное поведение ссылки, чтобы предотвратить переход по адресу href.","type":"unordered-list-item","key":"efg53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":68,"style":"BOLD"},{"length":13,"offset":141,"style":"BOLD"}],"text":"Запуск анимации прокрутки к целевой секции: Вызывается функция animateScroll, которая принимает целевую позицию прокрутки. Функция animateScroll запускает анимацию прокрутки страницы к указанной позиции.","type":"unordered-list-item","key":"1thih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":36,"style":"BOLD"},{"length":14,"offset":73,"style":"BOLD"}],"text":"Плавная анимация прокрутки: Функция animateScroll вызывает функцию smoothScrollTo, которая отвечает за плавную анимацию прокрутки. Эта функция принимает целевую позицию прокрутки и запускает анимацию, плавно прокручивая страницу к указанной позиции.","type":"unordered-list-item","key":"b5dk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":75,"style":"BOLD"}],"text":"Завершение анимации: По достижении конечной позиции прокрутки функция smoothScrollTo прекращает анимацию и завершает выполнение.","type":"unordered-list-item","key":"6lpmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом, код позволяет реализовать плавную прокрутку страницы при клике на элементы навигационного меню. При клике на ссылку страница будет плавно прокручиваться к соответствующей секции на странице.","type":"unstyled","key":"ccjhu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3ii81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А вот и результат нашей работы:","type":"unstyled","key":"cn4p7"},{"data":{"image":{"id":"653cd75f6a06345c865dd28a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bc3p7"},{"data":{"image":{"id":"653cd771cbc777678c0e1965"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3fi6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"da20j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"unstyled","key":"d4q8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ereR8HlQUQcMYCm7B7Ed"}],"entityMap":{}},"mentions":[]}</article></body></html>