Висота документа =
Висота курсора =
Прокрутка Y =

Alien highway






    Вертикальне зміщення заднього фону
Тестовий сайт "Ocean"











cat

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


Скрипт перевірявся на Google Chrome;
скрипт вертикального зміщення не оптимізований для кросбраузерності




Мені сподобався такий дизайнерський хід, коли вертикально рухається задній фон, щось на зразок як на даному професійно виконаному сайті (gardenstudio.com.br)



    Я вирішив теж навчитись реалізовувати таку задумку.

Мій алгоритм:

1. Назначаєм div(що, має рухатись) область з position:absolute та різний z-index для різних шарів
на зразок,
(.sky {width:100%;height:400px;background-color:#d6f1ff;position:absolute;z-index:4;}
.fishs_01{width:980px;position:relative;z-index:5;}
.fishs_01_in{width:800px;height:600px;position:absolute;top:1100px;z-index:5;}
.alien_tube {width:100%;position:relative;z-index:6;}
.alien_tube_in {width:100%;height:400px;background-color:#bce2ff;background:linear-gradient(0deg,#091cc9,#bce2ff,#bce2ff,#bce2ff,#418be8);position:absolute;top:2400px;z-index:6;} )

2. Визначаємо наскільки глядач прокручує екран, щось на зразок (var hscrll=document.body.scrollTop;)

3. Призначаємо нові координати для div(що має рухатись), за формулою (var New_position_fishs_01 = Math.round(1100 - (0.25*hscrll));),- де 1100px позиція div-а мінус коефіцієнт, що враховує наскільки швидко ми хочемо щоб область змінювала позицію.

4. Задаєм нові координати блоку div ($( ".fishs_01_in" ).css( "top",New_position_fishs_01_in);)


Скрипт має вигляд: