55 משאבי הנפשה של jQuery

בעבר רוב האנשים היו משתמשים ב- Flash באתר שלהם על מנת לשפר את האתר שלהם באמצעות אנימציה מהממת. כעת, jQuery היא שפת תכנות של בית האוצר שיש לרשות מנהלי אתרים. עכשיו לאט אך בהתמדה jQuery גנב את כל הזרקורים מפלאש וריתק את המפתחים עם התכונות הבלתי ניתנות להתאמה שלו.

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

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

צור ניווט אנימציה מגניב עם CSS ו- jQuery

המחבר עומד לבנות תפריט ניווט מונפש ממש מגניב באמצעות CSS ו- jQuery בלבד.

צור ניווט אנימציה מגניב עם CSS ו- jQuery

מידע נוסף על יצירת ניווט אנימציה מגניב עם CSS ו- jQuery

צור אפקט ריחוף ריאליסטי בעזרת jQuery

למד כיצד ליצור אפקט ריחוף ריאליסטי באמצעות jQuery

צור אפקט ריחוף ריאליסטי בעזרת jQuery

מידע נוסף על יצירת אפקט ריחוף ריאליסטי בעזרת jQuery

מנוע Bubble – תוסף עבור jQuery

מנוע הבועה בזמן בועות באתר שלך. וללא צורך ב- Adobe Flash. Bubble Engine הוא תוסף עבור jQuery.

מנוע Bubble - תוסף עבור jQuery

מידע נוסף על מנוע הבועה – תוסף עבור jQuery

אקורדיון משותף jQuery – אופקי & אֲנָכִי

עובד כאקורדיון אנכי ואקורדיון אופקי. זה יכול להיות החלקה אוטומטית. אתה יכול להגדיר לוח ברירת מחדל.

אקורדיון משותף jQuery - אופקי & amp; אֲנָכִי

מידע נוסף אודות אקורדיון jQuery משותף – אופקי & אֲנָכִי

צור שבילי מצביע עם jquery

צור כמה רכיבי img עם מצביע-תמונת ב- src, ותן להם לעקוב אחר מיקום המצביע בכל פעם שעבר העכבר. ואל תשכח לדהות אותם לאט.

צור שבילי מצביע עם jquery

מידע נוסף על יצירת שבילי מצביע עם jquery

אפקט טשטוש עם css ו- jquery

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

אפקט טשטוש עם css ו- jquery

מידע נוסף על אפקט טשטוש עם css ו- jquery

יצירת גלויה מונפשת עם jQuery

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

יצירת גלויה מונפשת עם jQuery

מידע נוסף על יצירת גלויה מונפשת באמצעות jQuery

הנפשת טיפוגרפיה באמצעות jquery

במדריך זה נלמד כיצד ליישם אטימות אנימטית של jquery ועוד. ולבסוף תתאהבו בו.

הנפשת טיפוגרפיה באמצעות jquery

מידע נוסף על הנפשת טיפוגרפיה באמצעות jquery

בניית רובוט מצויר מונפש עם jQuery

פרויקט זה נוצר על ידי שכבת מספר חלוקות ריקות זו על זו עם PNG שקוף כתמונות רקע.

בניית רובוט מצויר מונפש עם jQuery

מידע נוסף על בניית רובוט מצויר מונפש עם jQuery

Android Nexus רשת עצבית טפט חי ב- jQuery

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

Android Nexus רשת עצבית טפט חי ב- jQuery

מידע נוסף על אנדרואיד Nexus רשת טפטים חיים ב- jQuery

הפעל בקלות לחצני אינטרנט/אובייקטים באמצעות jQuery

אנימציה תעזור להחליק בין 2 מצבים באמצעות אפקטים ממש טובים. כברירת מחדל, ‘הקלה’ היא פרמטר אופציונלי, כך שכדי להשתמש באפקטים נוספים נשתמש בספריית jquery.easing.js נוספת.

הפעל בקלות לחצני אינטרנט/אובייקטים באמצעות jQuery

מידע נוסף על הפעלת לחצני אינטרנט/אובייקטים בקלות באמצעות jQuery

כיצד ליצור גלריית תמונות מונפשת באמצעות jQuery (ערכת מחוון)

לגלריה זו 4 תצוגות שונות (סטנדרטיות, עם כיתובים, אנכיים ומינימליסטיים).

כיצד ליצור גלריית תמונות מונפשת באמצעות jQuery (ערכת מחוון)

מידע נוסף על יצירת גלריית תמונות מונפשת באמצעות jQuery (ערכת מחוונים)

FourSquare.com כמו הזנות מונפשות מוצגות עם jQuery

במדריך זה מחבר משתף דרך פשוטה ליצור אותו סימן גלילה של rss באמצעות Jquery, כך שתוכל ליישם אותו באתר שלך!

FourSquare.com כמו הזנות מונפשות מוצגות עם jQuery

מידע נוסף על FourSquare.com כמו הזנת אנימציות מוצגת עם jQuery

מחוון תמונות חושף

גלריית תמונות ממוזערת, שבה לחיצה על כפתור תחשוף את כל התמונה ומידע נוסף על התמונה.

מחוון תמונות חושף

מידע נוסף על גילוי מחוון התמונות

jQuery הנפשה בנתיב מעגלי

אנימציות בדפי אינטרנט אינן יותר עם פלאש, כעת אנו עושים את כל הדברים האלה עם JavaScript (אנימציה Jquery). כפי שאתה יודע אנו יכולים להנפיש רכיב בנתיבים מותאמים אישית באמצעות תוסף הנתיב. היום נלמד כיצד להנפיש אלמנט בנתיב מעגלי או מעל מעגל באמצעות Jquery.

jQuery הנפשה בנתיב מעגלי

מידע נוסף על jQuery אנימציה בנתיב מעגלי

שימוש ב- jQuery לאנימציות תמונת רקע

jQuery היא ספרייה מצוינת למשימות מסוג זה, אך מחוץ לקופסה היא לא יכולה להנפיש את מיקום הרקע כראוי בגלל הצורך להנפיש שני ערכים במקום רק אחד

שימוש ב- jQuery לאנימציות תמונת רקע

מידע נוסף על השימוש ב- jQuery לאנימציות תמונת רקע

אפקט פלאש למצלמה עם jquery

המחבר ישתף את הטכניקה שלו ליישום אפקט פלאש המצלמה עם Jquery.

אפקט פלאש למצלמה עם jquery

מידע נוסף על אפקט פלאש המצלמה עם jquery

תפריטים מונפשים באמצעות jQuery

המחבר יראה לך כיצד ליצור תפריט מונפש.

תפריטים מונפשים באמצעות jQuery

מידע נוסף על תפריטים מונפשים באמצעות jQuery

הנפשת צבע באמצעות jquery

המחבר לוקח דוגמה של אנימציה SuperNova עם Jquery, היא עובדת על הנפשת צבעי רקע.

הנפשת צבע באמצעות jquery

מידע נוסף על צבע אנימציה באמצעות jquery

תפריט סגנון דלת המוסך

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

תפריט סגנון דלת המוסך

מידע נוסף על תפריט סגנון דלת המוסך

תפריט נפתח מונפש עם jQuery

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

תפריט נפתח מונפש עם jQuery

מידע נוסף על תפריט נפתח מונפש עם jQuery

חלום לילה

זו אנימציה שבה מופיעות בועות צבעוניות על מיקומים אקראיים, גדלות בגודלן ואז דוהות החוצה.

חלום לילה

מידע נוסף על ליל חלומות

ביצוע אנימציות jQuery באופן מלא ללא תורים

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

ביצוע אנימציות jQuery באופן מלא ללא תורים

מידע נוסף על ביצוע אנימציות jQuery באופן מלא ללא תורים

צייר מלבן בעזרת jquery

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

צייר מלבן בעזרת jquery

מידע נוסף על מלבן צייר עם jquery

הנפשת ריחוף עם jquery

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

הנפשת ריחוף עם jquery

מידע נוסף על הנפשת רחף עם jquery

חלון גלילה בצורה חלקה ב- jQuery – גלילה מונפשת

טקסט

חלון גלילה בצורה חלקה ב- jQuery - גלילה מונפשת

מידע נוסף על חלון גלילה בצורה חלקה ב- jQuery – גלילה מונפשת

א ב ג

מדריכי jQuery למעצבים

כאן תמצא רשימה של 10 הדרכות שימושיות לשליטה ב- jquery.

מדריכי jQuery למעצבים

מידע נוסף על מדריכי jQuery למעצבים

cmd ומכונת כתיבה עם jquery

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

cmd ומכונת כתיבה עם jquery

מידע נוסף על אפקט cmd ומכונת כתיבה עם jquery

כיצד ליצור אפקט ניווט בהשראת ‘דף הבית של Mootools’ באמצעות jQuery

למד כיצד ליצור אפקט ניווט בהשראת ‘דף הבית של Mootools’ באמצעות jQuery

כיצד ליצור אפקט ניווט בהשראת 'דף הבית של Mootools' באמצעות jQuery

מידע נוסף על יצירת אפקט ניווט בהשראת ‘דף הבית של Mootools’ באמצעות jQuery

מבריק jQuery

התמונות שלך יזהרו או יאירו כאשר תזיז את העכבר.

מבריק jQuery

מידע נוסף על jQuery Gloss

עמוד דינאמי / החלפת תוכן

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

עמוד דינאמי / החלפת תוכן

מידע נוסף על עמוד דינאמי / החלפת תוכן

יצירת מחוון תוכן מובחר חלקלק אוטומטי

ניתן להשתמש בתוסף Coda Slider עבור jQuery לבניית כמה ווידג’טים עם כרטיסיות. פשוט דרך מהנה להציג הרבה תוכן בשטח קטן.

יצירת מחוון תוכן מובחר חלקלק אוטומטי

מידע נוסף על יצירת מחוון תוכן מוצג חלקלק

CSS Sprites2 – הגיע זמן ה- JavaScript

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

CSS Sprites2 - הגיע זמן ה- JavaScript

מידע נוסף על CSS Sprites2 – הגיע זמן JavaScript

השתמש בממשק המשתמש של jQuery כדי לשלוט בגודל הטקסט שלך

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

השתמש בממשק המשתמש של jQuery כדי לשלוט בגודל הטקסט שלך

מידע נוסף אודות שימוש בממשק המשתמש של jQuery לשליטה בגודל הטקסט שלך

בנה טופס התחברות מדהים עם jQuery

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

בנה טופס התחברות מדהים עם jQuery

מידע נוסף על בניית טופס התחברות מדהים עם jQuery

עגינה בסגנון Mac OS X ב- JavaScript

מערכת ההפעלה Mac OS X של אפל ידועה באפקטים הגרפיים הנוזלים שלה. תכונה מרשימה אחת היא אפקט ‘עין הדג’ של המזח, לפיו סמלים מתרחבים ומתכווצים כשהעכבר נע מעליהם. השגת אפקט זה ב- JavaScript היא קשה, אך פונקציית MacStyleDock מאפשרת ליישם תכונה זו בקלות.

עגינה בסגנון Mac OS X ב- JavaScript

מידע נוסף על עגינה בסגנון Mac OS X ב- JavaScript

כיצד לטעון ולהנפיש תוכן באמצעות jQuery

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

כיצד לטעון ולהנפיש תוכן באמצעות jQuery

מידע נוסף על אופן טעינה והנפקה של תוכן באמצעות jQuery

הסבר כלים קל ותצוגה מקדימה של תמונות באמצעות jQuery

המחבר המציא תסריט כל כך פשוט שכואב! הדבר הטוב ביותר עדיין הוא שניתן ליישם אותו למגוון מטרות. המחבר יראה לך 3 דוגמאות לשימוש באותו תסריט פשוט מאוד.

הסבר כלים קל ותצוגה מקדימה של תמונות באמצעות jQuery

מידע נוסף על הסבר הכלים הקל ביותר ותצוגה מקדימה של תמונות באמצעות jQuery

כיף דינאמי עם SimplePie ו- jQuery

בואו נשפר את הרעיון של בלוגרול על ידי לא רק רישום אתרים, אלא משיכת כותרות אחרונות מהם, ושימוש באנימציה מהנה של jQuery..

כיף דינאמי עם SimplePie ו- jQuery

מידע נוסף על כיף דינאמי עם SimplePie ו- jQuery

סטארבוקס

Starbox מאפשר לך ליצור בקלות כל מיני תיבות דירוג באמצעות תמונת PNG אחת בלבד. הספרייה בנויה על גבי מסגרת ה- javascript של אב טיפוס. לקבלת כמה אפקטים נוספים אתה יכול להוסיף גם Scriptaculous.

סטארבוקס

מידע נוסף על Starbox

העלאת תמונות וגידול PHP jQuery

מה שהיינו צריכים הוא דרך להעלות תמונת JPG, לשנות את הגודל שלה במידת הצורך ואז לחתוך אותה לגובה ולרוחב הנתון. אֵיך? תבדוק פה

php jquery העלאת תמונות וחתוך

מידע נוסף על העלאת תמונות php jquery וחיתוך

הדגשת הקשר באמצעות jQuery

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

הדגשת הקשר באמצעות jQuery

מידע נוסף על הדגשת הקשר באמצעות jQuery

jquery Hover Sub Tag Cloud

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

jquery Hover Sub Tag Cloud

מידע נוסף על jquery Hover Sub Tag Cloud

כיצד לבנות כותרת מונפשת ב- jQuery

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

כיצד לבנות כותרת מונפשת ב- jQuery

מידע נוסף על בניית כותרת מונפשת ב- jQuery

צור אפקט דלת הזזה מדהים עם jQuery

המחבר ייצור אפקט דלת הזזה בארבע פינות.

צור אפקט דלת הזזה מדהים עם jQuery

מידע נוסף על יצירת אפקט דלת הזזה מדהים עם jQuery

צור אפקט רקע פרנלקס פאנקי באמצעות jquery

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

צור אפקט רקע פרנלקס פאנקי באמצעות jquery

מידע נוסף על יצירת אפקט רקע פרלקסה פאנקי באמצעות jquery

הסבר על אפקט רקע הגלילה של youlove.us

הטכניקה היא למעשה הרבה יותר פשוטה ממה שהיא נראית, היא מבוססת על גלילת תמונת שיפוע גבוהה מאוד מאחורי כמה תמונות PNG שקופות..

הסבר על אפקט רקע הגלילה של youlove.us

מידע נוסף על אפקט רקע הגלילה של youlove.us מוסבר

תערובת jQuery

אנימציה/אפקט מבוסס jQuery, תוסף שיפור פרוגרסיבי לרקע CSS.

תערובת jQuery

מידע נוסף על תערובת jQuery

אפקט עשן מתנפח

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

אפקט עשן מתנפח

מידע נוסף על אפקט עשן נפוח

FancyBox

FancyBox הוא כלי להצגת תמונות, תוכן HTML ורב מדיה ב- “lightbox” בסגנון Mac שצף מעל לדף האינטרנט.

FancyBox

מידע נוסף על FancyBox

מיקום רקעים באמצעות Jquery

המחבר ידון בכלי שימושי אחד של JQuery – plugin backgroundPosition. זה מאפשר להגיע לרעיונות עיצוב שונים עם שינוי צבע/רקע.

מיקום רקעים באמצעות Jquery

מידע נוסף על מיקום רקעים באמצעות Jquery

תוסף אנימציה jquery

המחבר יציג בפניכם אפקט אנימציה חדש מגניב jquery בשם “גחלילית”. אתה תאהב את זה ואחרי שתקרא את הפוסט הזה תוכל להגיש מועמדות לדף האינטרנט שלך.

תוסף אנימציה jquery

מידע נוסף על גחלילית: תוסף אנימציה jquery

בועות קופצות של קודה

בפרט, חורחה מסה כותב לשאול כיצד ליצור מחדש את בועת הקופץ ה’נפוחה ‘המוצגת כאשר מעבירים את התמונה להורדה.

בועות קופצות של קודה

מידע נוסף על בועות קופצות של קודה

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

אם אתה אוהב את האוסף הזה, אתה עשוי להתעניין בכמה מאמרים ישנים שלנו בנושא  תוספים של jQuery מצגת, תוספי jQuery Tooltip, יישומי פלאגין של jQuery, תפריטים נפתחים של jQuery והאם jQuery באמת מסוגל להחליף פלאש?.