בואי, נתפקס

בואי, נתפקס על זה

הכי תכלס שיש:

הוסיפי באלמנטור אלמנט מסוג HTML.

לתוכו הכניסי את הקוד הבא:

				
					<div class="focus_container"> 
  <div class="focus--mask">
    <div class="focus--mask-inner">בואי, נתפקס על זה</div>
  </div>
</div>
<style>
:root {
    --focus_element_width: 279px;
    --focus_content: "בואי, נתפקס על זה";
}

@-webkit-keyframes mask-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--focus_element_width) - 50px));
  }
}
@keyframes mask-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--focus_element_width) - 50px));
  }
}
@-webkit-keyframes mask-inner-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(calc(var(--focus_element_width) - 50px) * -1));
  }
}
@keyframes mask-inner-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(calc(var(--focus_element_width) - 50px) * -1));
  }
}

.focus_container {
  position: relative;
  width: auto;
  direction: ltr;
  
}
.focus_container:before {
  content: var(--focus_content);
  filter: blur(3px);
}
.focus_container:after {
  content: "";
  position: absolute;
  width: 50px;
  height: calc(100% + 8px);
  top: -4px;
  left: 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
  -webkit-animation: mask-move 1s linear infinite alternate;
  animation: mask-move 1s linear infinite alternate;
}
.focus--mask {
  overflow: hidden;
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  -webkit-animation: mask-move 1s linear infinite alternate;
  animation: mask-move 1s linear infinite alternate;
}
.focus--mask-inner {
    width: calc(var(--focus_element_width) + 50px);
  -webkit-animation: mask-inner-move 1s linear infinite alternate;
          animation: mask-inner-move 1s linear infinite alternate;
}


</style>
				
			
עכשיו,
נצלול להתאמת הקוד:
 
את המילים "בואי, נתפקס על זה" 
בשורה 3 ובשורה 9 –
החליפי למילים שאת רוצה 
שיוצגו אצלך.
 
בשורה 8 יש מספר (279) 
שמייצג את רוחב האלמנט שיוצא לך.
הוא חשוב, 
לצורך הדיוק של האפקט.
 
את יכולה לבדוק בכלי מפתחים
מה הרוחב של האלמנט שלך.
ואם את לא מונחת
בענייני כלי מפתחים – 
את יכולה פשוט להתנסות:
להעלות קצת את המספר,
להוריד אותו
עד שתגיעי למספר שייתן לך
את התצוגה המדוייקת לאפקט שלך.
 
זהו 🙂
ספרי לי איך יצא

כתיבת תגובה

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

תהא שנת פיתוח דרמטי 😊

הבאתי לך כאן אפקט קליקלות, משדרג כל אתר טרנדי וטיפוגרפי פלאאאם:

ירושלים ב 360 מעלות, גאולה בקרוב אמן!! ככה תעשי את זה גם אצלך —

הטלטלות שאנחנו חווים כאן זה משהו שנראה לי קיים רק בדור משיח. ברוח השעה - הדרכה מדהימה וקלה ליישום

חובת הנגשת אתרים

עד לא מזמן עסקים קטנים לא היו מחוייבים באתר מונגש. אבל מה 25/10/20 חל חוק חדש שמחייב את כל העסקים באתר מונגש, מה שאומר שכל אתר שנבנה ינצטרך לדאוג שיהיה מונגש. מה זה בעצם אתר מונגש?