Меняющийся фон сайта
В этом уроке мы сделаем меняющийся фон сайта при помощи скрипта CrossSlide.
Рассмотрим 3 разных вида эффекта изменения фона:
- Плавное появление и исчезания изображений фона
- Перемещение изображения вверх\низ
- Эффект приближения и отдаления
Выставляйте качество 480р.
Если урок Вам был полезен, нажмите на любую кнопку ниже— буду благодарен 
Всем удачи и следите за ходом событий 
А можно сделать так, чтобы ещё и текст менялся на сайте вместе с каждой картинкой? Примерно как на сайте Еврохима. Я применил ваш скрипт, чтобы сделать как у них менялся фон, только нужно чтоб ещё как у них на каждой картинке надписи менялись.
Или может поясните как это можно сделать отдельным дивом, но настроить чтоб это было синхронно с картинками? Спасибо.
Здравствуйте. У них там сделано немного не так, у них там просто слайдер стоит, который пролистывает картинки и вместе с ними и текстовые блоки.
А данный скрипт, просто чисто для фона. Возможно, можно и с ним что-то такое придумать, но я этим вопросом не задавался. Думаю проще будет найти обычный слайдер и прикрутить его.
Привет! А как сделать, чтобы height была по размеру экрана? Когда в #placeholder вместо например 700px вводишь 100% или auto, то фон вообще перестает отображаться. Не хочется чтобы был скролл или кусок без фона на мониторах с разным разрешением. Заранее спасибо
Здравствуйте.
Так сложно сказать, пробуйте играть с CSS, попробуйте этому div’у поставить display:table-cell; и тогда, возможно, он примет высоту.
Дмитрий, у меня возникла проблема, делал скрипт по самому первому примеру, всё указал сделал форму в CSS и вставил скрипт в код страницы, но вот картинки не отображаются! помогите, буду благодарен
Здравствуйте.
Наверно, что-то забыли подключить, раз не работает. Проверьте все еще раз. Подключен ли сам скрипт – самое важное. Мне писали, что все сделано правильно но не работает, хотя на самом деле оказалось, что даже скрипт не подключили…
вот пример моего кода:
1. Подключился к беблиотеке, потом тут у меня календарь с беблиотеки и последнее скрипт cross-slide:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cross-slide.js"></script>
2.вот css:
#ss{
background-color:#CCC;
border-radius: 15px;
border:#999 5px solid;
}
#is{
width:450px;
height:250px;
margin-left:14%;
position:relative;
}
3. А вот так выглядит код страницы:
<div id="ss">
<div id="is">
<script>
$(function() {
$('#is').crossSlide({
speed: 2,
fade: 1
}, [
{ src: 'img/lekarstva1.jpg' },
{ src: 'img/13817.jpg' },
{ src: 'img/tabletki.jpg' },
{ src: 'img/gomeo.jpg' }
]);
});
</script>
</div>
</div>
Может ли здеси играть роль версии библиотек? может ли в этом быть ошибка?
В некоторых случаях да, бывает, что сменишь библиотеку и начинает работать.
Но я думаю это не тот случай.
а что же может быть в моём случае? посоветуете??)
Попробуйте сделать так же как в уроке. Т.е все CSS стили возьмите из урока и т.д, а потом сравните, что у Вас не сходится.
У меня возникла проблема с отображением на разных мониторах. Нужно что бы всегда было 100%. "display:table-cell" – не помогло.
Заранее спасибо за помощь.
Не зная структуры сайта, врятли смогу что-то подсказать.
урок мне очень понравился. А как сделать так, чтобы фон сайта менялся при клике на категорию меню. Или это нужно писать специальный скрипт?
Спасибо
Честно – я не знаю. Нужно просто пробовать
Не работает (( может проще урок не в видео а какой нибудь примерный исходник выложите? Очень надо!
заранее спасибо!
1) даа, конечно жаль что "display:table-cell" не помогает для подстройки по разрешению экранов =(
2) ..и вот у меня почему-то незахотел встать табле между дивами. оказывается внизу страницы. есть совет по этому поводу?! (otvezemspb .ru)
<div id="bg_image">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="main-table">
<tr>
<td valign="top">
<h1 align="center"> TEST </h1>
</td>
</tr>
</table>
</div>
отвечаю сам себе
нужно подкорректировать в фалйе *.css строки:
#bg_image{
width:100%;
position:absolute;
left: 0px;
top: 0px;
height: 490px;
}
осталось разобраться с растяжкой
Попробовал, в целом неплохо.
Не хватило познаний, как менять только в хедере?
Остальные дивы в хедере по сторонам расползаются, не получается их наверх вытащить.
Дмитрий может посоветуете, как быть?
Этот скрипт подходит больше для смены именно фона.
Если вы хотите сделать только, например, в шапке сайта, то рекомендую использовать какой-нибудь слайдер.
Например, мне нравится – nivoslider.
Прошу прощения за оффтоп!
Дмитрий, могли-бы Вы сделать маленький видео-курс о добавлении товаров в корзину и обновлении корзины без перезагрузки страницы. То-есть с помощью jQuery?
Я был бы Вам за это благодарен, особенно если это будет на основе вашего урока по созданию мини интернет магазина.
Попробовал на DLE отлично работает единственное точки убрал в названиях JS фалов, а то не хотел что то
Спасибо