Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Niaeri

Двигающийся фон в шапке

Recommended Posts

На многих скинах я видела такую прелесть, как плывущая картинка в шапке. Я честно пыталась найти сама где это прописывалось бы, но так ни к чему прийти и не могу.

Snimokekra_9236521_14358893.png

Собственно, вот тут мне надо сделать так, что бы тыковки, котлы и прочие (это одна повторяющаяся картинка) плаавно двигались слева на право, или наоборот - не важно.

Edited by Niaeri

Share this post


Link to post
Share on other sites

Нет, в гугле я искала. Я не понимаю где именно это прописывать, потому что в ipb.styles в branding написано только

 

#branding {
background: #000 url("{style_images_url}/banner_bg.jpg") repeat-x top;
height: 130px;

 

И я не могу найти то место в уже существующем стиле с такой анимацией, где она прописана

Share this post


Link to post
Share on other sites
Я не понимаю где именно это прописывать

Что именно "это"?

 

И я не могу найти то место в уже существующем стиле с такой анимацией, где она прописана

В каком "существующем стиле"? А может быть там и не css анимация, а анимированная гифка.

 

ПС.

Скажите, вот нахрена приводить этот скриншот из первого поста, когда по нему никакой анимации не видно, и не понятно какие части и как они двигаются. Хотите показать пример - показывайте адресом на рабочем сайте.

Share this post


Link to post
Share on other sites

http://hp.ainodor.ru

Стиль Animate

 

Из того, что я разобралась ("это"), где-то должно быть написано примерно следующее

 

@keyframes anim {
from {background-position:0px 0px;}
to {background-position: ***px 0px;}
}

и вместо *** - скорее всего, бесконечность, или, в любом случае, очень много, потому что я "исследованием элемента" дошла до очень больших цифр в этом значении

Но я не понимаю где именно

Share this post


Link to post
Share on other sites
Стиль Animate
В данном стиле анимация сделана посредством jquery.

 

Из того, что я разобралась ("это"), где-то должно быть написано примерно следующее

Сперва Вам нужно добавить к селектору свойства анимации.

-webkit-animation: brandingMove 40s linear infinite;
animation: brandingMove 40s linear infinite;

 

Далее уже описать саму анимацию

@-webkit-keyframes brandingMove {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}

@keyframes brandingMove {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}

Share this post


Link to post
Share on other sites

Я использую этот плагин для jQuery:

 

spritely.net/documentation

 

Из минусов что нужно подключать библиотеку jQuery и сам плагин что утяжелит, но зато кроссбраузерно.

Share this post


Link to post
Share on other sites

Да ничего там особенно на jquery нет, свободно можно портировать на prototype поменяв один селектор.

 

var backgroundpos = 0;
var offset = 1;
function scrollbackground() {
	offset = (offset < 1) ? offset + (backgroundpos - 1) : offset - 1;
  		$('#branding').css("background-position",  + offset + "px 0");
  		setTimeout(function() {
		scrollbackground();
		}, 100
	);
  	}
	scrollbackground();

На CSS

 

<style>
@-webkit-keyframes brandingMove {
   from { background-position: 100% 0; }
   to { background-position: 0 0; }
}
@keyframes brandingMove {
   from { background-position: 100% 0; }
   to { background-position: 0 0; }
}

#branding{
-webkit-animation: brandingMove 40s linear infinite;
animation: brandingMove 40s linear infinite;
}
</style>

  • Upvote 1

Share this post


Link to post
Share on other sites

Спасибо огромное, все работает

Share this post


Link to post
Share on other sites
Да ничего там особенно на jquery нет, свободно можно портировать на prototype поменяв один селектор.
Не только селектор.

$('#branding').css("background-position",  + offset + "px 0");

Не является корректной записью в prototype.

Правильнее будет так

        $('branding').setStyle({"background-position": + offset + "px 0"});

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...