הי! הוא מתחלף תוך כדי הגלילה!

חיפשתי להעשיר אותך

באפקט קל וכייפי

שיתמזג מושלם

בכל אתר שהוא.

 

אז הטקסט החמוד הזה

שמוצג כל הזמן

אבל – הי!

הוא מתחלף תוך כדי הגלילה!

סגר לי

ת'פינה הזו 😊

 

פשוט וקל להוסיף אותו

לכל אתר

זה הולך ככה – 

 

מוסיפים לאתר אלמנט HTML

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

				
					<section id="sectionEffect">
  <h1>
    <span>חודש</span>
    <span>שבט</span>
    <span>מבורך</span>
  </h1>
</section>
  <script src='https://unpkg.com/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/TextPlugin.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollToPlugin.min.js'></script>
<script>
const arr1 = ["00e2c5","3d62ae","3ac7f3"]
const arr2 = [...arr1]
const words2 = ["ראש","השנה","לאילנות"]
const spans = document.querySelectorAll('h1 span')
const getHexFrom = (arr) => arr.splice( gsap.utils.random(0 ,arr.length-1, 1), 1)

const tle = gsap.timeline({
  defaults:{ ease:'none' },
  scrollTrigger:{
    trigger:'#sectionEffect',
    scrub:true,
  }
})

spans.forEach((span,i)=>{
  gsap.set(span,{'--bge':'#'+getHexFrom(arr1)})

  tle.add( gsap.to(span, { text:words2[i] , delay:3}), i)
  tle.add( gsap.to(span, { '--bge':'#'+getHexFrom(arr2), duration:0.15 }), i)
})
</script>
<style>
#sectionEffect {
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events: none;
  direction: ltr;
}

#sectionEffect h1 {
  width:32vw;
}

#sectionEffect h1 span {
  display:block;
  font-size:7vw;
  position:relative;
  margin-bottom:3vw;
  padding:0 1vw;
  width: fit-content;
  --bg:transparent;
  z-index: 0;
}

#sectionEffect h1 span:after {
  z-index:-1;
  border-radius:1vw;
  content: "";
  width:100%;
  height:33%;
  left:0;
  bottom:0;
  position: absolute;
  background:var(--bge);
}
</style>
				
			

את יכולה להחליף את המילים – במילים שלך

כנ"ל את מספרי הגוונים

(הם נמצאים בשורה 13).

 

מגדירים לאלמנט HTML

מיקום מקובע

ומכוונים את המיקום למקום המושלם

על המסך.

אפשר גם להגדיר לו z-index גבוה

כדי ששום אלמנט לא יסתיר אותו,

או צבע רקע

אם הוא שקוף ויש למטה 

תוכן מבלבל.

זהו!

ועל הדרך

אני בטוחה שכבר נרשמת

למפגש הזום

ביום שני הקרוב 10.2

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

כמה סודות מקצוע כבדים

אם עדיין לא עשית את זה

עדיין לא מאוחר 😊

ההרשמה כאן

מחכה בציפיה

לזום בשני,

רבקי

חודש שבט מבורך

כתיבת תגובה

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

הלו? אני שיחה אוטומטית מהאתר שלך!

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

TEST TEST, קבלי את מסר החרב שלך!

קבלי קוריוז הזוי 🙃 אני מתכנתת לאתר לוח חם בשביל לבדוק שם משהו, יצרתי הזמנה. מילאתי בפרטי ההזמנה TEST TEST, כדי שיבינו שזו לא הזמנה אמיתית.

הי, לאן את רצה?

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