How to create scrolling background

      No Comments on How to create scrolling background

How to create scrolling background using CSS animations.

Understanding CSS animations:

  • An animation is something that lets you change CSS of any element from one to another.
  • CSS can be changed infinite times.
  • CSS3 animations are specified using keyframes. Keyframes hold what styles the element will have at certain times.

The @keyframes rul

When CSS is applied in the @keyframes rule, style of an element automatically changes from curren to new style over time.

Properties of animations are:

PropertyDescription
@keyframesSpecifies the animation code
animation<A shorthand property for setting all the animation properties
animation-delaySpecifies a delay for the start of an animation
animation-directionSpecifies whether an animation should play in reverse direction or alternate cycles
animation-durationSpecifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-modeSpecifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-countSpecifies the number of times an animation should be played
animation-nameSpecifies the name of the @keyframes animation
animation-play-stateSpecifies whether the animation is running or paused
animation-timing-functionSpecifies the speed curve of the animation

How to create scrolling background

For creating scrolling background animation we define backgroundScroll animation in the @keyframes rule. This animation transforms the background position from 0,0 to 0, -800px. The background image is repeated so that there are no empty spaces anytime during the scroll. Animation is run infinitely to give the scrolling effect.

animation: backgroundScroll 60s linear infinite;
specifies the animation with name backgroundScroll has duration of 60s is of linear type and runs infinitely.

HTML:

<div id="scroll_inner">
  <div id="horizontal-scroll"></div>
</div>

CSS:

#scroll_inner
{
   height:300px;width:90%;position:relative;
}
#horizontal-scroll {
width: 100%;  
height: 100%;  
background: url(http://scanfcode.com/wp-content/uploads/2017/04/banner1.png) repeat;
background-size:containt;  
-webkit-animation: backgroundScroll 60s linear infinite;
animation: backgroundScroll 60s linear infinite; 
padding:0px;
margin:0px; 
position: absolute;top:0;left:0;z-index:10;
}

/* animation */
@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}  
to {background-position: 0px -800px;}  
}
@keyframes backgroundScroll {
from {background-position: 0 0;}  
to {background-position: 0px -800px;}  
}  

Leave a Reply

Your email address will not be published. Required fields are marked *