• 51
  • 18

Stellar.js

(0.0)
0
Github
Repozytorium Github
Strona wtyczki
Oficjalna witryna wtyczki
Dokumentacja
Sprawdź wszystkie opcje jakie oferuje plugin
Wersja jQuery: jquery >=1.4.3
Wersja jQuery z którą współpracuje plugin
Licencja: MIT
Licencja
Wersja: 0.6.2
Numer wersji wtyczki
Zobacz więcej
Tagi
Instalacja
  • Biblioteki
  • CSS
  • HTML
  • JS
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.stellar.min.js"></script>
* {
	margin: 0;
	padding: 0;
}
.photo {
	background-attachment: fixed;
	background-position: center bottom;
	background-repeat: no-repeat;
	height: 800px;
	position: relative;
	width: 100%
}
.photo1 {
	background-image: url(http://jquery.netid.pl/media/sample/1920x800/1.jpg);
}
.photo2 {
	background-image: url(http://jquery.netid.pl/media/sample/1920x800/2.jpg);
}
.photo3 {
	background-image: url(http://jquery.netid.pl/media/sample/1920x800/3.jpg);
}
.photo4 {
	background-image: url(http://jquery.netid.pl/media/sample/1920x800/4.jpg);
}
.photo5 {
	background-image: url(http://jquery.netid.pl/media/sample/1920x800/5.jpg);
}
.photo6 {
	background-image: url({sampleImgPath size=700x500}/6.jpg);
}
<div class="photo photo1" data-stellar-background-ratio="0.1"></div>
<div class="photo photo2" data-stellar-background-ratio="0.1"></div>
<div class="photo photo3" data-stellar-background-ratio="0.1"></div>
<div class="photo photo4" data-stellar-background-ratio="0.1"></div>
<div class="photo photo5" data-stellar-background-ratio="0.1"></div>
<div class="photo photo6" data-stellar-background-ratio="0.1"></div>
$(document).ready(function(){
	$.stellar({
		horizontalScrolling: false,
		verticalOffset: 40
	});
});
Demo
Pobierz demo
lub zobacz wersję on-line
mobile