#5 Пишем jQuery скрипты на landing page | Реальный заказ | Марафон вёрстки | Артем Исламов

Продолжаем марафон вёрстки. Сегодня будем писать javascript (jQuery) для нашего landing page. Стилизуем before after slider в блоке "До и после". Стилизуем select и напишем свой скрипт для него. Сделаем плавную прокрутку до якоря на jQuery и подключим slick слайдер .
================================
================================
Работать с макетом я буду в программе Avocode

ВАШЕ ДОМАШНЕЕ ЗАДАНИЕ
Написать скрипты, оживить сайт, настроить слайдер в разделе "До и после" по PSD макету, стилизовать select и настроить плавную прокрутку в меню.

================================

А также буду использовать хостинг HANDYHOST
================================

Подпишитесь на канал, если вам нравятся эти видео:

Больше контента в нашей группе Вконтакте
Присоединяйтесь к нашему сообществу Discord

Мой канал в telegram "Лысый из браузера"

-----------
Я использую хостинг Link Host с 2014 года

Каналы с крутыми фичами на CSS и JavaScript:

Канал с терминами для айтишников:

Канал, где публикуют ссылки на полезные сервисы и сайты:

[Glo_Academy]

ВАШЕ ДОМАШНЕЕ ЗАДАНИЕ
Написать скрипты, оживить сайт, настроить слайдер в разделе "До и после" по PSD макету, стилизовать select и настроить плавную прокрутку в меню.

[m_mariya_mari]

после 42 минуты пошел сдвиг аудио и видео, трудно стало воспринимать логику верстки. а за такое практическое видео - спасибо. планирую еще пересмотреть. Интересно в плане обучения. лайк

[Daniel-zfhd]

В _before.sass классу &-wrap нужно дописать свойство z-index: 99 (иначе next/prev не работают), и классу .arrow свойство cursor: pointer
Ну это такое, мелочи😃

[thesweetlife]

Слайдер это боль, кучу раз настраиваешь и все равно как в первый раз ))

[uzwebdev]

Скачайте видео поставьте в плере и в Ютубе оставьте звук с -10секундой. И ву-а-ля все станет на свои места. Всем добра. Артем топчик)

[АйдынМодоров]

Для стилизации select можно использовать плагин Selectize

[Евгений-хлщ]

Если кто не в курсе как нормально посмотреть ту часть видео, где звук отстает, то качайте это видео на комп, запускайте через нормальный видеоплеер и двигайте звуковую дорожку. Звук в видео отстаёт на 22 секунды с 43 минуты

[itsollustrifugate]

Привет! Толково объясняешь, держи лайк и нового подписчика!
Слушай, а можешь сделать видео, по восстановлению читаемости кода JavaScript после обфускации минимизаторами?
Уверен что рано или поздно, все программисты сталкиваются с данной проблемой.

Погуглив несколько дней, я так не нашел выхода из данной ситуации, конечно видел некоторые решения,
но там легкие примеры, совсем не то что нужно.

Что у меня получилось, так это декодировтаь из Base64, сделать "немного" читаемым, но вот как распутать код не пойму(((
Все функции, переменные и т.д. перепутаны, их названия находятся в одном массиве и вообще не понятны.

Единственное что приходит на ум, так это вручную достать массив с названием переменных - функций, после написать на PHP обработчик, где регулярными выражениями сделать их замену.
Может конечно есть способ легче о котором я не знаю?

Могу дать тебе скрипт, как раз двух зайцев можно убить, мне поможешь, и очередное годное видео на твоем канале появится, которое соберет миллион просмотров + тысячи лайков со ВСЕЙ ЗЕМЛИ! )))

Залил скрипт на яндекс диск

[saskirakosyan]

Артем а где в проекте серверний язык??например php, Nod.js вы неиспользовали?можно без этого обайтись?

[mikhailkormilitsyn]

Эх, а ведь можно было бы не удалять select, а просто присвоить ему класс form__input, чтобы он стилизовался как остальные инпуты....тогда бы не пришлось так всё усложнять) но в любом случае, решение стандартных задач нестандартным путём придает +1 к изворотливости))

[jlvloci]

Так и не объяснил как на блоке .reviews приделать слайдер при сужении экрана на 1199px

[deniralisimus]

Вопрос, конечно, не очень, но всё же спрошу) Сколько за такой лендинг полагается править? Если можно, то лучше точную цену, которую вы за него правили) Заранее спасибо за ответ...!)

[ИванЯровой-ет]

На один слайдер просто забили, тот что сделали при размере экрана меньше 768 ведет себя дико, вообще показали что было не в падлу, остальное сами сделают, форма на костылях, до этого все отлично было, но пятый видос как мог бы и переснять, люди ведь деньги тебе платят за макет.

[Роман-ггб]

А неьзя было изначально selct сделать и стилизовать его через jquery,

[HerbeCoder]

Костыль с селектом зачетный. А если будеит список на 100500 знчений?? ))))

[СеменОробинский-пе]

Почему именно jQuery? Когда проходил интенсив по JavaScript в HTML Academy, мне наставик сказал, что осваивать jQuery для новых проектов не имеет смысла по двум причинам. 1 - jQuery - это кроссбаузерный вариант JavaScript, но сейчас у JS нет такой проблемы. 2 - у раннего JS было сложное взаимодействие с DOM, а jQuery позволял делать манипуляции с DOM более простым образом.
Наставник тогда мне сказал, что jQuery стоит осваивать лишь в одном случае: поддержка какого-нибудь Legacy проекта. Что вы думаете на этот счет?

[letzabelin]

Привет. В секции «до после», когда в слайдере стрелкам задаём z-index равный -1, чтобы могли управлять самим эффектом «до/после», то стрелки становятся неактивными.

То есть переключение фото только по точкам снизу можно сделать, но не по стрелкам. Как можно пофиксить?

[grantruss]

Что насчет адаптива ?
Отзывы на маленьких экранах в виде слайдера ?

[maksatsadvakas]

Добрый день! Имеет ли значения ОС при web разработке у меня windows 8.1 лицензионный. Левую сборку не хочется ставить, или все таки 10 крякнутую на OCX пока нет возможности?

[Vasili_Malai]

Привет, спасибо за видео. Я костамизировал кнопки слайдера дефолтные, те которые сам плагин добавляет. Является ли это ошибкой?