Внимание! Сайт переехал на новый домен sayt-sozdat.ru. Пожалуйста, обновите страницы закладок с новыми URL
×
Закрытие
2
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

При создании и развитии сайта не обойтись без графического редактора. Этот инструмент необходим для формирования и обработки различных графических элементов, без которых сайт попросту не сможет существовать. Поэтому в наборе инструментов вебмастера графический редактор занимает важнейшее место.

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время...

Cайт на практическом примере

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние сайта, создаваемого в рамках цикла статей Самописный сайт с нуля своими руками.

Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

Вы здесь: Главная → Сборник статей → Плавающий сайдбар



Перечень статей раздела Плавающий сайдбар:


Плавающий сайдбар
play

Плавающий сайдбар

Здравствуйте, уважаемый посетитель!

Недавно ко мне обратился пользователь с просьбой рассказать о механизме работы плавающих сайдбаров, которые используются на данном сайте.

Вообще, плавающий сайдбар нужен для того, чтобы при прокрутке страницы посетитель всегда видел размещенную в нем информацию, сколько бы не прокручивал страницу сайта. И применение такого способа представления информации может существенно увеличить количество показов в таких блоках. И как следствие, переходов по размещенным в них ссылкам.

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

Один из них на чистом CSS с применением, так называемого "липкого позиционирования", другой - с использованием языка JavaScript.

Каждый из этих способов имеет свои особенности. Например, создание плавающего сайдбара на CSS отличается простотой реализации. При том, что такое решение при прокрутке страницы пользователем обеспечивает высокое быстродействие изменений положения блоков. Обусловлено это тем, что все перемещения элементов происходят только посредством CSS.

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

Вообщем, здесь можно будет посмотреть на практических примерах как это работает, и при необходимости воспользоваться наиболее подходящим для себя вариантом.


Статья 1 сборника
2019-07-10

Плавающий сайдбар на sticky-css

  • Как работает липкое позиционирование
  • Пример практического применения позиционирования sticky
  • Реализация плавающего сайдбара на тестовом сайте
  • Исходные файлы сайта

Здравствуйте, уважаемый посетитель!

К сожалению, у меня получился достаточно большой перерыв в размещении новых статей. А причина здесь вполне прозаическая, так как мне пришлось непосредственно поучаствовать в пандемии и на себе испытать, что это такое COVID-19.

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

Ну а теперь все позади и можно наконец приступить к своим текущим делам. Сегодня рассмотрим плавающий сайдбар, построенный на чистом CSS с применением, так называемого "липкого позиционирования".

Как отмечалось ранее в анонсе к разделу, особенностью данного способа, по сравнению JavaScript, является простота реализации при высоком быстродействии изменений положения сайдбара, вызванного прокруткой страницы пользователем.