רקעי טקסט מונפשים בתנועה

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

יותר מרקע

רוב הרקעים עומדים במקום: צבע, תמונה, מעבר צבע. 

כותרת גוללת בלי רינדור

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

רקע נע בלי קוד

Drift הופך את הקיר למרקי אנכי איטי: הטקסט זוחל כלפי מעלה בלולאה, רקע טקסט נע רגוע יותר למקטע שצריך לנשום ולא לצעוק. במקום שבו בדרך כלל היית כותב ביד אנימציית CSS keyframes או מוסיף ווידג'ט של טקסט גולל, כאן זו בקרת מהירות אחת. רקע הטקסט המונפש יושב מאחורי הטקסט שלך, מוגדר מפאנל, וממשיך לעבוד אחרי עדכון כי אין קטע קוד שיכול להישבר.

העבודה שלך תמיד בתנועה

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

עומק בשכבות בלי מעצב

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

מילה ללא טון

תנועה שעוצרת את הגלילה

Lanes הוא מרקי אלכסוני: שורות נוטות וחולפות במהירות בכיוונים מתחלפים. זה סוג רקע הטקסט הנע שאנשים מחפשים כ-marquee text css או כאפקט טקסט גולל אינסופי, ואז בונים מחדש בכל פעם שתבנית העיצוב מתעדכנת. ב-Instinctor זו תנועה אחת בקיר התנועה, שמוגדרת בכל מקטע, כך שרקע הטקסט המונפש נשאר מהיר וקריא, בלי JavaScript ובלי תוסף טקסט גולל שצריך לתחזק.

תיק העבודות שלך חולף במהירות

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

נראה כאילו סטודיו בנה אותו

Zoom יוצר צלילה אינסופית: הקיר גדל ומתמזג לתוך עצמו, רקע טקסט נע שמרגיש כמו נפילה קדימה. לבנות את זה ביד פירושו CSS transforms בשכבות או רקע מונפש מהדגמה ב-codepen. כאן זו הגדרה אחת של קיר התנועה במקטע, כך שרקע הטקסט המונפש מרונדר בזמן אמת בדפדפן, לא מכביד על מהירות העמוד ולא דורש קוד לתחזק.

צלול לתוך העבודה שלך

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

טקסט תלת-ממדי ללא After Effects

Tilt מטה את כל הקיר למישור תלת-ממדי רדוד, רקע טקסט נע עם תחושת עומק. בדרך כלל זה CSS 3D transform שמכווננים ביד, או ווידג'ט רקע מונפש בתשלום. בקיר התנועה זו אפשרות אחת בכל מקטע, כך שרקע הטקסט המונפש הוא חלק מבונה העמודים ולא קטע קוד, והטקסט שמאחורי התוכן שלך נשאר טקסט שאפשר לסמן ולאנדקס.

התמונות שלך נוטות בתלת-ממד

גלריה מוטה: התמונות שלך נוטות למישור תלת-ממדי רדוד ונסחפות, רקע תמונות נע עם עומק. בדרך כלל זה CSS 3D transform וסקריפט של מצגת, או ווידג'ט רקע מונפש בתשלום. בקיר התנועה זו אפשרות אחת במקטע, כך שרקע התמונות המונפש הוא חלק מבונה העמודים, מרונדר בזמן אמת ומציג את העבודות שלך מאחורי הטקסט.

טיקר חי מובנה

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

העבודה שלך על סליל מתגלגל

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

תנועה דו-צבעית בלחיצה אחת

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

Stickers מפזר תוויות מסובבות שנודדות על פני המסגרת, רקע טקסט נע ושובב. זה סוג הדבר שאנשים מרכיבים מ-CSS במיקום מוחלט או מבאנר של Canva שיוצא כתמונה. ב-Motion Wall זו אפשרות אחת במקטע והיא נשארת טקסט חי, כך שרקע הטקסט המונפש הוא מילים אמיתיות שניתנות לאינדוקס ולא גרפיקה שטוחה שמנועי חיפוש לא יכולים לקרוא.

העבודה שלך מפוזרת וחיה

Stickers מפזר את התמונות שלך כתוויות מסובבות ונודדות, רקע תמונות נע ושובב. בדרך כלל זה קולאז' CSS במיקום מוחלט או ייצוא מ-Canva שנשמר כתמונה שטוחה אחת. ב-Motion Wall זה נשאר שכבה חיה של תמונות נפרדות, כך שהרקע המונפש מתעדכן כשאתה מחליף תמונה, בלי גרפיקה שטוחה ובלי תוסף, ומוגדר מפאנל המקטע.

העבודה שלך ממסגרת את העמוד

קיר נועז בלי שורת קוד

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

תנועה היפנוטית בלחיצה אחת

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

העבודה שלך מושכת אותם פנימה

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

המרקם בלי הרינדור

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

העבודה שלך, מוצמדת מאחורי הכל

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

פרספקטיבה בלי תוכנת תלת-ממד

Funnel מכנס את השורות לעבר נקודת מגוז, רקע טקסט נע עם פרספקטיבה. בדרך כלל זה אוסף של CSS transforms או סקיצת WebGL מ-CodePen. ב-Motion Wall זו אפשרות אחת במקטע, כך שרקע הטקסט המונפש הוא חלק מבונה העמודים, מוצג בזמן אמת ושומר את הטקסט שמאחורי התוכן שלך כטקסט שניתן לסריקה ולאינדוקס, ולא כגרפיקה צרובה.

באנר שלעולם לא מפסיק

Banner חוצה את המקטע ברצועה אלכסונית של טקסט נע, בן הדוד האלכסוני של באנר טקסט גולל. אנשים קונים לזה מחולל באנרים גוללים או ווידג'ט של Elementor. ב-Instinctor ה-Motion Wall עושה את זה כהגדרה בכל מקטע, כך שרקע הטקסט המונפש מובנה, נשאר מהיר ולעולם לא תלוי בתוסף באנרים של צד שלישי שעלול להישבר בעדכון הבא.

מראה של דפוס חי בעמוד

Overprint מניח שני צבעים של אותו טקסט בהיסט קל, רקע טקסט נע בתחושה של הדפסת ריזוגרף. בבנייה ידנית זה CSS בשכבות עם מצבי מיזוג; בהורדה, זה רקע מונפש שקשה לצבוע מחדש. כ-Motion Wall זו תנועה אחת עם דיו שני, שמוגדרת במקטע, כך שאתה מכוונן את רקע הטקסט המונפש בפאנל והוא נשאר טקסט אמיתי שניתן לאינדוקס.

עומק של WebGL בלי WebGL

Coils מסובב את הטקסט במעלה עמודות סליל אנכיות, רקע טקסט נע מורכב. זה סוג הרקע המונפש שחי ב-CodePen של WebGL או בייצוא מ-After Effects. בבונה העמודים של Instinctor זו אפשרות אחת במקטע, שמוצגת בזמן אמת בדפדפן, כך שרקע הטקסט המונפש לא מכביד על מהירות העמוד ולא דורש ספרייה, תוסף או קוד לתחזוקה.

טקסט על עקומה בלי JavaScript

Snake משחיל את השורה לאורך נתיב מתפתל, רקע טקסט נע שנראה כמו פס טקסט רץ שעוקב אחרי עקומה. בעבודה ידנית זה נתיבי SVG ו-JavaScript, או אפקט טקסט גולל מ-CodePen. ב-Motion Wall זו תנועה אחת במקטע, כך שרקע הטקסט המונפש הוא הגדרה ולא סקריפט, והמילים נשארות טקסט שניתן לסמן ולאנדקס בעמוד החי.

טקסט במעגל בלי עבודת SVG

Rings מסדר את הטקסט במעגלים קונצנטריים שמסתובבים בכיוונים מנוגדים, גרסה מעגלית של רקע טקסט נע. כדי לשחזר אותו צריך SVG textPath ואנימציה מותאמת, או רקע מונפש שאתה מעתיק ולא יכול לערוך. כ-Motion Wall זו אפשרות אחת בכל מקטע, כך שרקע הטקסט המונפש הוא חלק מבונה העמודים, מוצג בזמן אמת ושומר את הטקסט כמילים אמיתיות שמנועי חיפוש סורקים.

תנועה רכה בלי שום קוד

Wave lanes מזרים את השורות לאורך מסלולי סינוס עדינים, רקע טקסט נע רך יותר מפס טקסט רץ ישר. בבנייה ידנית זה CSS עם keyframes או סקיצת canvas. ב-Motion Wall זו תנועה אחת במקטע, כך שרקע הטקסט המונפש הוא פקד שאתה מגדיר בפאנל, נשאר מהיר בעמוד ולא צריך תוסף טקסט גולל או אנימציה שנכתבה ביד כדי להמשיך לפעול.

גל שמעולם לא כתבת בקוד

Wave stack שולח גל נע דרך שורות טקסט ברוחב מלא, רקע טקסט נע ומתגלגל. זה סוג הרקע המונפש שאנשים מחפשים כ-CSS wave text או כאפקט מ-CodePen. ב-Instinctor זו אפשרות Motion Wall אחת במקטע, כך שרקע הטקסט המונפש מוצג בזמן אמת, נשאר קל, והטקסט שמאחורי התוכן שלך נשאר מילים אמיתיות שניתנות לאינדוקס ולא תמונה שטוחה.

טקסט שנושם מעצמו

Weight walk מנפיש את עובי הקו לאורך האותיות, מדק לעבה ובחזרה, רקע טקסט נע ועדין שבנוי על גופן משתנה. בקוד ידני זה font-variation-settings ו-keyframes; בקנייה, זה ווידג'ט שאי אפשר לכוונן. כ-Motion Wall זו תנועה אחת במקטע, כך שרקע הטקסט המונפש הוא הגדרה בפאנל והטקסט נשאר חי ונסרק על ידי מנועי חיפוש.

רקע שהסמן חושף

חשיפת הזרקור מסתירה את הקיר כמעט לגמרי, ואז מאפשרת לרקע הטקסט הנע לזהור רק במקום שבו הסמן זז. בבנייה ידנית זו מסכה שמופעלת על ידי JavaScript ואירועי עכבר. ב-Motion Wall זה מתג אחד במקטע, כך שרקע הטקסט המונפש הוא אפקט אינטראקטיבי שאתה מפעיל בפאנל, בלי קוד ובלי תוסף, והטקסט שמתחתיו נשאר קריא.

כל בקרה בפאנל

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

אנרגיה, לא קישוט

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

מהו רקע טקסט מונפש?

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

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

שאלות נפוצות על רקע טקסט מונפש

ראה מה עוד זה עושה

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

העבודה שלך חולפת לנגד העיניים

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