אני עומדת לפרט לך
את החומר שלמדנו בסדנא.
אפשר לראות המחשה לאפקט כאן:
https://codepen.io/Juxtopposed/full/NWExxja
אני מזכירה שהמטרה היא לא
האפקט המדליק שיוצא בסוף
אלא ההבנה של מה שעומד מאחוריו.
הוספנו לדף
אלמנט שעליו יחול האפקט של היפוכי הצבעים
זה יכול להיות פופאפ,
אלמנט כותרת/תמונה וכו' עם מיקום מוחלט ככה שהדף יגלל מתחתיו והאפקט יבלוט,
אלמנט כותרת/תמונה וכו' שיש בו אפקט תנועה כלשהו ככה שיהיה אפשר לראות אלמנטים נגללים מתחתיו, ונשים לב לחילופי הצבעים.
אפשר גם להשתמש באלמנט HTML רגיל.
.
נכנס למתקדם -> CSS מותאם אישית
(ב HTML פשוט נגדיר CSS)
ונכניס שם את הקוד הבא:
selector, selector * {
background: white!important;
mix-blend-mode: difference!important;
}
אם לא עבדת עם אלמנטור
אז במקום המילה selector
כתבי ביטוי CSS לבחירת האלמנט.
זו בעצם כולה פקודת CSS
אבל היא משפיעה דרמטית על האתר
אפשר לעוף עם זה, כמו שהראיתי בקישור למעלה
ממש להתבסס על זה בעיצוב
ולגרום לחילופי צבעים
מגניבי עין 😉
שמת לב שבכלל לא השתמשנו כאן
בפקודות של GSAP
אלא בפקודת CSS.
אז למה אני אומרת
שזה טעימה מקורס GSAP?
כי אולי GSAP זה השם של הקורס
אבל תכלס,
גם על הפקודה הזו עברנו בקורס
המטרה של הקורס היא בסוף
שתצאי עם אתרי השראה סופר מגניבים
ואני משלבת בה עוד כלים
מתוך הנסיון המקצועי שלי
למשל,
הוספנו גם שימוש קל בספריית three.js
ככה שהקוד שלנו משחק גם
עם אלמנטי תלת מימד!
אבל את יודעת
זה לא באמת
טעימה מקורס קסם ה GSAP
אולי טעימונת.
אנחנו כותבות קודים רוחביים
שמשפיעים על כל האתר
והחוויה של הגולש בו.
אנחנו ממש מחליטות
מה יקרה בכל רגע ורגע
של הגלילה באתר
ואמאלה מה קורה שם
מוזמנת לראות כאן את כל הפרטים
ולהירשם זריז
כי השבוע ההרשמה המוקדמת נסגרת!
אנחנו כבר רוצות להתחיל 🙂
