В этом видеоуроке вы узнаете, как реализовать на своем сайте эффект смены изображений в стиле “до-после”.
Вместо того, чтобы ставить две статичные картинки, как это обычно делается, можно задействовать данный способ, который выглядит гораздо эффектнее.
Такой скрипт я использовал в презентации курса “Photoshop для фотографа”, где показывалось, как человек научится обрабатывать свои фотографии.
Также этот скрипт можно использовать в презентациях, посвященных борьбе с лишним весом, с наращиванием мышечной массы и во всех остальных случаях где можно показать результат в виде фотографий “до-после”.
здравствуйте с вами евгений попов в этом видео мы с вами разберем как можно создать вот такой эффект до после на страницах вашего сайта этот эффект очень часто используются в различных презентациях и вместо того чтобы оставить две статичные картинки до в режиме док после мы научимся делать вот такое плавное изменение которое более эффектно смотрится и сразу человек видит результат что было и что стало в данном случае этот скрипт мы использовали при рекламе курса photoshop для фотографа не показываем чему человек научится как он научиться обрабатывать свои фотографии пройдя данный курс также данный эффект можно использовать при презентации многих других информационных продуктов по снижению веса например либо наоборот по наращиванию мышечной массы но и во многих других случаях итак с чего начать если вы хотите достичь такого эффекта на страницах своего сайта я открыл локальную версию данного сайта без этого эффекта то есть по сути это тестовый сайт куда я буду вставляя сейчас этот эффект и вы соответственно будете смотреть как это делается и сможете ставить на любой другой сайтов и так приступим вместе с этим видеороликом вы должны были скачать еще архив до после . zip в котором находятся все необходимые материалы для работы данного скрипта успокойте данный архив там вы найдёте папочку допуска в которой находится еще четыре папки нас здесь интересует инструкция поэтому первым делом можно открыть инструкцию здесь у нас всех у шагом будет расписано и так у меня открыто инструкция у меня открыт тот сайт куда я хочу вставить данный эффект здесь в левой панели у меня так же открыто структуры данного сайта + я рекомендую вам сразу открыть ту страницу в которой вы будете оставлять код в своем редакторе кода моем случае это редактор кода печки дизайнер я открыл индексную страницу моего сайта в которой я хочу ставить данный эффект итак начнем с ч не инструкции первое что нам нужно сделать это подготовить несколько пар и фотографии стиле до после которые мы будем использовать для реализации данного эффекта эти фотографии вы можете взять из папочки м же здесь пять вариантов да и 5 вариантов после и нам нужно скопировать эти файлы в папку с нашим сайтом там у меня также есть папка им же я туда их копирую отлично следующий шаг это вставка html кода который будет у нас составлять каркас данного эффекта здесь принципе все достаточно просто копируем данный код и вставляем в то место страница где мы хотим наблюдать данный эффект моем случае это место после строки посмотреть каких результатов вы научитесь достигать итак я оставил данный код если кратко посмотреть на него и мы увидим что он состоит из одного контейнера div который имеет идентификатор гайлер иван и класс galerie внутри него есть еще три блока div 1 который показывает текстовое сообщение что идет загрузка слайдов она нужна когда слоевища не загружены чтобы у нас не получилось ситуации что перелистываются еще не загруженные картинки мы будем сначала вводить в какое сообщение что идет загрузка слайдов все это хранится вот в этом блоке div с классом горели прелоадер дальше идет основной блок div с классом слайд который содержит 7 все 10 картинок у каждой картинке есть чего атрибут alt в котором пишет исходно это фото или уже после обработки и последний блок div здесь это блог для показа такого всплывающего текста над картинкой в нем как раз таки будет показываться исходно это фото или после обработки вот такой простой достаточно html каркас мы его вставляем страницу и смотрим следующий пункт здесь идет кстати краткое описание можете почитать чтобы лучше понять структуру дальше нам нужно вставить css код который будет этот каркас уже позиционировать придаст ему нужны эффекты и размеры этот css код в принципе лучше поместить в отдельный документ и подключить его к нашей странице поэтому в редакторе кода в папочке исчез с моего сайта я создам новый документ назову его например до после . css и открыв этот документ помещу туда css код который отвечает именно за эффект до после теперь сразу не забываем подключить данный css-файл странице нашего сайта куда мы вставляем данный эффект как я просто скопирую уже путь существующей и поменяю здесь на до после отлично html-код мы подключились с подключили смотрим следующий шаг так следующий шаг это у нас подключение javascript файлов естественно данные эффекты достигаются за счет javascript кода в данном случае используется библиотека джейк вере и специальный плагин грегори сайкл но этих двух скриптов будет здесь недостаточно мы должны будем подключить еще один javascript-файл в который про пишем код на следующем шаге так сейчас первым делом нам нужно скопировать джек вере и джек вере сайкл куда-нибудь в папку с нашим сайтом и затем их подключить эти файлы также есть у вас дополнительных материалах в папке g с вот они два этих в майло декоре и джек вели сайкл я скопировал их в папку g с моего сайта потому что она для этого и предназначена в принципе и здесь же нам желательно создать сразу файл слайд джесс которую мы подключим необходимый код уже в следующем шаге поэтому здесь в папки джеймс я сразу создам новый файл назову его знает джей с и в принципе мы можем подключать все эти три файла уже в области от нашего документа поэтому из инструкции можно прям скопировать данный код и в область hет после таблиц стилей подключаем эти javascript так я сохраняю и смотрю инструкцию дальше теперь следующем шаге нам остается наполнить файл славится джей с который мы только что создали вот этим кодом специально для того чтобы вы могли разобраться если вам интересна тема javascript а тема джейк вере мы здесь все прокомментировали поэтому посмотрите вы читаете и вы уже сможете более тонко настроить под себя данный плагин меняя различные здесь параметр если же javascript и джек вере во мне знаком то лучше здесь ничего не трогать просто скопируйте данный код и ставьте его files like this здесь по сути у нас идет описание функции которые выполняет все действия по смене картинок так мы открываем файл славится джеймс и туда эту код этой функции вставляем отлично большую часть работы мы с вами выполнили то есть у нас есть html каркас у нас есть css который отвечает за внешний вид у нас есть все необходимые javascript и которые обеспечивают работу давайте посмотрим что мы на данный момент имеем вот у меня на странице куда я оставлял мы на данный момент имеем вот такой блок div который у нас изначально показывается и в нем пишется загрузкам слайдов пожалуйста подождите здесь стоит сказать немножко о принципе работы вообще данного скрипта чтобы вы его понимали работает он следующим образом смотрите когда у нас страница только-только загружается и браузер доходит до вот этого блока с перелистыванием фотографий то если мы обратим внимание на css таблицу мы увидим что вот этот блок у нас изначально скрыт у него идет класс слайд если мы посмотрим таблицам до после то увидим что класс слайд имеет css-свойства display но ведь изначально блок с этими слайдами не показывается это сделано для того чтобы картинки сначала загрузились перед тем как они начнут перелистываются это очень важно потому что если этого не сделать начнут перелистывал еще не загруженные картинки это будет смотреться плохо так второй момент вот этот блок мы видим изначально то есть когда страниц еще не загружена мы видим то на блок как мы сейчас и наблюдаем в нем показывается загрузка слайдов и вот этот файлик gif анимация если кстати он у вас не отображается я про него забыл сказать он у вас находится в папке дополнительных материалов вот он ajax lauder gif его нужно положить туда же где у вас хранится таблицы стилей отвечающая за показ слайда в моем случае на таблицы стилей до после и вот у мне этот файлик он просто уже здесь лежал поэтому мы его не приходило скопировать вам же нужно его скопировать в тоже место где у вас находится таблицы стилей до после . css и так по схеме работы мы выяснили что изначально слайды не показываются изначально показывается только вот эта картинка возникает вопрос когда же происходит вот эта смена когда же данные область наоборот исчезает а у нас места не показываются слайды происходит это как раз таки и внутри вот этой функции которые мы закинули files like this вот у нас здесь первым же шагом мы прячем прелоадер это вот как раз таки вот этот блок первым шагом он прячется наши слайды вторым шагом показывать он идет функции шоу которое показывает контейнер со слайдами ну и дальше уже начинается вот этот цикл по перелистывания и есть различные тонкости по его работе например когда мы наводим мышь цикл должен останавливаться когда мы мыши убираем цикл продолжается и получается нам осталось выполнить последнюю самую главную задачу вызвать вот эту функцию в тот момент когда страница полностью загружено потому что когда страница полностью загружены мы можем уже смело прятать слайдер и показывать наши слайды с фотографиями и чтобы это реализовать смотрим последний шаг нашей инструкции здесь мы видим что для того чтобы запустить эффект в дело нам достаточно в так будет прописать на события onload вызов воды функций и мы ее туда прописываем индексный документ я нахожусь здесь так будет и сюда прописываю на события он вот вызов функции старт словить теперь если все верно у нас вместо вот этого блока должны появиться фотографии вот они у меня появились то есть все прошло успешно вот таким образом добавляется данный эффект на странице вашего сайта еще раз пройдемся по шагам то есть первым делом подготовили картинки скопировали их допустим в папку им же вашего сайта далее вставили html-код в то место где вы хотите видеть данный эффект проследите чтобы путь до картинок был верный дальше ставились css код который нужен на моем случае его стоял файл допросами и подключила к хиллтопу сми сюда в области head третьим шагом подключаем необходимые javascript и четвёртым шагом прописываем files life vs функцию старт слайд и последним шагом вызываем эту функцию starslife уже по мере загрузки страницы на событие он вот тогда будет все в принципе ничего сложного здесь нет если вдруг возникнут какие-то проблемы то к этому уроку в дополнительных материалах есть чего папка д мы здесь уже содержится рабочий вариант данного скрипта если вы запускаете файл индекс ничего кроме этого скрипта уже нету но здесь все рабочие то есть вы можете разобраться в причинах почему у вас допустим что-то не работает посмотри вот это дыма на этом здесь всё с вами был евгений попов и увидимся в следующих видео уроках
