אפקטים מגניבים

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

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

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

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

מקווה שגם אתם תהנו:

1. אתרים מגניבים:
   1. http://www.booking.com/nye/
   2. http://codyhouse.co/demo/3d-curtain-template/index.html
   3. http://www.designbreak.io/ – inspiration
   4. http://www.instantshift.com/2015/02/13/new-creative-wordpress-websites/ – רשימת אתרי וורדפרס להשראה
   5. http://www.instantshift.com/2015/01/22/50-new-single-page-website-designs/ – רשימת אתרי דף אחד
   6. http://alvarotrigo.com/pagePiling/#page2 – פאראלאקס
   7. http://callmenick.com/tutorial-demos/simple-parallax-effect/ – מדריך פאראלאקס
   8. http://webloggerz.com/most-popular-wordpress-themes/ – תבניות פופולריות
   9. http://beta.rallyinteractive.com/ – פאראלקס
   10. http://premium.wpmudev.org/blog/wordpress-sites-changing-the-game – רשימת 15 אתרי וורדפרס עם אפקטים מגניבים
   11.  http://codemyui.com – ספריה של יישומי UI.
   12. https://raphaelfabeni.com/ui-interactions – אוסף כפתורים מגניבים עם אינטראקציות UI.
   13. כפתורי on-off (התווסף ה-20/4/2020)
   14. כפתור on-off עם ציור של לילה ויום, ואותו דבר רק בהיפוך צבעים (התווסף ב-20/4/2020)
   15. אוסף אנימציות ואינטראקציות מס’ 6 של Codrops
   16. כפתורי הדלקה (toggle buttons) יפים (התווסף ב-1/10/2020)
2. אפקטים מגניבים:
   1. http://ianlunn.github.io/Hover – מעבר עכבר
   2. http://callmenick.com/2015/01/10/nicer-icon-hover-effects-with-css3-transitions/ – מעבר עכבר
   3. http://tympanus.net/Development/ClickEffects/ – הקלקה
   4. http://codyhouse.co/demo/full-screen-pushing-navigation/index.html#0 תפריט נדחף על מסך שלם
   5. http://tympanus.net/Development/FullscreenLayoutPageTransitions/ – מעבר בין חלקי עמוד
   6. http://tympanus.net/Development/PageTransitions/ – מעבר בין חלקי עמוד
   7. כידוע, אלמנט ה-select מאתגר לעיצוב, ולכן בד”כ כותבים קוד שמחליף אותו באלמנטים אחרים. הנה כמה ספריות או קטעי קוד שעושים זאת:
      1. אפקטים של dropdown מבית typmanus.
      2. Dropdown באמצעות CSS בלבד.
      3. אונה קרבץ בפוסט אורח ב-CSS-tricks על CSS ב-dropdown-ים.
      4. ספריית select2, שמלבד עיצוב היא מאפשרת גם פונקציונליות מוגברת, כגון בחירה מרובה, או חיפוש בתוך ה-dropdown.
   8. http://felicegattuso.com/projects/datedropper/ – בחירת תאריך מגניבה
   9. http://tympanus.net/Tutorials/PlayfulTrampolineEffect/ – מעבר בין חלקי דף
   10. http://christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/ – עמודה צדדית מוטה
   11. http://www.slashie.org/articles/up-your-css-game-with-math/ – זיג זג
   12. http://tympanus.net/Development/CreativeGooeyEffects/index.html – אפקטים מגניבים
   13. http://tympanus.net/Development/TextInputEffects/index2.html – אפקטי text input
   14. http://tympanus.net/Development/AnimatedGridLayout/index.html – מעבר בין חלקי דף
   15. http://codyhouse.co/demo/3d-folding-effect/index.html – מעבר בין חלקי דף
   16. http://tympanus.net/Development/TextStylesHoverEffects/ – מעבר עכבר על טקסט
   17. http://anicollection.github.io/#/ – אנימציות במעבר עכבר
   18. http://tympanus.net/codrops/2015/06/18/card-expansion-effect-svg-clippath מעבר בין חלקי דף
   19. http://codyhouse.co/gem/page-scroll-effects גלילת דף
   20. http://codersblock.com/blog/checkbox-trickery-with-css משחקים עם כפתורי רדיו
   21. http://tympanus.net/Development/ImageGridEffects – אפקטים על גלריית תמונות
   22. השראה לעיצוב אפקטים של מעבר עכבר על פריטים בתפריט.
   23. https://emilkowalski.github.io/css-effects-snippets – מעבר עכבר (25/9/19)
   24. כיסוי וגילוי של אלמנט, בלולאה חוזרת  (התווסף ב-2/10/19)
   25. עקבות זנב עכבר. (התווסף ב-21/11/19)
   26. אנימציה בזמן העלאת קובץ תוך שימוש באלמנט יחיד (התווסף ב-28/11/19)
   27. אפקטים של מעקב עכבר אחרי תמונות – image trail effects (התווסף ב-5/12/19)
   28. תפריט המבורגר נפתח על כל המסך (התווסף ב-9/12/19)
   29. מעבר עכבר על תמונות (התווסף ב-5/4/2020)
   30. Header-ים עם התנהגות מעניינת (התווסף ב-20/4/2020)
   31. קו תחתי של קישור הופך במעבר עכבר לצבע רקע. (התווסף ב-11/5/2020)
   32. אפקטים של העכבר (התווסף ב-20/5/2020)
   33. אפקטים מדליקים בלחיצה על כפתורים. (התווסף ב-18/11/2020)
   34. עיצובי מעבר עכבר לקישורים
   35. כפתורי קישור מעוצבים
   36. אוסף מעברי עכבר מונפשים
   37. אנימציות underline
3. רכיבים מוכנים:
   1. https://formstone.it – ספריית רכיבים מבוססת jQuery
   2. כרטיסי ביקור דיגטליים, בעיצובים שונים
   3. רכיב גלריה פשוט וללא תלויות (התווסף ב-2/10/19)
   4. progress tracker – מעקב התקדמות בטופס (התווסף ב-27/11/19)
   5. תגובות לפוסטים באמצעות issues של Github (התווסף ב-27/11/19)
   6. ספריית מיקרו-אנימציות (אנימציות שמופעלות במעבר עכבר או בהקלקה) (התווסף ב-2/12/19)
   7. ספרייה שיוצרת פאראלאקס (התווסף ב-4/3/2020)
   8. ספריית רכיבי פרונט אנד של CodyHouse (התווסף ב-10/4/2020)
   9. ספריית water.css (התווסף ב-13/4/2020)
   10. ספריית JS קטנה שמייצרת ומנפישה סימונים על גבי הטקסט (התווסף ב-11/6/2020)
   11. תוסף JS שעושה count down (התווסף ב-11/6/2020)
   12. לפזר קצת אינטראקטיביות בעיצוב (התווסף ב-14/6/2020)
   13. סליידר תמונות עם כמה פקדים (התווסף ב-29/6/2020)
   14. תפריט נפתח כשאין מקום (התווסף ב-29/6/2020)
   15. ספריית אנימציות (התווסף ב-23/7/2020)
   16. כפתור המבורגר שאפשר לבחור את האנימציות, הצבעים ואפילו ה-class-ים (התווסף ב-5/2/21)
   17. אנימציות העלאה במינימום מאמץ (התווסף ב-14/2/21)
   18. Auto Complete (התווסף ב-15/2/21)
   19. Autocomplete נגיש (התווסף ב-2/3/21)
   20. ווידג’ט טאבים (התווסף ב-2/3/21)
   21. חלון צף (modal dialog) נגיש (התווסף ב-2/3/21)
4. פיצ’רים שאינם אפקטים:
   1. ספריית גרור והשלך (drag and drop) (התווסף ב-2/10/19)
   2. עוד ספריית גררי והשליכי (drag and drop) (התווסף ב-4/10/2020)
   3. פס גלילה מעוצב (התווסף ב-2/10/19)
   4. אנימציות עם clip-path (התווסף ב-18/11/19)
   5. מיון והזזת פריטים באמצעות JS (התווסף ב-9/3/2020)
   6. צבעים, גופנים, ועוד משאבים למפתחי אינטרנט ולמעצבים – ספריית פלטות צבעים, מילון CSS, ספריית גרדיאנטים, התאמות פונטים, ועוד מטעמים למפתחים ומעצבים (התווסף ב-10/4/2020)
   7. מונה כניסות קטן (התווסף ב-4/10/2020)
   8. טופס על נייר מקופל (התווסף ב-20/4/2020)
   9. ספרייה ליצירת ציר זמן (Timeline)