Page list indicator

Start august 2014

site image
стрілка


Боковий індикатор прокрутки сторінки сайту

Перша редакція :)



cat

    Зазделегідь перепрошую, стаття не є навчальним матеріалом,
а скоріше служить мені чернеткою при проектуванні сторінок сайтів.


Інформаційний блок №1



    Ціль: Як на мене досить цікавий дизайнерський хід, тим більше ще й зручний, клікнувши на відповідний кружечок індикатору можна перейти до іншої частини сайту.
Реалізація такого ефету несе в собі скоріше приємний момент, ніж якесь велике функціональне призначення.

Перший паравоз;... перша редакція скрипту, великий, не оптимізований :),- але їде через Google Chrome

історичний поїзд

    Для першої редакції елементи для реалізації бокового індикатору:

1. Звичайно ефект використовує бібліотеку jquery

2. Визначаєм висоту екрану. Щоб знати, коли робити активним індикатор частини сайту ( Height_window = $( window ).height();)

3. Визначаємо на якій висоті розташований кожен інформаційний блок, щоб можна було прокрутити сторінку до відповідної висоти (htop_01 = Math.round($( "#zone_01" ).offset().top);)

4. Робимо активним один з кружечків індикатора за домомогою оператора умови if; умова така, якщо висота сторінки більше висоти відповідного інформаційного блоку але менше висоти слідуючого, то присвоїти йому клас "активний", інакше присвоїти клас "неактивний"

(if ((hscrll>htop_011)&&(hscrll<htop_021))
{$("#page_01").removeClass( "page_not_active" );
$("#page_01").addClass( "page_active" )
}
else
{$("#page_01").removeClass( "page_active" );
$("#page_01").addClass( "page_not_active" )}
)


Інформаційний блок №2



Перший мій скрипт для бокового індикатора сторінки виглядає приблизно так



фонова картинка


Інформаційний блок №3

фонова картинка


Інформаційний блок №4

фонова картинка


Інформаційний блок №5

фонова картинка