WebGL: спиральный скроллинг
Немного декоративных и завораживающих эффектов для фона на WebGL. Будем “скручивать” изображение по мере продвижения пользователя по странице.
Сегодня мы бы хотели продемонстрировать вам возможности WebGL. Предполагается, что данный пример будет работать как на ПК, так и на мобильных устройствах.
HTML / CSS структура
Давайте по-быстрому взглянем на HTML и CSS. Позиция элемента canvas зафиксирована т.к. мы будем расширять его на весь экран:
<body> <canvas id="webgl"></canvas> ... </body>
canvas#webgl { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; }
WebGL
В данном примере мы работали с библиотекой regl, которая является обёрткой для WebGL. Если вы первый раз слышите о WebGL, то будьте уверены, что не потратите время даром. Эффекты реализуемые данной технологией того стоят.
Давайте взглянем на самые важные фрагменты кода.
GLSL
<script src="js/regl.min.js"></script> <script type="x-shader/x-fragment" id="fragmentShader"> #define TWO_PI 6.2831853072 #define PI 3.14159265359 // On iOS, specifying highp works more smoothly. precision highp float; uniform float globaltime; uniform vec2 resolution; uniform float aspect; uniform float scroll; uniform float velocity; ... </script>
Инициализация regl в пределах canvas
var canvas = document.querySelector('#webgl'); var regl = createREGL({ canvas: canvas, onDone: function(error, regl) { if (error) { alert(error); } } });
Реализация команды regl
var draw = regl({ // Fragment Shader frag: document.querySelector('#fragmentShader').textContent, // Vertex Shader vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', attributes: { position: [ [-1, 0], [0, -1], [1, 1] ] }, count: 3, uniforms: { globaltime: regl.prop('globaltime'), resolution: regl.prop('resolution'), aspect: regl.prop('aspect'), scroll: regl.prop('scroll'), velocity: regl.prop('velocity') } });
Данный GLSL код из скрипта элемента #fragmentShader
.
Колбэк для каждого кадра
Код, запускающий процессы regl, помещён в колбэк-функцию. Также у нас есть переменные, где мы храним уровень прокрутки страницы.
Уровень прокрутки
Мы создали три переменные для хранения состояния прокрутки: scroll
, velocity
и lastScroll
. Последняя может принимать значение от 0.0
до 1.0
.
Значение velocity будет зависеть от направления и учитывать инерцию. При скроле вниз значение будет позитивным, а при прокрутке вверх — негативным. Значение 0.99
сохранит 99% скорости прокрутки предыдущего кадра. Ускорение рассчитывается как разница между scroll
и lastScroll
.
Надеемся, что вам понравился наш эксперимент с WebGL!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://tympanus.net/codrops/2017/04/26/webgl-scroll-spiral/
Перевел: Станислав Протасевич
Урок создан: 30 Апреля 2017
Просмотров: 7152
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.