מדריך לאפקט תאורה צבעונית במעבר עכבר, וטדאאאם – בשורה!

על האפקט הזה

כיף לי לכתוב מדריך

כי הוא פשוט פשוט פשוט

ואפשר לקחת אותו לאלף מקומות.

(נ.ב.

בסוף יש גם בשורה שווה)

נכון תאורה חמודה?

היא עוקבת אחרי סמן העכבר

וזזה איתו ביחד.

 

אפשר סתם לתת תאורה

בגווני האתר.

אפשר גם שהתאורה תהיה מאחורי התוכן

(עם Z INDEX  נמוך יותר מזה של התוכן)

ויהיה באתר טקסט בצבע של הרקע

מה שיגרום לזה שלא יראו את הטקסט

אבל כשהתאורה הצבעונית תעבור מתחתיו

הוא "יתגלה".

אפשר גם להוסיף לדף טקסטורה מעניינת

בצבע של הרקע

שתתגלה רק כשהתאורה הצבעונית

תעבור מתחתיו.

 

בקיצור….

תתחילי לשחק 😊

 

איך עושים את זה?

הוספתי לדף אלמנט תמונה

כתמונה בחרתי את העיגול תאורה הירוק שרואים באפקט

הגדרתי ב CSS ID של התמונה – light

הוספתי מתחת אלמנט HTML עם הבא

ומאז הכל הסטוריה ;)

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  const el = document.querySelector('#light');

  window.addEventListener('mousemove', (e) => {
    x = e.clientX - el.offsetWidth / 2;
    y = e.clientY - el.offsetHeight / 2;
    gsap.to(el, {
      x: x,
      y: y,
      duration: 0.2,
      ease: "power2.out"
    });
  });
</script>
<style>
#light {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 100VH;
  width: 100VW;
  max-width: initial;
  max-height: initial;
  pointer-events: none; /* שלא יפריע ללחיצות */
}

#light img {
    width: 100%;
}
</style>
				
			

והבטחתי גם בשורה…

בעז"ה אחרי החגים

מחזור חדש של קורס תכנות לוורדפרס

יצא לדרך.

אפשר לראות את כל הפרטים כאן

 

אני עוד אדסקס על הקורס בעז"ה

אבל מי שרוצה להרוויח מחיר הרשמה מוקדמת

עד ראש השנה

מוזמנת לראות את ההטבה כאן

 

שיהיה לכולנו

אלול מלא זכויות,

רבקי

7 תגובות

  1. אהבתי ממש את כל הדברים המגניבים שאת שולחת שמשפר את חווית הגלישה באתרים

    1. הטעות היא שנשאר כאן בטעות טקסט מיותר של אפקט אחר
      תיקנתי את זה
      תודה!

  2. היי רבקי
    יכולה להסביר איך עושים שזה יהיה מאחורי הטקסטים והתמונות ולא מעל?

    1. בשמחה רוחמה,
      את יודעת איך מגדירים Z-INDEX לאלמנטים?
      הרעיון הוא שה Z-INDEX של הטקסטים צריך להיות יותר גבוה מ ה Z-INDEX של האלמנט של התאורה

      1. תודה רבה רבקי, על התשובה המהירה :)
        ראיתי שכתבת קודם שזה מה שצריך להגדיר
        רק שאין לי מושג איך ואיפה זה
        זה משהו שיש מצב לכתוב בכמה מילים?

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

כניסה לאזור האישי

חייב להיות באנגלית