Comment créer l'arrière-plan fixe effet de défilement, sans image de fond?
J'ai un à l'horizontale et à la verticale centrée sur image sur une page. Je l'aime ainsi, lorsque l'utilisateur fait défiler le contenu ci-dessous il s'agit en réalité, comme si le contenu est fixe. Comme cet effet là... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/
Seul problème, c'est pour cet effet, ils utilisent le background-attachment: fixed propriété. Je ne peux pas utiliser ce que j'ai besoin de l'image à contenu (il sera réellement changé à la vidéo HTML5).
Mon code est ici... http://jsfiddle.net/5jphd/1/
HTML
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
<div class="text">Scroll down</div>
</div>
<div class="wrap">
Here is some content
</div>
CSS
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: absolute;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
}
Est-ce possible de faire avec ce langage? Ainsi, lorsque vous faites défiler le contenu de se lever et de chevauchement de l'image.
- Je suis un peu confus.. pourquoi ne pas simplement utiliser un fixe HTML5 vidéo alors? Vous serait tout simplement mettre le contenu en arrière-plan transparent. Par ailleurs, un grand nombre d'ordinateurs lag comme un fou si vous utilisez HD vidéo HTML5 horizons.. même un 5 extensible deuxième clip est comme 5mo et presque accidents de vieux Pc/ordinateurs Portables et un grand nombre de téléphones.
- est-ce que vous essayez d'accomplis ? jsfiddle.net/5jphd/2
- Oui GCyrillus c'est le résultat que je suis après, à l'exception de l'image doit être dans la balise image, et ne pas utiliser une image de fond d'écran.
Vous devez vous connecter pour publier un commentaire.
Ok je l'ai fait, c'est ce que je voulais obtenir. J'ai simplement fait la vidéo et de faire défiler le texte de la position:fixe, et le contenu du corps position:relative - http://jsfiddle.net/5jphd/4/
JSFiddle
Je pense que c'est ce que vous êtes essentiellement en demandant. Garder les ratios d'aspect à l'esprit, c'est ce que un hd vieo serait probablement ressembler sur une 320x480 ou donc.