הדרכה לגלילה קצת אחרת

בעצם במקום שהדף יגלל כרגיל כלפי מעלה

כשגוללים את הדף,

כל אזור נעלם באלגנטיות, 

והאזור הבא מופיע במקומו.

איך עושים את הדבר

המדליק הזה?

צרי את הקונטיינרים –

אחד מעל השני בדף

ברצף.

לכל אחד מהם תני במתקדם CSS CLASS

הגדירי את הערך – pin

ומתחת לכל הקונטיינרים האלה

הוסיפי אלמנט HTML 

שבו הזיני את הקוד הבא:

				
					<style>
    .pin {
        position: relative;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js"></script>
<script>
    gsap.registerPlugin(ScrollTrigger);
	jQuery('.pin').each(function() {
		gsap.to(this, {
			scale: 0.7,
			opacity: 0,
			scrollTrigger: {
				trigger: this,
				start: "top top",
				end: "bottom top",
				scrub: true,
				pin: true,
				pinSpacing: false,
				markers: false
			}
		});
	});
</script>
				
			

בנות שאלו אותי

אם בקורס קסם ה GSAP

מקבלים אפקטים מוכנים ישר לשילוב באתר.

 

קודם כל התשובה היא –

כן.

 

כרגע יש כבר אפקטים מדליקים ממש

כמו –

הנפשת מודל תלת מימד (סיבוב והזזה שלו),

סליידר לוגואים שובר שגרה,

החלפה מהממת של קונטיינר

ממצב אופקי למצב אנכי

וכו'…

ואני הולכת וממלאת את המאגר כל הזמן

ככה שגם תלמידות שכבר סיימו ללמוד

תוכלנה לגשת ולקבל כל פעם

אפקטים חדשים.

 

אז למה אני לא

מדברת על זה בכלל?

 

למה אני מתעלמת

מהנקודה המדליקה הזו?

 

כי הקורס הרבה הרבה יותר תורם

ממאגר אפקטים כלשהו.

ב codepen יש ים אפקטים

ויש לי סדנה דיגיטלית

שעולה רק 99 ₪

ומלמדת איך לשלב

את האפקטים שב codepen

באתרים שלך.

לא על הנושא הזה

אנחנו משקיעות ועובדות

6 מפגשים כפול 3 שעות!

 

חוץ מהאפקטים

שזמינים לשילוב

ובגלל שאני בוחרת אותם בפינצטה

המאגר שלהם מתמלא לאט לאט

הבנות יודעות לייצר בעצמן!!

כל אפקט וזרימה של האתר

בהתאם לקונספט שהן בחרו

האתרים יוצאים ככה

מטורפים ברמה אחרת

כי בנות יוצרות אפקטים

שמלווים ממש את כל זרימת האתר

וגורמים לו –

לצאת מהקופסא!

 

הבנת?

 

אז זה לא מאגר אפקטים

כזה או אחר

אלא פשוט

להפוך את האתר עצמו

למשהו אחר לגמרי…

 

הקבוצה נסגרת,

את איתנו?

רישמי זריז ל gsap@appupgo.co.il

מחכה להתחיל,

רבקי

היא פרגנה לך את הקוד

בכיף!

הוסיפי לאלמנטור אלמנט

מסוג HTML.

שימי בו את הקוד הבא:

את הטקסט בעברית

"בואי ליצור…."

שני לטקסט שמתאים לאתר שלך.

את מספר הגוון (F5DAAE)

שני למספר הגוון שמתאים לאתר שלך.

 

 

זהו 🙂

איך יצא?

שתפי אותי,

רבקי

כתיבת תגובה

אולי תאהבי גם:

יש מצב ללמוד GSAP לבד?

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

קסם ה blur

גיליתי שאפקטים משולבי טשטוש (blur) יש בהם קסם מיוחד! בין שאר הקסמים שצצו לנו ביקשתי מתמנה רשות להשתמש בקטע קוד שלה

ברכת שנה טובה מדליקה – לשילוב באתר שלך

נכון מדליק? אינטראקטיבי לגמרי כל ההוראות כאן