Hello everyone. I was on a fourm, and i saw that thier logo background was scrolling, can someone please tell me how to do this? Thanks
The Fourm I was Looking At:
http://forumcamp.com/
(2014-03-21, 07:42 PM)xXTobiasXx Wrote: [ -> ]Hello everyone. I was on a fourm, and i saw that thier logo background was scrolling, can someone please tell me how to do this? Thanks
The Fourm I was Looking At: http://forumcamp.com/
The logo is a static transparent image centered in the div.
The background animation is done using CSS. These keyframes are defined in the CSS:
@-webkit-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
@-moz-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
@-ms-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
@-o-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
@keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
...and then these elements are added to the div along with the background image:
-moz-animation: bgscroll 70s infinite linear;
-ms-animation: bgscroll 70s infinite linear;
-o-animation: bgscroll 70s infinite linear;
-webkit-animation: bgscroll 70s infinite linear;
No plugin is required
(2014-03-21, 08:45 PM)buzzle Wrote: [ -> ] (2014-03-21, 07:42 PM)xXTobiasXx Wrote: [ -> ]Hello everyone. I was on a fourm, and i saw that thier logo background was scrolling, can someone please tell me how to do this? Thanks
The Fourm I was Looking At: http://forumcamp.com/
The logo is a static transparent image centered in the div.
The background animation is done using CSS. These keyframes are defined in the CSS:
@-webkit-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
@-moz-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
@-ms-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
@-o-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
@keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -1100px 0;}
}
...and then these elements are added to the div along with the background image:
-moz-animation: bgscroll 70s infinite linear;
-ms-animation: bgscroll 70s infinite linear;
-o-animation: bgscroll 70s infinite linear;
-webkit-animation: bgscroll 70s infinite linear;
No plugin is required
It worked, thank you so much
Where do i add those codes?
