צל ריאליסטי ורספונסיבי ב-HTML, CSS, JQUERY, JS
 

קודם כל לשם השוואה כך נראה צל ב-CSS3

וכך נראה הצל שמגיב למקור האור + יותר ריאליסטי - לחץ כאן

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

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

הנה גרסא ללא הצל הענקי (תשנו את הקובץ 5.html למספרים שבין 1 ל-5 לראות התקדמות - אך ורק בכרום כי שם עדיין לא התאמתי לכל הדפדפנים).

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

מאוד יפה,
הקונספט מאוד טוב, המימוש עם ה DOM בעייתי מבחינת ביצועים כי box shadow זה דבר יחסית יקר ב paint והרבה משחקים עם זה יטחן את המעבד.
יהיה מאוד מעניין לראות מימוש לכזה דבר לאלמנטים בCANVAS

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

הייתי בטוח שזה יהיה איטי\יקרוס וכו'

כל הכבוד! מאוד יפה :)

נסה לשים תמונת רגע fixed ותראה כמה כבד זה.
במיוחד אם תעשה scroll לעמוד.

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

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

אגב כתבתי בלוגפוסט למי שמעוניין עם קצת הסברים בצד הטכני
http://www.lioramsalem.co.il/blog/post/45