סליידר לוגואים בתלת מימד

נכון שנמאס מהסליידרים עם הלוגואים

שמוצגים פחות או יותר אותו הדבר

בכל האתרים?

 

אז לפני שאני אראה לך

סליידר סופר מגניב

ואיך אפשר לשלב אותו

גם באתרים אצלך –

 

אני רוצה להסב את תשומת ליבך

שהשבוע נסגרת ההרשמה

לקורס קסם ה GSAP.

 

התגבשה קבוצה מהממת

באמת

של בנות שעומדות להיות ייחודיות בשוק

 

כי אני לא מצאתי

עוד מקום לימודים

שיוצאים ממנו עם כאלה תוצאות.

 

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

מטורפים!!

עוד לא הייתה להם השקה

ככה שאני לא יכולה להציג

אבל לגמרי

מדובר כאן בסטנדר אחר אחר!

 

אז אם בא לך להיות במקום

שנותנים לך מעטפה סופר מלאה

כדי שתצאי עם ידע

הכי מושלם שיש

ותצרי אתרים מגניבים ושוברי שגרה

צרי קשר,

עכשיו

עם יועצת הלימודים שלנו –

gsap@appupgo.co.il

 

 

לקראת האתר החדש שלי

שקורם עור וגידים

(כלומר תכנים ואפקטים…)

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

 

קודם כל הגלילה היא לאורך,

ולא לרוחב.

חוצמזה –

שמים לב שהלוגואים שעולים

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

זה נותן אשליה של תלת מימד,

ובסוף לפינוק –

יש את הסיומת למעלה ולמטה

שגורמת ללוגואים הנוסעים

להעלם מתחתיה.

בקיצור,

קצת הרבה שלבים הפעם

אבל התוצאה שווה:

 

מוסיפים קונטיינר

במתקדם => CSS ID

שמים את הערך logoes.

כיוון התוכן בקונטיינר הזה הוא אופקי

(התוכן בתוכו יוצג אחד לייד השני)

 

בתוכו יוצרים קונטיינרים עבור העמודות

כל עמודה של לוגואים – קונטיינר בפני עצמה

עמודה שבה נרצה גלילה כלפי מעלה

במתקדם => CSS CLASSES

נשים את הערך updirection.

בעמודות שנרצה שהגלילה תהיה כלפי מטה

נשים שם ב CSS CLASSES את הערך

downdirection.

הכיוון של התוכן בקונטיינרים האלה הוא אנכי

כלומר האלמנטים בו אמורים להיות מוצגים

אחד מעל השני.

 

בתוך כל קונטיינר כזה

שהוא בעצם עמודה

ניצור קונטיינר נוסף

ונגדיר בו ב CSS CLASS את הערך up.

בתוכו נשים את תמונות הלוגואים שנרצה

שיוצגו בעמודה הזו.

גם בו כמובן כיוון התוכן יהיה אנכי.

 

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

ולמשוכפל, זה נשים את ה CSS CLASS – 

down.

 

קיבלנו 2 קונטיינרים זהים אחד מעל השני

לעליון יש את ה CLASS עם הערך up

ולתחתון יש את ה CLASS עם הערך down.

ככה בכל עמודה ועמודה.

 

סיימנו?

 

עכשיו מתחת להכל

נוסיף אלמנט מסוג HTML

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

 
				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script>
gsap.set(".updirection .up", { yPercent: 0 });
gsap.to(".updirection .up", {
    yPercent: -100,
    duration: 21,
    ease: "none",
		repeat: -1
});
gsap.set(".updirection .down", { yPercent: 100 });
gsap.to(".updirection .down", {
    yPercent: 0,
    duration: 21,
    ease: "none",
		repeat: -1
});
	
gsap.set(".downdirection .up", { yPercent: -100 });
gsap.to(".downdirection .up", {
    yPercent: 0,
    duration: 20,
    ease: "none",
		repeat: -1
});
gsap.set(".downdirection .down", { yPercent: 0 });
gsap.to(".downdirection .down", {
    yPercent: 100,
    duration: 20,
    ease: "none",
		repeat: -1
});
</script>
<style>
	
#logoes {
    height: calc(100VH - 100px);  
    overflow: hidden;
}	

#logoes::before {
    content: "";
    display: block;
    height: 25%;
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F100 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

#logoes::after  {
    content: "";
    display: block;
    height: 25%;
    background: linear-gradient(0deg, #FFFFFF 0%, #F1F1F100 100%);
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 100%;
    z-index: 1;   
}
	
.up, .down {
    position: absolute;
    top: 0;
    left: 0;
    transition: none !important;
    animation: none !important;
		padding: 18px 15px!important;
}

</style>
				
			

איך יצא?

 

אוטוטו אנחנו נפגשות

למפגש ראשון בעז"ה

של קורס קסם ה GSAP

את איתנו?

רבקי

כתיבת תגובה

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

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

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

מגנט לידים גאוני

אני הולכת להיות עכשיו לא עסקית. בכלל. אנחנו חיות בדור שלם – שהולך ללמוד את מה שלא מעניין אותו כדי להתקבל לעבודה שמשעממת אותו כדי שיהיה לו כסף לקנות את מה שהוא לא צריך...

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

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