אנימציית תמונה נחשפת בגלילה + גלילה צידית
שימו ♥︎ - הדרכה למתקדמים. אם לא עברתם את קורס GSAP, תתחילו משם.
GSAP / Java Script
יש לשים על הקונטיינר החיצוני את הקלאס wrapper1.
על הקונטיינר הפנימי את הקלאס scroll1.
על התמונה הצבעונית את הקלאס paint_image.
שימו לב - הקוד לא כולל את ה-css הנוסף שנכתב במהלך הסרטון
הפרומפט ליצירת גרסת אאוטליין מתמונה:
Convert the provided image into a clean architectural-style outline drawing.Use thin technical lines, black on white only, no shading or textures.Highlight main structural shapes and important details only, similar to CAD architectural drafts.Keep all proportions true to the original photo without adding or removing objects.Minimalistic, technical, precise line work.
<style>
/*ביטול קפיצה בשחרור של pin*/
.wrapper1{
overscroll-behavior: none !important;
transition: all 0s !important;
}
@media(min-width:1025px){
.wrapper1{
overflow: hidden;
}
}
.paint_image {
--reveal: 0%;
--feather: 10%;
display: block;
width: 100%;
height: auto;
/* חושף מלמטה למעלה */
-webkit-mask-image: linear-gradient(
to top,
rgba(0,0,0,1) 0%, /* מלמטה – נראה */
rgba(0,0,0,1) var(--reveal), /* עד כאן התמונה גלויה */
rgba(0,0,0,0) calc(var(--reveal) + var(--feather)), /* מעבר הדרגתי לשקוף */
rgba(0,0,0,0) 100% /* למעלה – שקוף לגמרי */
);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(
to top,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) var(--reveal),
rgba(0,0,0,0) calc(var(--reveal) + var(--feather)),
rgba(0,0,0,0) 100%
);
mask-repeat: no-repeat;
mask-size: 100% 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
const wrapper = document.querySelector(".wrapper1"); // הקלאס של הקונטיינר החיצוני
const container = document.querySelector(".scroll1"); // הקלאס של הקונטיינר הפנימי
const extra = window.innerWidth * 0.5; // הוספת גלילה אקסטרא - 0.1 =10vw
const totalWidth = container.scrollWidth - window.innerWidth + extra;
//גלילה צידית של השלבים
if (window.innerWidth >= 1025) {
gsap.to(container, {
x: () => totalWidth, // במידה והאתר באנגלית ורוצים לשנות כיוון, להוסיף מינוס לפני הסוגריים
ease: "none",
scrollTrigger: {
trigger: wrapper, // קלאס הקונטיינר החיצונית
start: "top top",
end: () => `+=${totalWidth*1}`, // לשינוי מהירות הגלילה החליפו את הספרה 1, מספר יותר גבוה יוצר אפקט איטי יותר
scrub: true,
pin: true,
anticipatePin: 1,
markers: false
}
});
// === חשיפת התמונה עם מסיכה דינמית ===
const revealState = { val: 0 }; // נשמור מצב נוכחי
gsap.to(revealState, {
val: 100,
ease: "none",
scrollTrigger: {
trigger: wrapper,
start: "top 50%", // התחלת האנימציה על התמונה
end: () => `+=${totalWidth * 1.7}`, //סוף האנימציה על התמונה, לסיום מאוחר יותר הגדילו מספר (1.3) ולסיום מוקדם יותר הקטינו (0.8)
scrub: true,
markers: false,
},
onUpdate: () => {
const imgEl = document.querySelector(".paint_image");
if (imgEl) {
imgEl.style.setProperty("--reveal", revealState.val + "%");
}
}
});
};
// אנימציית תמונה מובייל
if (window.innerWidth <= 1024) {
const mobileReveal = { val: 0 };
gsap.to(mobileReveal, {
val: 100,
ease: "none",
scrollTrigger: {
trigger: wrapper,
start: "top 60%", // התחלת אנימציית מובייל
end: "bottom+=50% bottom", // סוף אנימציית מובייל
scrub: 0.5,
markers: false,
},
onUpdate: () => {
const imgEl = document.querySelector(".paint_image");
if (imgEl) imgEl.style.setProperty("--reveal", mobileReveal.val + "%");
}
});
}
});
</script>[safe_code_display]
