Создаём красивый 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

  • @AlexandraKapit
    @AlexandraKapit2 жыл бұрын

    Привет, спасибо за полезный контент. Очень понравилось, что в видео есть предистория о том, как создавать такие слои, о идеях и различных инструментах.👍

  • @user-dk9yl4ct7b
    @user-dk9yl4ct7b3 жыл бұрын

    Паралакс всегда было интересно и завораживающее зрелище.

  • @sia4281
    @sia42813 жыл бұрын

    Четкое видео! Очень полезно. Сам только открываю для себя параллакс. Успехов каналу

  • @webelart

    @webelart

    3 жыл бұрын

    Спасибо!

  • @senails2859
    @senails28592 жыл бұрын

    очень классно ,

  • @miklayen_yakim
    @miklayen_yakim Жыл бұрын

    Спасибо

  • @senails2859
    @senails28592 жыл бұрын

    невероятный всеобъемлющий джаваскрипт

  • @arsenmanasuev4934
    @arsenmanasuev49343 жыл бұрын

    Спасибо. оочень длинно я сразу поставил скорость х2 и уже хотел выключить но с 24 минуты все пошло очень четко и по делу. Благодарствую. Вы вполне могли бы из 1 сделать 2 видео где брать графику и как с ней работать и отдельно техническую часть.

  • @webelart

    @webelart

    3 жыл бұрын

    Спасибо за комментарий! Да я согласна с вами, это мои первые видео, я прямо много говорила и еще не вырезала паузы. Сейчас я стараюсь делать более качественный монтаж и информацию концентрирование. Про графику отдельно и программную часть, идея крутая!

  • @PS-tn6mc
    @PS-tn6mc3 жыл бұрын

    умничка

  • @Shir-Na-Shir
    @Shir-Na-Shir2 жыл бұрын

    👍

  • @biLLie_wiLLie
    @biLLie_wiLLie2 жыл бұрын

    1:50 и тут Лена поняла, что пора осваивать тестирование)

  • @webelart

    @webelart

    2 жыл бұрын

    😂😂

  • @user-ce9xz7xp1g
    @user-ce9xz7xp1g3 жыл бұрын

    Добрый день а если нужно сделать так, что бы отдельный элемент скролился с другой скоростью, нужно получить его id и привязать к нему функцию function onScroll(event) с другими параметрами, зачем передаете параметр event, если его не используете в функции? depth - массив, количество элементов равняется количеству дочек в контейнере mountains Если мне нужно размещать элементы по вертикальной оси вдоль скрола Y, как мне добиться разной скорости движения элементов? ваша сцена довольно легка так как занимает один экран, а что если длинная страница в 3 экрана, как эту страницу адаптировать если все элементы будут прибиты абсолютами? На каждом разрешении менять значения top left/right? Или существует другое решение.

  • @webelart

    @webelart

    3 жыл бұрын

    1. Да нужно получить элемент и какую-то функцию к нему привязать. Не уверена, что onScroll подойдёт, но что-то наподобие написать. 2. Обычно в функции передают по умолчанию такие вещи, даже если не используется. Чтобы потом если код меняешь, не добавлять. Но это всё по собственным желаниям, если вас это парит не пишите. Про остальное надо думать, я снимала видео ещё про параллакс kzread.info/dash/bejne/d6ecrrKjoLPeltY.html, там подробнее рассматриваются разные случаи.

  • @sviktoriia
    @sviktoriia2 жыл бұрын

    а в какой проге делали?

  • @user-di4zt3br5m
    @user-di4zt3br5m3 жыл бұрын

    +

  • @LukeryaPereprygova
    @LukeryaPereprygova3 жыл бұрын

    сначала прочитал Пролапс

  • @webelart

    @webelart

    3 жыл бұрын

    Божечки, это что-то из медицины? 😮 Не, тут вообще про другое, параллакс - это крутой эффект в программировании. 😜 Очень очень крутой!

Келесі