Bonjour,
je bidouille un petit site (quelques pages) et rencontre actuellement un soucis, c'est pourquoi je me tourne vers vous :
Je cherche à créer une page d’accueil avec l'effet "parallèle a l'axe"
dans le genre de ce site ou de celui-çi.
J'ai donc créée les fichiers suivants (en m'inspirant du tuto suivant de 2012) :
index.php
style.css
Donc une slide 1 composée d'une image slide1bg.jpg en "background" et une image pattern.png affichée, qui doivent être toutes deux de la même taille que la fenêtre du navigateur. Le premier scrolling vers le bas devant faire apparaitre la slide 2.
Seulement je n'arrive pas à faire en sorte que les deux images soient des même dimensions que la fenêtre du navigateur
: soit pattern est trop large, soit background est trop haute, ... je me noie complètement dans le css et tourne en rond.
Si quelqu'un avait le début d'un commencement d'idée pour que je puisse me sortir de mon petit tracas, ce serait bien urbain
En attendant vos (nombreuses réponses
) bonne après-midi à vous tou(te)s
Modifié par Xstof (23 Apr 2015 - 15:37)
je bidouille un petit site (quelques pages) et rencontre actuellement un soucis, c'est pourquoi je me tourne vers vous :
Je cherche à créer une page d’accueil avec l'effet "parallèle a l'axe"
dans le genre de ce site ou de celui-çi.J'ai donc créée les fichiers suivants (en m'inspirant du tuto suivant de 2012) :
index.php
<html>
<head lang="fr-FR">
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<link title="defaut" rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
</head>
<body>
<div id="slide1">
<div class="slide_inside"><img src="images/pattern.png" alt="fond" /></div>
</div>
<div id="slide2">
<div class="slide_inside">
<h2>Un titre de niveau 2</h2>
Lorem ipsum ect ....
</div>
</div>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.parallax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slide1').parallax("center", 0, 0.1, true);
$('#slide2').parallax("center", 700, 0.1, true);})
</script>
</body>
</html>
style.css
body {
width: 100%;
margin: 0px;
background-color: #FFFFFF;
font-family: verdana, sans-serif;
color: #959595;}
#slide1 {
background: url(images/slide1bg.jpg) center 0 no-repeat fixed;
background-size: cover;}
#slide2 {
background: url(images/slide2bg.jpg) center 0 no-repeat fixed;}
#slide1 .slide_inside {
overflow-x: hidden;}
#slide2 .slide_inside {
padding: 10px 250px 10px 250px;
text-align: justify;}
Donc une slide 1 composée d'une image slide1bg.jpg en "background" et une image pattern.png affichée, qui doivent être toutes deux de la même taille que la fenêtre du navigateur. Le premier scrolling vers le bas devant faire apparaitre la slide 2.
Seulement je n'arrive pas à faire en sorte que les deux images soient des même dimensions que la fenêtre du navigateur
: soit pattern est trop large, soit background est trop haute, ... je me noie complètement dans le css et tourne en rond.Si quelqu'un avait le début d'un commencement d'idée pour que je puisse me sortir de mon petit tracas, ce serait bien urbain
En attendant vos (nombreuses réponses
) bonne après-midi à vous tou(te)s Modifié par Xstof (23 Apr 2015 - 15:37)