Как сделать интерактивный сайт по примеру?

Question

[westdp]

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

Вот мои наброски, как мне сделать правильно чтобы все эти секции были в ширину и эта рыбка что на первом слайде проплыла до последней секции с помощью как на том сайте с примера кнопок влево и вправо и с помощью колесика мышки.
Спасибо за любую помощь.

Answer 1

[Karponter]

• Статическая высота основного контейнера.
  
• Фиксированный "фрейм" для отображения кадров (position: fixed; overflow:hidden), отмасштабированный средствами JS. Внутри него - набор блоков с float:left; (собственно кадры) и блок с рыбкой.
  
• Крепим нужный Вам триггер функцию, которая в зависимости от положения скроллбара будет изменять позицию всего фрейма и позицию рыбки внутри фрейма.
  

Получим следующее: крутим вниз: left парамерт фрейма уменьшается на X, left параметр рыбки увеличивается на такой-же X. Получаем смещение фона относительно рыбки и "рамки".
P.S. уменьшать координаты left нужно не самому фрейму, а какой-то дополнительной обертке над кадрами.

Comments

[westdp]

Спасибо, я вас понял, буду разбираться

Answer 2

[Wheelie]

https://css-tricks.com/snippets/jquery/horz-scroll...

https://github.com/alvarotrigo/fullPage.js

Answer 3

[inDeepCode]

Учить JavaScript.

Comments

[westdp]

Вы прям открыли для меня Америку)

[inDeepCode]

На самом деле ваш вопрос звучит: Сделайте за меня мою работу. Просто, я думал, вы невкуре, что он так звучит.

[westdp]

inDeepCode: Я не прошу за меня ее сделать, а только подсказать как мне дальше поступить, просто направить на правильный путь

[inDeepCode]

Правильный путь:

1)Кликаем правой кнопкой мышки на ихнем сайте, смотрим, видим:
script type="text/javascript" src="script/jquery-1.9.1.min.js"
script type="text/javascript" src="script/jquery-ui-1.10.2.custom.min.js"

2) Вбиваем в гугл jquery и jquery-ui
3) Находим сайты api.jquery.com https://jqueryui.com
4) ....
5) Profit!