Главная » Файлы » Прочие скрипты » jQuery
Фон , который прокручивается медленнее контента на jQuery
23.06.14, 09:31:41

Скачать файл



Данный плагин создаёт очень интересный эффект. При прокручивания информации в блоке, текст будет прокручиваться быстрее, чем фон, на котором этот текст располагается

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах устанавливайте:
Код
<style type="text/css">
/* Recomended styles */  

#horizontal {  
background-image: url(Ссылка на фоновую картинку для горизонтального блока);  
background-position: 0px 0px; /* horizontal vertical */  
height: 300px;  
width: 300px;  
overflow: auto;  
}  

#vertical {  
background-image: url(Ссылка на фоновую картинку для вертикального блока);  
background-position: 0px 0px; /* horizontal vertical */  
height: 300px;  
width: 300px;  
overflow: auto;  
}  

/* Optional styles */  

#horizontal {  
float: left;  
margin-left: 100px;  
}  

#horizontal > div {  
height: 270px;  
width: 900px;  
margin: 0;  
color: White;  
}  

#horizontal .panel {  
width: 31%;  
padding: 0 1%;  
float: left;  
}  

#vertical {  
float: left;  
margin-left: 100px;  
}  

#vertical > div {  
margin: 0;  
color: White;  
}  

#vertical .panel {  
padding: 0 1%;  
height: 300px;  
}  

</style>


Следующий код в самый низ после /body:
Код
<script type="text/javascript" src="/js/jquery.backgroundparallax.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
$("#horizontal").backgroundparallax();  
$("#vertical").backgroundparallax();  
});  
</script>


Следующий код в то место, где будет сам блок:

1) Горизонтальный:
Код
<div id="horizontal">
<div>
<div class="panel">
Здесь любой ваш текст в первом абзаце  
</div>
<div class="panel">
Здесь любой ваш текст во втором абзаце  
</div>
<div class="panel">
Здесь любой ваш текст в третьем абзаце
</div>
</div>
</div>


2) Вертикальный:
Код
<div id="vertical">
<div>
<div class="panel">
Здесь любой ваш текст в первом абзаце  
</div>
<div class="panel">
Здесь любой ваш текст во втором абзаце  
</div>
<div class="panel">
Здесь любой ваш текст в третьем абзаце
</div>
</div>
</div>


Остаётся лишь залить скрипт из прикреплённого архива в папку js. Так же в архиве прикреплены два фоновых изображения из демо

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: фон, на, JQuery, контента, прокручивается, который, медленнее
Просмотров: 680 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: