Создаём красивый parallax-эффект | HTML, CSS, JS
Разберём в видео на простом примере механизм работы библиотеки parallax.js.
❤️ Мои телеграм канал: t.me/webelart.
❤️ Мой инстаграм: / elena.liveldi
❤️ Мой сайт: webelart.com.
Демо + исходники: webelart.com/lessons/parallax....
00:00 Введение
01:21 Описание бага
04:04 Введение
04:42 История про parallax.js
08:06 Parallax на чистом CSS
09:50 Про дизайн
11:15 Разбор HTML
12:27 Про дизайн
22:48 Разбираем html + css
27:52 Разбираем js
46:00 Заключение
Сайт для сжатия файлов: tinypng.com
Библиотека parallax.js: github.com/wagerfield/parallax
Скачать красивый дизайн: stock.adobe.com/ru/ (первые 10 изображений можно скачать бесплатно).
Parallax через CSS: codepen.io/samdbeckham/pen/OP...
Пікірлер: 19
Привет, спасибо за полезный контент. Очень понравилось, что в видео есть предистория о том, как создавать такие слои, о идеях и различных инструментах.👍
Паралакс всегда было интересно и завораживающее зрелище.
Четкое видео! Очень полезно. Сам только открываю для себя параллакс. Успехов каналу
@webelart
3 жыл бұрын
Спасибо!
очень классно ,
Спасибо
невероятный всеобъемлющий джаваскрипт
Спасибо. оочень длинно я сразу поставил скорость х2 и уже хотел выключить но с 24 минуты все пошло очень четко и по делу. Благодарствую. Вы вполне могли бы из 1 сделать 2 видео где брать графику и как с ней работать и отдельно техническую часть.
@webelart
3 жыл бұрын
Спасибо за комментарий! Да я согласна с вами, это мои первые видео, я прямо много говорила и еще не вырезала паузы. Сейчас я стараюсь делать более качественный монтаж и информацию концентрирование. Про графику отдельно и программную часть, идея крутая!
умничка
👍
1:50 и тут Лена поняла, что пора осваивать тестирование)
@webelart
2 жыл бұрын
😂😂
Добрый день а если нужно сделать так, что бы отдельный элемент скролился с другой скоростью, нужно получить его id и привязать к нему функцию function onScroll(event) с другими параметрами, зачем передаете параметр event, если его не используете в функции? depth - массив, количество элементов равняется количеству дочек в контейнере mountains Если мне нужно размещать элементы по вертикальной оси вдоль скрола Y, как мне добиться разной скорости движения элементов? ваша сцена довольно легка так как занимает один экран, а что если длинная страница в 3 экрана, как эту страницу адаптировать если все элементы будут прибиты абсолютами? На каждом разрешении менять значения top left/right? Или существует другое решение.
@webelart
3 жыл бұрын
1. Да нужно получить элемент и какую-то функцию к нему привязать. Не уверена, что onScroll подойдёт, но что-то наподобие написать. 2. Обычно в функции передают по умолчанию такие вещи, даже если не используется. Чтобы потом если код меняешь, не добавлять. Но это всё по собственным желаниям, если вас это парит не пишите. Про остальное надо думать, я снимала видео ещё про параллакс kzread.info/dash/bejne/d6ecrrKjoLPeltY.html, там подробнее рассматриваются разные случаи.
а в какой проге делали?
+
сначала прочитал Пролапс
@webelart
3 жыл бұрын
Божечки, это что-то из медицины? 😮 Не, тут вообще про другое, параллакс - это крутой эффект в программировании. 😜 Очень очень крутой!