תגית: JavaScript

גם JavaScript וגם jQuery מגיעות עם מֵתוֹדות מובנות המחזירות את המיקום של ערך כלשהו במערך. בפוסט זה נדבר ספציפית על כיצד לבדוק האם מערך מכיל ערך מסויים או לא.

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

עוגיות, או Cookies הן אחת מטכנולוגיות ה web החשובות ביותר. עוגיות נוצרו בכדי לשמור בדפדפן אינפורמציה מתמדת על משתמשים. אותה עוגיה היא פיסת מידע מאתר כלשהו הנשמרת בדפדפן כך שאותו אתר יוכל לגשת אליה ולהשתמש באינפורמציה הנשמרת בעוגיה זו בשלב [...]

מדריך זה יעוזר לכם להבין את השימוש במתודות querySelector() ו querySelectorAll(). נלמד כיצד למצוא בקלות אלמנטים ב DOM באמצעות querySelector ו querySelectorAll. המונח DOM מתייחס ל document object model, המציג את כל ה HTML Elements במבנה של עץ. אל כל [...]

פונקציה היא סט של הכרזות (statements בלעז) המקבלות input, מבצעות חישוב מסויים, ומספקות output. במילים אחרות, פונקציה היא סט של הכרזות המבצעות מספר פעולות או חישובים ולאחר מכן מחזירה את התוצאה למשתמש. הרעיון הוא להכניס מספר פעולות שחוזרות על עצמן [...]

Dark Mode או Dark Theme באתרים נהיה די נפוץ לאחרונה. וכשטרנד זה קיים ב iOS, macOS & Windows, מרבית המערכות או האפליקציות כבר אימצו את אותם dark themes. ״מצב כהה״ גורם לאתר שלכם להיות אטרקטיבי יותר למשתמשים המעדיפים צבעים כהים [...]

חזרה בזמן לשנת 2011, אפקט פרלקס בגלילה (parallax scrolling effect) יצר הדים והסתמן כטרנד חדש בעיצוב אתרים. אופנות רבות הגיעו ועזבו מאז אך אפקט זה ביסס מקומו ואינו מתכוון לעזוב בקרוב. בפוסט זה נסביר מה זה parallax scrolling ונשחק מעט [...]

לבטח אתם יודעים כי ב JavaScript אנו משתמשים במערכים (arrays) בכדי לשמור מספר ערכים במשתנה אחד. במערך JavaScript לכל אלמנט קיים מספר (אינדקס/Index), כאשר אינדקס של מערך מתחיל מאפס ועולה מעלה באחדות, כלומר 0,1,2,3 וכך הלאה. האינדקס הוא בעצם המזהה [...]

לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (On Scroll Animations). אז אשתף אתכם בספרייה בה נתקלתי בשם AOS, המאפשרת להוסיף אנימציות אלו בקלות ועם שליטת CSS מלאה על אותן אנימציות. הרעיון מאחורי AOS הוא [...]

Lity היא ספריית lightbox קלת משקל, נגישה ורספונסיבית התומכת בתמונות, וידאו, iframes ואף inline content. הספרייה שוקלת כ 3K בלבד כאשר היא דחוסה ובמידה ו gzip מופעל בשרת שלכם. בפוסט קצר זה נראה כיצד להשתמש בה בכדי להציג תוכן ב [...]

בפוסט זה, אשר לא מעט מהקוד המופיע בו נלקח מהפוסט הבא אותו כתבה Mary Lou, נראה כיצד ליצור פורטפוליו באמצעות masonry.js ונשתמש ב anime.js (עליו כתבתי לא מעט) בכדי ליצור אנימציות טעינה מגניבות לאותו פורטפוליו. הסיבה שאני כותב פוסט זה [...]

בפוסט זה נראה כיצד ליצור פילטר המאפשר לסנן אלמנטים לפי תכונה כלשהי ובמקרה שלנו נאפשר סינון של פוסטים לפי טקסונומיה. את הסינון נבצע באמצעות הספרייה Isotope בה יצא לי להשתמש בלא מעט פרוייקטים מכיוון וזו מאפשרת לסנן ולמיין מידע בצורה [...]

אם אתם עוקבים אחר הבלוג, לבטח אתם יודעים כי כבר נכתבו לא מעט מאמרים על השימוש ב Anime.js לטובת אנימציות Javascript כאלו ואחרות. פוסט זה גם כן מדבר על שימוש בספרייה מגניבה זו על מנת להוסיף אנימציות מעניינות לטקסט. אין [...]

זה יהיה פוסט קצר וקולע. אם אינכם מכירים את Slick Slider - זוהי ספריית Javascript המאפשרת ליצור סליידרים/קרוסלות בצורה מאד נוחה. כתבתי מאמר על השימוש ב Slick Slider, מוזמנים לתת מבט אם אינכם מכירים. בפוסט זה נראה כיצד כיצד להוסיף אנימציות [...]

במדריך זה נראה כיצד ליצור Tooltips נחמדים. אותם Tooltips הם בעצם SVG's, כאשר האנימציות עצמן מבוצעות עם Anime.js. כבר נכתב פוסט על השימוש ב Anime.js ואני ממליץ לקרוא אותו לפני שאתם מנסים להטמיע את ה Tooltips שאנחנו מתארים בפוסט זה. [...]

הספרייה Anime.js הוא מנוע Javascript קל משקל ליצירת אנימציות. הוא תומך בכל הדפדפנים המודרנים ומאפשר ליצור אנימציות על כל תכונת CSS, על SVG ועל ערכים של Javascript. במדריך זה אסביר את הבסיס של Anime.js ונראה כיצד להשתמש בו בכדי ליצור...

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

בפוסט קצר זה נראה כיצד להשתמש בספרייה Anime.js יחד עם ספריית חלקיקים בכדי ליצור אפקט מאד נחמד של כפתורים מתפרקים. הרעיון באופן כללי הוא לפרק כפתור לחלקיקים, כלומר לגרום לו להעלם ואז להחזיר אותו למצבו הרגיל. אז לפני שנסביר כיצד [...]

ניתן לומר כי בשנים האחרונות הפופולריות של כפתורי back to top או scroll to top עלתה בעקבות עלייה בשימוש במכשירים ניידים. כאשר משתמש מסויים גולל מעבר לנקודה מסויימת באתר שלכם, הכפתור היעיל הזה מופיע ומאפשר למשתמשים לחזור בצורה פשוטה ומהירה [...]

במדריך זה נראה דרך להצגת פופאפ באתרי וורדפרס. נציג את אותה הודעה קופצת עבור הגולשים שלכם ללא שימוש בתוסף ונעזר ב Cookies. נשתמש במקרה זה בספרייה Javascript Cookie על מנת למנוע מאותו פופאפ לקפוץ שוב ברגע שהגולש לחץ על כפתור [...]

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

במדריך זה נסביר איך לבנות פופאפ יציאה בוורדפרס ללא תוסף. המונח פופאפ יציאה (exit intent popup) צבר פופולריות בשנים האחרונות, באתרי וורדפרס בכלל ובאתרי ווקומרס וחנויות דיגיטליות בפרט. במהותו, פופאפ יציאה משתמש ב javascript על מנת לעקוב אחר תנועת העכבר [...]

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