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

 

Мы решили объединить все известные ранее нам приемы, чтобы получить одну страницу с различными эффектами. Такая страница явно заинтересует посетителя. И так, давайте приступим.

Шаг 1. HTML

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

Нам просто необходимо указать в правильной по очередности то, что мы хотим видеть на странице, и отредактировать его, если в этом есть необходимость.

Случайные эффекты прокрутки для сайта с помощью JS

Шаг 2. CSS

Со стилями все интересней, нам необходимо указать не только общие параметры контейнера, но и определить порядок трансформации в пространстве, и манипуляции текстом:

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

Шаг 3. JS

Всю основную работу будет выполнять функции js, нам необходимо активировать все элементы, и установить работоспособнобность при прокрутке, не стоит забывать, что мы будем манипулировать плоскостями по оси координат при прокрутке и вращением теста на 360 градусов, это позволит нам реализовать JS:

Стоит отметить, что это экспериментальный вариант, по этому может не корректно работать в некоторых устаревших браузерах.

Вот и все. Готово!