טקסט או מילה מתחלפים באנימציה

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

מכירים את זה שיש משפט אחד ובו מילה אחרת מתחלפת כל הזמן בסוף? למשל "זה הזמן שלך להצליח \ להרוויח \ לחלום \ להגיע להישגים" וכל הזמן מילה אחרת קופצת לה? אז יש פיתרון פשוט מאוד באמצעות Jquery. הפיתרון הוא simple-text-rotator.

הנה דוגמאות

1. הורידו את הקבצים האלו ומקמו אותם במקום המתאים. אני שמתי בתיקיה addons.

2. קשרו אל הקים האלו ב-Header שלכם.

<!-- Text Rotation -->
        <link rel="stylesheet" type="text/css" href="/addons/textrotate/simpletextrotator.css"/>
        <script type="text/javascript" src="/addons/textrotate/jquery.simple-text-rotator.min.js"></script>

3. הוסיפו את הסקריפט עם המהירות וסוג האנימציה הרצויים.

$(".rotate").textrotator({
      animation: "flipUp", // You can pick the way it animates when rotating through words. Options are dissolve (default), fade, flip, flipUp, flipCube, flipCubeUp and spin.
      separator: ",", // If you don't want commas to be the separator, you can define a new separator (|, &, * etc.) by yourself using this field.
      speed: 2000 // How many milliseconds until the next word show.
    });

4. עכשיו כל מה שנותר לכם הוא ליצור DIV שבתוכו יש SPAN המכיל את המילים המתחלפות מופרדות בפסיקים. למשל

ל<span class="rotate">הנהיג.,הרוויח.,הצליח.</span>

בחלק מהמקרים תצטרכו לשים overflow:hidden; לאלמנט האב כדי שהאנימציה תפעל כראוי.