Учим JavaScript 23. Классный эффект переключения между фото

[@БадаБум-й8з]

з усіх авторів, курси яких подивився - Вас найкраще розумію. дякую)

[@ХайзЗенберг]

Спасибо большое!!!Вы лучший преподаватель в нашей галактике!!!)))

[@itgid]

Спасибо!

[@ДаниилЧернавин-ь1о]

Эти уроки - лучшие что я видел в Интернете !!! Спасибо вам за труд !!!

[@ПавелМеняйлов-й6у]

Огромное спасибо Вам за качественно преподнесенный материал и пример действительно полезных боевых навыков! У Вас хочется учиться! Желаю Вам всяческих успехов!

[@itgid]

Большое спасибо за отзыв. Иногда все хочется бросить - снимать тяжело, идеи исчерпываются, заработка не приносит. А потом читаешь отзыв и хочется работать!

[@_Fantom_.]

Спасибо за очередной супер-урок, маэстро!

[@SashaPleshevich]

Спасибо большое Вам за науку!

[@itgid]

Спасибо!

[@vladimirs.josans]

Дабы плавно сделать возвращение в исходное положение, нужно ввести во второй функции document.getElementById('two').style.transition = "all 2s";

[@stivandpolli9117]

Отличные понятные уроки. Спасибо. 👍

[@botaniqq]

Очень здорово!!! Спасибо!!!

[@Max-Eastman]

Классный урок!

[@denisraimer3276]

Большое спасибо, продолжайте пожалуйста. Вы очень многому научили

[@itgid]

Спасибо!

[@webdev5107]

при возвращении элемента в исходный размер можно было написать .style.width = '100%'; либо вообще пустые кавычки, тогда атрибут "исчезнет", а размер возьмётся из css, что есть хорошо)

[@zipponvr7043]

советую делать немного не так я добавил транзишн не в css a в JS, у меня последние строки выглядят так: document.getElementById('myslide').onmouseleave = function(event) { document.getElementById('two').style.width = '375px'; document.getElementById('two').style.transition = 'all 0.5s'; } document.getElementById('myslide').onmouseenter = function(event) { document.getElementById('two').style.transition = 'all 0s'; } таким образом когда мышка на объекте, слайдер двигается без затормаживания, а когда покидает - плавненько уходит =)

[@mr-gorobchyk]

я бы нмного доработал, что бы при уходе мышки картинка плавно возвращалась в изначальное положение, а при заходе мышки на элемент плавности не было. document.getElementById('myslide').onmousemove = function(event){ var offset = event.offsetX; document.getElementById('two').style.width = offset + 'px'; document.getElementById('two').style.transition = null; } document.getElementById('myslide').onmouseleave = function(event){ document.getElementById('two').style.transition = 'width 2s'; document.getElementById('two').style.width = 100 + '%'; }

[@ezcode6508]

thks

[@КостянЕрмаков-е9ю]

хорошая идея для фантазий и дальнейшего развития. Если добавить второму блоку просто бордер лефт пару пикселей, тогда уже будет совсем хорошо и ясно видно что это шторка. Александр, спасибо за уроки, шагаем дальше.

[@user-bro]

Попробуй. Не знаю почему, но offsetX при наезде на границу подглючивает и возвращает -1 вместо корректного значения.

[@stgkaluga767]

Благодарю. Ваши уроки - Супер!

[@МаксимХрамцов-к8щ]

Очень интересный урок, спс. Вам надо учитель года дать.

[@ИяИя-п2к]

Крутейший урок!↑↑↑↑↑

[@itgid]

Спасибо!

[@Serg-rz1ud]

очень толково и интересно, спасибо!

[@itgid]

Спасибо. Полностью согласен!

[@АлександрМатчин-ц5я]

Здравствуйте! Подскажите почему мы здесь прописали свойство overflow: hidden не только "two", но и "one" и родителю?

[@mrECMAScript]

Боже мой, в рот мне ноги, это Дэвид Блейн и магия JS. Спасибо Вам!

[@jinsupport8989]

и еще один вопросик есть. Делал подобную анимацию и при отведении мышки с блока поставил событие MOUSEOUT вместо MOUSELEAVE и получилость не то, что хотелось бы... Можете пояснить пожалуйста в чем разница между ними??? ( и еще MOUSEENTER и MOUSEOVER)

[@DrZlad]

Спасибо Вам за всё!!!

[@АлександрИванов-п4и9ь]

классно, подписался

[@yurkagon]

Спасибо за отличный урок!!!

[@ЯрославВлас-б6т]

подскажите плиз где можно почитать о event

[@АлександрДыкса]

это был крутой урок! спасибо)

[@german3546]

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

[@АлександрТанаков-л7ф]

Я просто при выходе мыши сделал width 100%, спасио урок вообще крутой

[@ДенисДенисов-о2п]

фантастика)) спасибо большое

[@yurii-liakhov]

гениально просто)))круто)Спасибо большое))

[@itgid]

Спасибо!

[@k777ig]

спасибо

[@itgid]

Спасибо, стараюсь.

[@toxatime3330]

А как сделать чтоб анимация слева шла?

[@adi4232]

лайк и спасибо!

[@vvv7220]

Что посоветуете использовать, чтобы этот эффект работал на планшете? onmousedown не работает как хотелось бы. Надо прижимать и листать.

[@itgid]

Нужно подумать чем заненить. Можно по тапу активировать эфект, вешать его на перемещение, а по второму тапу - отключать!

[@itgid]

Или под фото или прям на него вешать input type=range и на него!

[@dimageorgiev5798]

спасибо за ваш труд ! хоткл бы знать на что ориентироваться начинающему фронт енд . какие матерьялы брать кникги по джава скрипт ?

[@pavelladan3887]

Присоединяюсь, хотелось бы чтоб автор посоветовал книги по JS где так же понятно объясяют :)

[@itgid]

Нужно хорошее знание HTML и CSS. По javascript тяжело рекомендовать, сам не смог найти хороших книг. Все они описывают базовые знания программирования, а вот такого взаимодействия как показываю я просто нет. Поэтому поиск продолжается.

[@itgid]

Как вариант, вначале понять синтаксис, а потом читать три блока: javascript.ru и "выразительный javascript". Но читать их тяжело.

[@PokrovskiyAlex]

Прочитал половину учебника learn.javascript.ru и понял, что нужно больше практики. Наткнулся на эти уроки, спасибо автору :) Теперь можно изучать уроки про интернет-магазин.

[@itgid]

Тяжело сказать. Сам не нахожу легких и хороших книг.

[@anixi85]

Добрый день. Такой вопрос: сделал все как вы сказали и все получилось, но когда добавил эти же картинки с таким же кодом и стилями, то на сайте написанному на бутстрапе не работает этот эффект. В body вроде бы нет стилей чтобы влияли на этот эффект, все библиотеки подключены. Это может быть из-за встроенных стилей самого бутстрапа?

[@itgid]

Возможно. Нужно посмотреть пример. Есть ли сайт на хостинге? Чтобы его пощупать.

[@ВиталийСлободянюк-х8м]

Мне понравилось слово в веб-разработке "пощупать"

[@anixi85]

на сайте нет сейчас. к сожалению

[@NightWooooolf]

зачем задавать функциям список параметров (event), если они будут работать и без них?

[@johhnybee]

Дякую!

[@user-bro]

Спасибо за урок. Вопрос такой - как offsetX работает при наезде на рамку внутреннего блока? Почему то у меня из-за этого некорректно работает (то есть offsetX возвращает -1). Если рамки убрать, то все ок. jsfiddle.net/d1hnfx6k/9/

[@jinsupport8989]

Здравствуйте. Подскажите пожалуйста, можно ли такой же эффект сделать с BG всей страницы (т.е. на странице весь контент есть, но в зависимости от того, где находится мышка, изменяется BG)????

[@itgid]

Конечно можно. Опишите подробнее задание.

[@jinsupport8989]

ну например: у нас есть совершенно обычный сайт с меню, контентом футером и т.п. И при движении мыши по странице меняется фоновое изображение на другое (так же как на эффекте , который на видео)

[@itgid]

Да, возможны два варианта - мы в body добавляем два div и изображения и позиционируем их друг над другом, а затем выводим все остальные элементы. Далее как в видео. Отличий никаких. Но в ходе реализации нужно подобрать очень большие размеры фото - под экраны разных размеров, иначе качество будет страдать.

[@jinsupport8989]

ну а если у BG включен repeat?

[@webdewep8992]

А как это все автоматизировать? Допустим на странице n-количество фото и периодически добавляются новые. Каждому добавлять уникальный id и писать данную функцию?

[@itgid]

Нет, не нужно. Постараюсь в ближайший день два написать данный эффект для n-блоков.

[@webdev5107]

ничто не мешает прописать всем контейнерам и фото класс, как это и будет сделано в html. и уже его отлавливать и вешать js. ну или обернуть всё одним и от него ловить детей) id даются для примера, это удобно. а так ими пользуются только для уникальных элементов, которые редки на странице или онли для запуска js)

[@MadinDenys]

document.getElementById('myslide').onmousemove = function (event) { var x = event.offsetX; document.getElementById('two').style.width = x + 'px'; } document.getElementById('myslide').onmouseleave = function (event) { var rw = document.getElementById('myslide').style.width; document.getElementById('two').style.width = rw; } Я сделал что бы размер блока автоматом становился = радителю

[@alexjohnson1615]

9:51 ЩЕЕЕЕЕЕЕ!!!

[@zakiro4277]

шок и гек)

[@РусскийОбзор-з6ч]

Запиши уроки на счёт рекурсии и побитовых операторов.

[@itgid]

Рекурсия описана в setTimeout.

[@DrZlad]

Вообще-то к не знакомому человеку надо обращаться на «Вы». А когда человек что то просит, то надо говорить: «пожалуйста».

[@victorkas2279]

Спасибо за урок. Я к сожалению не знаю иного способа связаться с вами, у меня вопрос, как вывести data html документа codepen.io/vic4884/pen/XEqNrw?editors=1011 - 11 строка в окне js Идея менять запись при наведении, запись берется из fтрибута data-toggle

[@itgid]

Какой именно data html вы имеете в ввиду? На приведенном примере вроде все работает?

[@victorkas2279]

да, разобрался, спасибо =) вернее тоже подсказали =)

[@TheLeKSaN]

Klass!

[@Сайхан-н4б]

сайт с файлами уроков не работает?

[@itgid]

Какой и почему? Все работает.

[@Сайхан-н4б]

все, заработало) спасибо за уроки) В день смотрю около 5 уроков) надеюсь досмотрю все и ничего не забуду

[@itgid]

Я рад! Спасибо за коммент!

[@miza8873]

Извините, а как сделать всё это адаптивным. С помощью медиазапросов муторно, нет?Помогите пж)

[@АлександрК-ц8ю6ю]

сайт с фотографиями не работает. Что делать?

[@9keepa]

у меня сайт ваш недоступен, пробывал в течении недели зайти ..провайдер мотив ОШИБКА Запрошенный URL не может быть получен При получении URL w3.org.ua/jsvideo/videouroki-js-23-pereklyuchaemsya-mezhdu-fotografiyami/ произошла следующая ошибка Соединение с 185.68.16.207 не удалось Система вернула: (110) Connection timed out Удаленный узел или сеть недоступен. Повторите запрос позднее Администратор Вашего кэша: webmaster.

[@romankostiuk]

Don't repeat yourself перший закон програмування для web ui. Це також відноситься до стилів. Код в css повторюється...

[@manasbekeshenkulov7389]

Klass

[@zakiro4277]

9:54 слава украине)

[@КириллГришин-и5л]

спасибо за уроки...текст на сайте...вернее шрифт,глаза режет только

[@ВиталийСлободянюк-х8м]

всё понять кроме offsetX

[@Bogelma]

а ведь не добились эффекта желаемого, что бы при наведении без торможения картинка менялась, а когда вывели курсор мышки из блока фоток - чтто бы медленно.. ... неужели без css Джава Скрипт это всё не потянет??? или вы просто не знаете?

[@alpha-dzhem]

А зачем это делать без CSS? В стилях описывается вид в скриптах функциональность. Всё как надо. Что Вас не устраивает?

[@АлександрТанаков-л7ф]

Блин, как тут 5 лайков поставить?!

[@ВладиславКузнецов-в4э]

Казалось бы, при чем тут Украина?))

[@skeelo3157]

зачем путать людей на слове ease? это читается как из

[@itgid]

Боже мой, неужели?