5 תמונה חינם השוואה מחוון סקריפטים

מחוונים משוחררים מאפשרים לך לבצע השוואות בין שתי תמונות, בדרך כלל לפני סוג אחר, עם שתי התמונות על גבי אחד על השני. מחוון שניתן לטפל בו, ניתן לגרור על ידי המשתמש כדי להציג פחות מהתמונה הקודמת ויותר מהתמונה, ולהיפך.

זוהי הדרך המושלמת לתרחישים מסוימים, כגון צפייה באפקטים הקשים של האטמוספירה של מאדים או כיצד נופי העיר משתנים במשך יותר ממחצית המאה.

עבור מעצבים, היא גם דרך מצוינת לחשוב על כמות השינוי טכניקה או גישה יש על התמונה המקורית. ישנן ספריות שונות JS אתה יכול להשתמש למטרות השוואה. הנה 5 מהם.

עשרים

עשרים הוא כלי חזותי כדי להקל על ההבדלים בין שתי תמונות. כלי זה ניצול jQuery ו jquery.event.move לעבודה. זה קל מאוד לשימוש, רק מחסנית שתי תמונות לתוך מיכל, ולאחר מכן להתקשר עשרים עשרים (); עבור המכולה.

לאחר מכן:

 $ ("# מיכל"). 

עשרים ועשרים הוא מגיב ועובד עבור כל המכשירים, ואם אתה משתמש במסגרת הקרן, זה יעבוד מתוך הקופסה.

תתמוך

תתמוך מסייע לך להשוות שתי חתיכות של מדיה (תמונות או GIF) ולהקל עליך להדגיש את השינוי בין התמונות לאורך זמן. תוסף זה קל לשימוש ועובד על כל המכשירים. רק לספק שתי תמונות ואז לקרוא את התוסף עם האפשרויות הזמינות.

על האפשרויות, אתה יכול להגדיר את המחוון להתחיל מיקום, להגדיר את זה אנכי או אופקי, להוסיף תווית אשראי, אנימציה ועוד.

נסה הדגמה למטה:

imgSlider

imgSlider הוא תוסף jQuery פשוט לעשות המחוון השוואה התמונה. השימוש הוא פשוט וקל: לאחר כולל JS ו CSS שלה, לעטוף את התמונות div עם שמאלה כיתה עבור לפני תמונה ו ימין כיתה עבור לאחר ולאחר מכן להפעיל אותו על ידי קורא .מחוון ();. אפשרויות התוסף כוללות הגדרת המיקום ההתחלתי של המחוון, והוספת / הצגת הוראות על המחוון.

התקשר לפלאגין:

 $ ('מחוון'). 

קוקן

קוקן מאפשר מגע עם השימוש באירוע jQuery-Touch. זה קל ליישם בשל מבנה HTML דומה עשרים חיבור. על ערימת התסריט, מלבד jQuery אתה צריך לכלול את הספרייה jQuery אירוע מגע, לצד תוסף זה.

 
   
 $ (document) .ready (פונקציה () $ ('cocoen'). cocoen (););

נסה הדגמה למטה:

מחוון השוואה של תמונות

CodyHouse עשה הדגמה של המחוון השוואה התמונה עם CSS3, jQuery וכמה סקריפטים לטפל אירוע גרור כדי להוסיף תמיכה ניידת. אתה יכול לעקוב אחר ההסבר המלא והוראות של שימוש זה תוסף כאן לראות את ההדגמה כאן.

נסה הדגמה למטה:

הנה עוד 3:

קאטו - תוספים אחרים צריכים jQuery כמו תלות אבל קאטו לא דורש תלות לעבודה, מה שהופך אותו ספרייה קל יותר עבור המחוונים השוואה התמונה. השימוש הוא קל, פשוט לכלול CSS של CSS ו ספריית JS ופעל המבנה HTML שלה.

ישנן אפשרויות זמינות להחיל על המחוון שלך, כולל הוספת הסבר קצר, שינוי כיוון המחוון, גם הוספת אפקט מסנן כגון חום כהה וגווני אפור. עם זאת יש לציין כי קאטו כרגע רק תמיכה WebKit.

לפני - זה קל, מלא תגובה, ועובד על כל פריסה וגודל. אתה יכול לראות את הדגמות חיות על Codepen.

השוואה בין HTML5 וידאו - כאשר מפתחים אחרים מנסים להפוך את המחוון השוואה עבור תמונות, ואז דאדלי סטורי להחיל את המחוון וידאו. כדי לעשות עבודה, הוא לנצל את jQuery ורק כמה שורות של קוד. ראה את ההדגמה ב- Codepen כדי לראות את הפעולה.