5 Фрее Имаге Цомпарисон Слидер Сцриптс

Преклапајуће клизаче омогућавају вам да направите поређење између две слике, обично врста пре-после, са две слике постављене једна на другу. Клизач који може да се манипулише, корисник може да повуче да би приказао мање од пре слике и више од слике после, и обрнуто.

То је савршен начин за одређене сценарије, као што су гледање оштрих ефеката атмосфере Марса или како се градски пејзажи мијењају током пола стољећа.

За дизајнере, то је такође одличан начин да се размишља о количини промена које техника или приступ има на оригиналној слици. Постоје различите ЈС библиотеке које можете користити за сврхе поређења. Ево их пет.

Твентитвенти

Твентитвенти је визуелни алат који олакшава бележење разлика између две слике. Овај алат користи јКуери и јкуери.евент.мове за рад. Веома је једноставан за употребу, само ставите две слике у контејнер, а затим позовите твентитвенти (); за контејнер.

Онда:

 $ ("# цонтаинер"). твентитвенти (); 

Двадесет и дванаест је одговоран и ради за све уређаје, а ако користите оквир Фондације, ово ће радити ван оквира.

Јуктапосе

Јуктапосе помаже вам да упоредите два дела медија (фотографије или ГИФ) и олакшате да истакнете промену између слика током времена. Овај плугин је једноставан за употребу и ради на свим уређајима. Само дајте две слике и позовите плугин са доступним опцијама.

На опцијама можете поставити почетну позицију клизача, поставити је вертикално или хоризонтално, додати ознаку и кредит, анимацију и још много тога.

Испробајте демо испод:

имгСлидер

имгСлидер је једноставан јКуери плугин за израду клизача за поређење слика. Употреба је једноставна и лака: након укључивања ЈС-а и ЦСС-а, умотајте слике у див са лево цласс фор тхе пре него што имаге, и јел тако цласс фор тхе после затим је активирајте позивом .слидер ();. Опције додатка укључују подешавање почетне позиције клизача и додавање / приказивање инструкција на клизачу.

Позовите додатак:

 $ ('. слидер'). 

Цоцоен

Цоцоен омогућава додир са употребом јКуери-Тоуцх догађаја. Лако се примењује због ХТМЛ структуре сличне Твентитвенти повезати. На стог скрипте, поред јКуери-а, морате укључити и јКуери Тоуцх Евент библиотеку, поред овог додатка.

 
   
 $ (доцумент) .реади (фунцтион () $ ('. цоцоен'). цоцоен (););

Испробајте демо испод:

Слидер за поређење слика

ЦодиХоусе је направио демо слајдера за поређење слика са ЦСС3, јКуери и неким скриптама за обраду догађаја повлачења и за додавање мобилне подршке. Можете пратити комплетно објашњење и упутства за коришћење овог додатка овде и видети демо овде.

Испробајте демо испод:

Ево још 3:

Цато - Другим додатцима је потребно јКуери као зависност, али Цато не захтева зависност од рада, што га чини лакшом библиотеком за клизаче за поређење слика. Коришћење је једноставно, само укључите Цато ЦСС и ЈС библиотеку и пратите његову ХТМЛ структуру.

Постоје опције које се могу применити на вашем клизачу, укључујући додавање тоолтип-а, промену правца клизача, чак и додавање ефекта филтера као што су сепија и сиви тонови. Међутим, треба напоменути да Цато тренутно има само подршку за ВебКит.

Пре после - То је лаган, потпуно осетљив и ради на било којем распореду и величини. Можете видети ливе демо на Цодепен-у.

ХТМЛ5 Слидер за поређење видео записа - Када други програмери покушају да успореде клизач за слике, онда Дудлеи Стореи примени клизач на видео. Да би радио, он користи јКуери и само неколико редова кода. Погледајте демо на Цодепен да бисте видели акцију.