מבוא
אנחנו רגילים למעברי תמונות שמתבצעות בעזרת AJAX המכונה סליידר (Slider). הרבה מאוד מדריכים נכתבו עד היום ואני מניח שיוכתבו בהמשך.
היום אני רוצה להציג לכם מדריכים הכי מתקדמים שמאפשרים להשתמש ב CSS3 כתחליף לAJAX.
חלק מהמדריכים כתובים כך שכבר עכשיו ניתן לקחת אותם ולהטמיע בכל אתר ואתר, חלק אחר עדיין לא נתמך בכל הדפדפנים. לצערי הרב רובם לא עובדים בIE9 ועל גרסאות 7,8 בכלל לא מדובר.
אתר codrops נמצא ברשימת המומלצים ביותר.
1. פונקציות CSS3 חדשניות ביותר – מעבר בין התמונות.
למעשה עד היום רוב השימוש ב 3D התבצע בעזרת AJAX ותוספי JS נוספים שמשפרים את ומראה האתר. בדוגמא הזאת ניתן לראות שימוש ב CSS3 נטו.
אפקטים עובדים רק בדפדפני webkit (Google Chrome ו Safari). אצלי ב Safari על Windowds 7 זה לא עבד.
מי שרוצה לראות את זה ואין לו דפדפני webkit יכול לראות את הסרטון שמדגים את האפקטים:
2. אפקט LightBox ו ThickBox בנוי על בסיס CSS3.
כולנו מכירים את האפקט LightBox. מדריך הזה מראה לנו כיצד ניתן לעשות את כל זה רק בעזרת CSS.
3. פורטפוליו בעזרת CSS3.
תחליף ל jQuery קוד, שימוש בCSS נטו. קוד נקי וידידותי למתכנתים.
4. אפקט hover.
מצביעים על תמונה ומקבלים פירוט שלה.
5. אפקט אקורדיון.
לחיצה על התפריט פותחת את הטקסט או את התת-תפריט.
סיכום
ללא ספק CSS3 מאפשר שימוש בהרבה מאוד פונקציות חדשות ללא צורך בידע וניסיון עבודה על JS. יותר מזה, CSS3 לחלותין מבטלת את צורך ב Flash.
החיסרון היחידי שמצאתי בקודים האלה שהם למעשה משתמשים בAncors של HTML (#). זה גורם לבעיית שימושיות באתרים. כל פעם שאני לוחץ על "חזרה" בדפדפן (כדי לחזור לדף קודם) אני חוזר למעשה לאותם Ancors.
לדוגמא: בLightBox לחיצה על התמונה מעבירה ל #pic וכדי לסגור אותה #close וכך כל התמונות. נוצר מצב שגולש יכול לעבור לדך אחר רק ע"י לחיצה באחד התפריטים ולא ע"י חזרה אחורה.
*מקור התמונות codrops
בעיה נוספת, כמובן היא התצוגה ב-IE
במקרה של אקספלורר לא מדובר בבעיה, אלה מדובר בצרה אחת גדולה.
אבל אין מה לעשות עם זה.
למה כל התמונות בדף הזה לא עובדות – ואיך בדיוק נכנסים לכל המדריכים האלו….
קליק על התמונות תעביר למדריך הרצוי.
אני לוחץ על התמונות והוא רושם לי:
image cannot be loaded. make sure the path is correct and image exist
תודה על תשומת לבך, סידרתי לינקים.
עכשיו לינק הוא כותרת.
מעולה ותודה רבה, אך לא ממש מצאתי במדריך הראשון בכתובת הזו מדריך לתכנות המודולים – מצד שני הורדתי והתחלתי לבחון בפיירבאג את ה CSS וראיתי את חלק מהתכונות היפות שהם השתמשו בהם.
ועלו לי רק שתי שאלות – האם אפשר להגדיר דרך ה CSS פונקציה כמו onclick כי נראה לי שלא ואז לפי מה שנראה לי את העברת התמונות הם בכלל עשו ב JS לא?
לדעתי דרך CSS אתה לא יכול להגדיר פונקציה onclick. אולי pseudo-class הזה ":target" יכול להחליף את הפונקציה, אבל זה עדיין בעייתי בגלל התאמות הדפדפנים.
תראה את הוידאו הזה: http://www.youtube.com/watch?v=vqE1MZ0UlaM
לגבי המודולים ו JS, לדעתי היה שם איזשהו סקריפט שאחראי על לחיצה "next" כדי להעביר בצורה ידנית את התמונות.