איך להוסיף קונפטי באתר עם אלמנטור

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

בשביל אפקט הקונפטי, נשתמש בספרית Canvas Confetti.

באלמנטור נגרור ווידג’ט מסוג HTML לעמוד, ונטמיע את הספריה עם הקוד הבא.

				
					<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
				
			

לאחר מכן נוסיף את הקוד של הקונפטי בעצמו (גם כן בווידג’ט HTML הנ”ל)

				
					<script>
confetti();    
</script>

				
			

כן, זה הכל.

שימו לב שהקוד הבא, יוסיף את הקונפטי מיד כשהעמוד יעלה, זה מקובל בעמודי תודה (אחרי מילוי טופס או אחרי רכישה וכד’).

בשביל להוסיף את האפקט אחרי לחיצה על כפתור (או כל אלמנט אחר), ניתן לכפתור הרלוונטי את הקלאס confetti-btn

ונוסיף את הקוד (חשוב להוסיף את הווידג’ט HTML לאחר הכפתור).

				
					<script>
document.querySelector(".confetti-btn").addEventListener("click", function(){
confetti();
});
</script>

				
			

אפשר לשלוט על הרבה דברים בקונפטי, כמו, הצבעים, המספר, משך זמן ועוד.

ניתן לראות מדריך ודוגמאות בקישור הבא.

וככה זה נראה

4 Responses

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

  2. אם אני שמתמש בשרת לוקלי, ואין אינטרנט במחשב.
    מה אני עושה בשביל לייבא את הספריה?

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פעם בשבוע אני שולח ניוזלטר
עם כל המאמרים החדשים באתר
מעניין אותך?