5 สคริปต์เลื่อนภาพเปรียบเทียบฟรี

แถบเลื่อนที่วางซ้อนไว้ช่วยให้คุณทำการเปรียบเทียบระหว่างสองภาพโดยปกติจะเป็นรูปแบบก่อนหลังโดยที่ทั้งสองภาพซ้อนทับกัน ตัวเลื่อนที่สามารถจัดการได้สามารถลากโดยผู้ใช้เพื่อแสดงภาพก่อนหน้าน้อยลงและภาพหลังมากขึ้นและในทางกลับกัน.

มันเป็นวิธีที่สมบูรณ์แบบสำหรับบางสถานการณ์เช่นการดูเอฟเฟ็กต์ที่รุนแรงของบรรยากาศของดาวอังคารหรือการเปลี่ยนแปลงของภูมิทัศน์เมืองในช่วงครึ่งศตวรรษ.

สำหรับนักออกแบบมันเป็นวิธีที่ยอดเยี่ยมในการสะท้อนให้เห็นถึงจำนวนการเปลี่ยนแปลงเทคนิคหรือวิธีการที่มีอยู่ในภาพต้นฉบับ มีไลบรารี JS ต่างๆที่คุณสามารถใช้เพื่อวัตถุประสงค์ในการเปรียบเทียบ นี่คือ 5 ของพวกเขา.

Twentytwenty

Twentytwenty เป็นเครื่องมือภาพที่ทำให้ง่ายต่อการสังเกตความแตกต่างระหว่างสองภาพ เครื่องมือนี้ใช้ jQuery และ jquery.event.move ในการทำงาน มันใช้งานง่ายมากเพียงแค่ซ้อนสองรูปลงในคอนเทนเนอร์แล้วโทร twentytwenty (); สำหรับภาชนะ.

แล้ว:

 $ ( "# ภาชนะ") twentytwenty (). 

ยี่สิบยี่สิบตอบสนองและทำงานได้กับอุปกรณ์ทั้งหมดและถ้าคุณใช้กรอบงานพื้นฐานนี้จะทำงานนอกกรอบ.

วางข้างๆ

วางข้างๆ ช่วยคุณเปรียบเทียบสื่อสองชิ้น (ภาพถ่ายหรือ GIF) และทำให้มันง่ายสำหรับคุณที่จะเน้นการเปลี่ยนแปลงระหว่างภาพในช่วงเวลาหนึ่ง ปลั๊กอินนี้ใช้งานง่ายและทำงานบนอุปกรณ์ทั้งหมด เพียงแสดงสองภาพจากนั้นเรียกใช้ปลั๊กอินด้วยตัวเลือกที่มี.

ในตัวเลือกคุณสามารถกำหนดตำแหน่งเริ่มต้นของตัวเลื่อนตั้งค่าแนวตั้งหรือแนวนอนเพิ่มเลเบลและเครดิตภาพเคลื่อนไหวและอื่น ๆ.

ลองตัวอย่างด้านล่าง:

imgSlider

imgSlider เป็นปลั๊กอิน jQuery ง่ายๆที่จะทำให้แถบเลื่อนการเปรียบเทียบภาพ การใช้งานนั้นง่ายและไม่ซับซ้อน: หลังจากรวม JS และ CSS แล้วให้ตัดส่วนรูปภาพด้วย div ซ้าย ชั้นเรียนสำหรับ ก่อน ภาพและ ขวา ชั้นเรียนสำหรับ หลังจาก ภาพจากนั้นเปิดใช้งานโดยการโทร .เลื่อน ();. ตัวเลือกของปลั๊กอินรวมถึงการตั้งค่าตำแหน่งเริ่มต้นของตัวเลื่อนและการเพิ่ม / การแสดงคำแนะนำบนตัวเลื่อน.

โทรหาปลั๊กอิน:

 $ ( 'เลื่อน') เลื่อน (). 

Cocoen

Cocoen เปิดใช้งานการสัมผัสด้วยการใช้ jQuery-Touch Event ง่ายต่อการใช้งานเนื่องจากโครงสร้าง HTML คล้ายกับ Twentytwenty เสียบเข้าไป. บนสแต็กสคริปต์นอกเหนือจาก jQuery คุณต้องรวมไลบรารี jQuery Touch Event ข้างๆปลั๊กอินนี้.

 
   
 $ (เอกสาร) .ready (function () $ ('. cocoen'). cocoen (););

ลองตัวอย่างด้านล่าง:

Image Slider เปรียบเทียบ

CodyHouse สาธิตการเลื่อนภาพเปรียบเทียบกับ CSS3, jQuery และสคริปต์บางอย่างเพื่อจัดการกับเหตุการณ์ลากและเพื่อเพิ่มการสนับสนุนมือถือ คุณสามารถทำตามคำอธิบายและคำแนะนำทั้งหมดของการใช้ปลั๊กอินนี้ได้ที่นี่และดูตัวอย่างที่นี่.

ลองตัวอย่างด้านล่าง:

นี่คือ 3 เพิ่มเติม:

กาโต้ - ปลั๊กอินอื่น ๆ ต้องการ jQuery เป็นการพึ่งพา แต่ กาโต้ ไม่ต้องพึ่งพาการทำงานทำให้ไลบรารีมีน้ำหนักเบายิ่งขึ้นสำหรับตัวเลื่อนการเปรียบเทียบรูปภาพ การใช้งานง่ายเพียงแค่ใส่ CSS และ JS Library ของ Cato และติดตามโครงสร้าง HTML ของมัน.

มีตัวเลือกให้ใช้กับตัวเลื่อนของคุณรวมถึงการเพิ่มคำแนะนำเครื่องมือการเปลี่ยนทิศทางตัวเลื่อนแม้กระทั่งการเพิ่มเอฟเฟกต์ตัวกรองเช่นซีเปียและโทนสีเทา อย่างไรก็ตามคุณควรทราบว่าปัจจุบัน Cato รองรับ WebKit เท่านั้น.

ก่อนหลัง - นี่คือน้ำหนักเบาตอบสนองเต็มที่และทำงานกับเค้าโครงและขนาดใดก็ได้ คุณสามารถดูการสาธิตสดได้ที่ Codepen.

แถบเลื่อนการเปรียบเทียบวิดีโอ HTML5 - เมื่อนักพัฒนารายอื่นพยายามสร้างแถบเลื่อนการเปรียบเทียบสำหรับรูปภาพ Dudley Storey จะใช้แถบเลื่อนกับวิดีโอ ในการทำงานเขาใช้ jQuery และโค้ดเพียงไม่กี่บรรทัด ดูตัวอย่างบน Codepen เพื่อดูการกระทำ.