על האפקט הזה
כיף לי לכתוב מדריך
כי הוא פשוט פשוט פשוט
ואפשר לקחת אותו לאלף מקומות.
(נ.ב.
בסוף יש גם בשורה שווה)
נכון תאורה חמודה?
היא עוקבת אחרי סמן העכבר
וזזה איתו ביחד.
אפשר סתם לתת תאורה
בגווני האתר.
אפשר גם שהתאורה תהיה מאחורי התוכן
(עם 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 תגובות
אהבתי ממש את כל הדברים המגניבים שאת שולחת שמשפר את חווית הגלישה באתרים
איזה כיף :)
תהני!
תיקון טעות-
את הגוון רואים בשורה 91 ולא 81 כמו שכתבת.
הטעות היא שנשאר כאן בטעות טקסט מיותר של אפקט אחר
תיקנתי את זה
תודה!
היי רבקי
יכולה להסביר איך עושים שזה יהיה מאחורי הטקסטים והתמונות ולא מעל?
בשמחה רוחמה,
את יודעת איך מגדירים Z-INDEX לאלמנטים?
הרעיון הוא שה Z-INDEX של הטקסטים צריך להיות יותר גבוה מ ה Z-INDEX של האלמנט של התאורה
תודה רבה רבקי, על התשובה המהירה :)
ראיתי שכתבת קודם שזה מה שצריך להגדיר
רק שאין לי מושג איך ואיפה זה
זה משהו שיש מצב לכתוב בכמה מילים?