מבוא
אנחנו רגילים למעברי תמונות שמתבצעות בעזרת 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
