ב-Online
 
 
 
 
 
 
 
טרנדי 
CSS3 וגלריות אינטראקטיביות  

CSS3 וגלריות אינטראקטיביות

 
טרנדי |
 

איזה אפשרויות עיצוב מתקדמות מציעה css3 ואיך ניתן לנצל זאת כדי ליצור גלריות ייחודיות? יונית רושו עם התשובות

 
 
 
 
 
 
 
 
 
 
 

 

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

 

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

 

Css3: הגדרות שמסירות את הגבלות העיצוב

 

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

 

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

 

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

 
 

גלריות בתנועה מתמדת

 

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

 
התמונות זזות כל הזמן
 התמונות זזות כל הזמן   צילום: צילומסך 
 

 

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

 

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

 
משחק מעניין של תנועות עם מעבר העכבר
 משחק מעניין של תנועות עם מעבר העכבר   צילום: צילומסך 
 

 

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

 
הגלריה היא הבסיס של כל עיצוב האתר
 הגלריה היא הבסיס של כל עיצוב האתר   צילום: צילומסך 
 

גלריות ללא פלאש

 

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

 

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

 
הן הכותרת והן התמונה זזות, כל אחת במהירות שונה
 הן הכותרת והן התמונה זזות, כל אחת במהירות שונה   צילום: צילומסך 
 

 

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

 

 
התמונות זזות בהתאם לתנועת העכבר
 התמונות זזות בהתאם לתנועת העכבר   צילום: צילומסך 
 

גלריה על בסיס קונספט ייחודי

 

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

 
גלריה על בסיס לוח שנה אינטראקטיבי
 גלריה על בסיס לוח שנה אינטראקטיבי   צילום: צילומסך 
 

מעברים מיוחדים בין תמונות: הדרגתיות

תנועות משנה קטנות וצבעים זרחניים
 תנועות משנה קטנות וצבעים זרחניים 
 צילום: צילומסך 
 

 

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

 

המצב השגרתי והבנלי הוא שבמעבר עכבר מעל תמונה, היא משתנה לתמונה אחרת. השינוי בתמונה מתרחש בדרך כלל בבת אחת - מתמונה אחת לשניה ובחזרה לראשונה, ללא תנועה.

 

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

 

מעברים מיוחדים בין תמונות: שקיפויות ו-Fade

 

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

 
שינוי צבע הדרגתי
 שינוי צבע הדרגתי   צילום: צילומסך 
 

ניגודיות: שדרוג פשוט לגלריה משגעת

 

באתר הבא כל התמונות מוחשכות ורק תמונה בודדת מוארת כשעוברים מעליה עם העכבר. כה פשוט וכה יפה. האתר כתוב ב-html5.

 
התמונות מוחשכות ורק תמונה בודדת מוארת כשעוברים מעליה עם העכבר
 התמונות מוחשכות ורק תמונה בודדת מוארת כשעוברים מעליה עם העכבר   צילום: צילומסך 
 

מיון וסינון תמונות בגלריות עמוסות תוכן

 

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

 
לחיצה על כפתורי המיון או הסינון למעלה גורמים לתזוזת התמונות
 לחיצה על כפתורי המיון או הסינון למעלה גורמים לתזוזת התמונות   צילום: צילומסך 
 
יונית רושו
 יונית רושו 
 צילום: יח"צ 
 

 

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

 

 

הכותבת היא מנכ"לית בוטיק האינטרנט דיינמיק-ווב ומרצה במסלול האינטראקטיבי במכללת שנקר

 
 
 
@@@@@@@@@@@@@@@@@@@ ilan @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 
@@@@@@@@@@@@@@@@@@@ ilan @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 
 
תגובות
הוסף תגובה0 תגובות
הוספת תגובה
מאת
 
נושא
 
תוכן
 
 
 
 
תודה! תגובתך התקבלה.
התגובה תתפרסם בכפוף לתנאי האתר.
 
 
 
 
 

כל הזכויות שמורות 2011 © נענע 10 בע"מ
 
 
 
 
כל הזכויות שמורות © Nana10 בע"מ
Video powered by