אנימציית ״המשיכו לגלול״

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

הטמעת וידג׳ט HTML

על מנת להטמיע את האנימציה יש להוסיף במקום הרצוי וידג׳ט HTML

ובו להכניס את הקוד הבא:

<div id="mouse_body">
  <div id="mouse_wheel"></div>
</div>Code language: HTML, XML (xml)

הוספת קוד CSS

בנוסף, יש לצרף את הקוד CSS הבא:

#mouse_body {
  border-style: solid;
  border-width: 2px;
  border-color: #fff;
  border-radius: 32px;
  height: 43px;
  width: 23px;
  margin: 0 auto;
}

#mouse_wheel {
  border-style: solid;
  border-width: 2px;
  border-color: #fff;
  border-radius: 8px;
  background-color: #fff;
  position: relative;
  height: 3px;
  width: 3px;
  margin: 0 auto;
  -webkit-animation: wheel_animation 1.5s linear infinite;
  animation: wheel_animation 1.5s linear infinite;
}

@-webkit-keyframes wheel_animation {
  0% {
    opacity: 0;
    top: 2px;
  }
  50% {
    opacity: 1;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 33px;
  }
}

@keyframes wheel_animation {
  0% {
    opacity: 0;
    top: 2px;
  }
  50% {
    opacity: 1;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 33px;
  }
}Code language: CSS (css)