כיצד להוסיף מגניב CSS3 אנימציה תוכן WordPress שלך
האמנות של סיפור סיפורים אולי החלה הרבה לפני הומו סאפיינס יכול לדבר. זה מתפתח איתנו ומתאים את הכלים הקיימים. הסיפורים שנהגו לספר ולהעביר מדור לדור חיברו בעל פה את האבולוציה המילולית מספרים בכתב יד, להדפסה המונית, לעיבוד תמלילים דיגיטלי ולאחרונה לאינטרנט. מנקודת המבט של האבולוציה האנושית, אנו מרגישים כאילו לא טפחנו על מלוא הפוטנציאל של כל הטכנולוגיות הזמינות כיום. בעוד שהסרטונים כבר החלו במסעות הפרסום שלהם בעולם, רוב התוכן של האינטרנט עדיין נמצא בטקסט.
תוכן אינטרנט מודרני צריך להיות אינטראקטיבי ולשלב מדיה שונים יחד עם טקסט רגיל טוב ol. כלים מסוימים יכולים לעזור לנו להכות את הסיפור שלנו כמה חריצים. ואם אתה משתמש וורדפרס, אתה יכול להשתמש בהנפשה זה! תוסף להוסיף אנימציות CSS3 מגניב לתוכן שלך.
מה האפשרויות?
יחד עם HTML5, CSS3 הוא ראשי תיבות הקשורים עיצוב מודרני. בקיצור, CSS הוא רכיב האינטרנט המאפשר למשתמשים לשלוט על המראה של דף האינטרנט, כגון הפריסה, המיקום, הגופן, הצבע וכו '. הגלגול האחרון שלה, CSS3, הוא חכם מספיק כדי לאפשר למשתמשים ליצור תמונות ואנימציות באמצעות קודים.
למרבה המזל, אתה לא צריך להיות מקודד לנצל CSS3 באתר וורדפרס שלך. להנפיש את זה! תוסף מאפשר לך להחיל אנימציות CSS3 כדי הודעות, יישומונים, דפים בלחיצת כפתור בעורך. חוץ מזה, משתמשים יכולים לשלוט על טריגרים. לדוגמה, הם יכולים להחיל הנפשה על גלילה, קליק, או מעבר בריחוף, והוספת היסט מגילה אחר על קובצי אנימציה בודדים. תוסף מגיע גם עם טונות של תכונות, כגון:
- 50 + כניסה, יציאה, ותשומת לב אנימציות
- מספק תכונה עיכוב ואת משך השליטה אנימציה ליצור רצף אנימציה נחמד
- אפשר למשתמשים להחיל הנפשה אינסופית או מספר קבוע של פעמים
- אפשרות להוסיף שיעורים מותאמים אישית CSS לחסום אנימציה בודדים
- אפשרויות להפעלה או להשבית של הנפשות בסמארטפונים ובטאבלטים
מה אתה יכול לעשות עם להנפיש את זה! חיבור? אתה יכול להוסיף אינטראקטיביות פשוטה למאמרים שלך, ליצור דפי מכירות מפתה, להעמיק את הרגשות של הדמיון שלך, או אפילו ליצור מצגת עסקית רבת עוצמה אם אתה רוצה. רק תזכור לא ללכת overboard כמו bombarding את המבקר עם אנימציה ללא הגבלה היא לא הדרך הטובה ביותר להגיע הקוראים הנאמנים.
תחילת העבודה עם הנפשת אותו!
לאחר התקנה והפעלה של התוסף, ניתן למצוא את הלחצן להוספת אנימציה ב "עורך וורדפרס" כפתור זה יופיע רק במצב החזותי, אבל אם למדת את הפקודות, אפשר להכניס את הקודים מצב טקסט רגיל (עוד על כך מאוחר יותר).
לאחר לחיצה על הכפתור, תקבל חלון אפשרויות. ישנן שלוש כרטיסיות שם המאפשר לך להתאים אישית את האנימציה. הכרטיסייה הראשונה היא "כניסה". זהו המקום להוספת ההנפשה שתזין את המסך בתנאים מסוימים. ארבע אפשרויות הנפתח יסייעו לך להתאים את ההשפעות אנימציה.
- אנימציה היא המקום לבחור איזה סוג של אנימציה אתה רוצה.
- עיכוב יסייע לך להתאים את הזמן לפני שההנפשה מתחילה.
- משך הזמן הוא על כמה זמן את האנימציה יופעל מתחילתו ועד סופו. ככל שהמספר גדול יותר, כך ההאטה תהיה נמוכה יותר.
- תזמון הוא היחס של האנימציה לנגן בו זמנית. לדוגמה, האפקט "קלות" יפעיל את ההנפשה לאט יותר בהתחלה ובמהירות לקראת הסוף.
אתה יכול לבדוק את שילובי האפקטים על ידי משחק אותו באמצעות "להנפיש את זה!" כפתור. אם התוצאה היא לטעמך, אתה יכול ללחוץ על כפתור "הוספה" כדי להשתמש בו התוכן שלך.
הכרטיסייה "יציאה" דומה פחות או יותר לכניסה, אך כדי להוסיף הנפשה שתעזוב את המסך. על ידי שילוב השניים, ניתן להוסיף אובייקט שיופיע על המסך ולאחר מכן ייעלם.
הכרטיסייה "אפשרויות" היא המקום שבו אתה שולט בהגדרות הכלליות של האנימציה. כאן אתה יכול להגדיר את האנימציה לשחק על לולאה או פעם אחת בלבד, לשמור על אלמנט הסופי המדינה, להוסיף קוד CSS מותאם אישית, ולהגדיר את ההדק כי יתחיל את האנימציה. באופן ספציפי על ההדק - ההגדרה "הנפשת On" - תוכל לבחור ב- Scroll, לדוגמה, וההנפשה תתחיל רק אם האזור כבר נראה על המסך.
הוספת התוכן שלך
לאחר לחיצה על כפתור "הוספה", תראה כמה שורות של קודים קצרים שנוספו לאזור התוכן שלך. קודים אלה הם אלה שישלטו בהנפשה. ומכיוון שהם רק קודים עם ערכים, אתה יכול להוסיף את הקודים באופן ידני אם אתה טוב עם קודים ורוצים. עם זאת, אנשים אחרים צריכים רק מקל עם הנפשת זה! לַחְצָן.
תוכלו גם לראות שורה של טקסט שאומר, " אנא הוסף את התוכן שלך באזור זה. "הנה המקום שבו תוכל להוסיף את הפריטים שברצונך להנפיש. זה יכול להיות טקסט, תמונות, סמל, לוגו, audios, קטעי וידאו, או אפילו קודים אחרים. ניסיתי להוסיף shortcode אפקט מוקלד שנוצר באמצעות תוסף Js מודפס, והתוצאה היא מצוינת.
אם יש דבר אחד שאני יכול לומר על שימוש בהנפשה זה! תוסף זה יהיה "ניסוי!" לשחק עם זה ולנסות שילובים שונים כדי לקבל את התוצאה הרצויה. זה כיף. והנה התוצאה שעליתי בתוך פחות מדקה. אני המשולב להנפיש את זה! עם תוסף JS מודפס.
האם אתה חושב שהגיע הזמן להוסיף אלמנטים אינטראקטיביים לתוכן האינטרנט שלך? האם אתה מתכוון לנסות את הפלאגין? האם אתה משתמש בתוספים שונים לאנימציה? שתף באמצעות ההערות הבאות.