HTML CSS JS Страница 5

Создание структуры web-страницы, её стилизация и добавление интерактивности

CSS анимация

CSS анимация

01/07/2018

Использование CSS-анимации для оживления HTML-страницы при помощи правила @keyframes и свойства animation Создание ключевых кадров с помощью правила @keyframes Синтаксис @keyframes с двумя ключевыми кадрами выглядит следующим образом @keyframes myAnimation_name { from { css-свойство: значение; } to {...

Всплывающее окно jQuery

Всплывающее окно jQuery

30/06/2018

При нажатии на ссылку будет плавно появляться всплывающее окно, затемняя остальной контент сайта. И также плавно будет закрываться окно при клике на крестик или вне окна Создание плавно всплывающего окна с использованием библиотеки jQuery В HTML создадим ссылку,...

Как при нажатии на кнопку открыть и закрыть меню

Как при нажатии на кнопку открыть и закрыть меню

09/06/2018

При нажатии на кнопку - появляется меню, при последующем нажатии - закрывается. Для этой задачи будет использовать jQuery. Создадим структуру кнопки, по нажатию на которую будет открываться меню и само меню, которое изначально будет скрыто. <nav class="wrap-myMenu"> <button...

Плавный скролл до элемента

Плавный скролл до элемента

08/06/2018

Реализуем следующее: после клика по ссылке будет происходить плавный скролл до элемента. Реализуем это без использования плагинов сначала при помощи jQuery, а затем на чистом JavaScript Плавный скролл до якоря. С помощью jQuery. Для всех ссылок, начинающихся с...

Кнопка наверх для сайта

Кнопка наверх для сайта

01/05/2018

Сегодня реализуем «Кнопку наверх» для вашего сайта с помощью jQuery и нативного JavaScript. Когда посетитель будет скроллить страницу вниз, в определенном месте будет появляться кнопка, при клике на которую, произойдёт плавный скролл наверх страницы. В HTML файле создайте...

Всплывающее описание при наведении на блок

Всплывающее описание при наведении на блок

29/04/2018

При наведении на блок появляется описание, и исчезает когда курсор покидает его. Создадим HTML разметку. <div class="blocks"> <div class="block"> <div class="block__hidden"> <b>Заголовок</b> <i>Подпись</i> </div> </div> <div class="block"> <div class="block__hidden"> <b>Заголовок</b> <i>Подпись</i> </div> </div> <div class="block"> <div class="block__hidden"> <b>Заголовок</b>...

Прелоадер для сайта

Прелоадер для сайта

29/04/2018

Когда сайт будет полностью загружен, тогда прелоадер исчезнет и пользователь увидит сайт. В файле HTML создадим два div'a - обёртку для прелоадера и сам прелоадер. <div id="myPreloader" class="wrap-myLoader"> <div class="myLoader"></div> </div> Стилизуем блок-обёртку для прелоадера. Растянем блок wrap-myLoader...

Нет больше статей для загрузки

Нет больше статей для загрузки