Logo Scrolling Backgorund
#1
Exclamation 
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/
Reply
#2
(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 Smile
Reply
#3
(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 Smile

It worked, thank you so much Smile
Reply
#4
Where do i add those codes?
Do NOT PM me for support unless I ask you on your support thread.
Reply
#5
(2015-04-01, 09:07 PM)Limited Edition Wrote: Where do i add those codes?

global.css
The only place Toungue
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)