С помощью скролла реализовать постепенное изменение прозрачности нескольких слоев.

Всем привет. В создании сайтов я совсем недавно, но уже верстала пробные макеты и прошла полностью HTML Академию. Появилась у меня идея сделать собственный проект. И мне она кажется весьма оригинальной. Но сложность в том, что я не знаю как реализовать один интересный эффект. Суть его такова:
На главной странице информация разделяется блоками. При прокрутке страницы каждый блок должен открываться, словно книга, и вся информация, которая в нем содержится, должна появляться постепенно: от нулевой прозрачности до полной видимости. Все это дело должно происходить плавно и быть адаптивным к разным разрешениям экрана.
Подозреваю что легче всего это будет сделать на JavaScript, но пока точно не знаю какими именно средствами.. Буду очень благодарна если кто-то подскажет в какую степь мне податься, где найти информацию для реализации идеи.. А лучше всего, если скинете сайт/статью, где описан подобный механизм.
И прикрепляю зарисовочку того, как я это вижу.
Жду ваших ответов, помогите девушке.

0

подсказываю принцип:
-- прописываете свои блоки с информацией как теги <div></div>, причём ширину и высоту им не прописываете -- ширина их в итоге будет определяться шириной страницы, а высота - высотой внутреннего содержимого блоков

-- устанавливаете этим блокам изначально невидимость, но такую, чтобы под каждый блок резервировалось место на странице -- style="visibility: hidden"

-- на событие загрузки окна onload назначаете функцию, которая в первую очередь вычислит фактические координаты этих блоков (left и top их левых верхних углов) и их фактические габаритные размеры (offsetWidth и offsetHeigth),
а во вторую очередь назначит ещё одну (назовём её второй) функцию на событие прокрутки страницы onscroll

эта самая вторая функция при прокрутке страницы будет отслеживать величину прокрутки в пикселах scrollTop и как только очередной блок начнёт попадать в уже "прокрученную область", вторая функция будет запускать ещё одну (третью) функцию,

-- которая и будет каким-то образом "открывать/показывать" невидимый до этого блок -- а вот как именно реализовать это открытие/показ третьей функцией, писать затрудняюсь, ибо для этого от вас надо более подробное описание процесса, ваше описание "должен открываться, словно книга" - оно малоинформативно

кроме того, замечу, что вам необходимо подумать над тем, как именно "сподвигнуть" пользователя начать прокручивать страницу, ведь, судя по вашему описанию и картинке, вначале пользователь увидит лишь шапку страницы... с какого перепуга пользователь будет пытаться прокручивать практически пустую страницу?

принцип работы второй функции (отслеживание величины прокрутки страницы в пикселах) можете посмотреть здесь

0