Bonjour,
j'aimerai donner a ma page web cette effets sauf que en me baladant sur le Web je n'est rien trouver qui puisse m'aider...
je viens donc vous demander si vous avez les connaissances voici le code de ma page :
<html>
<head> <meta charset="utf-8" /> <title>Sophrologie</title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="animation.css" /> </head>
<header>
<h1> Sophrologie </h1>
<a id="accueil" href="#textimage" />Accueil</a>
<a id="sophrologie" href="#p2" />La sophrologie</a>
<a id="contacter" href="#p3" />Contacter-moi</a>
<div id=passage ></div>
</header>
<body>
<img id=img src="images/sophrologie2.jpg" alt="images/sophrologie2.jpg"/>
<article id=textimage >
</br></br></br></br></br></br>
<p id=T1> Véronique Prévost </p>
<p id=T2> sophrologue diplomée </br> certifiée RNCP </p>
<div id=ligne></div>
</br></br></br>
</article>
<article id=p2 >
<h2> La Sophrologie </h2>
<div class=ligne2></div>
</article>
<article id=p3 >
<h2> Me contacter </h2>
<p id=T3 > voici tous les moyens de contact pour prendre un eventuelle rendez-vous: </p>
<div class=ligne2></div>
<a class=lienc id=facebook href="https://facebook.com" title="lien cliquable"/>facebook</a>
<a class=lienc id=telephone href="#" title="numero de telephone"/>Telephone</a>
<a class=lienc id=email href="mailto:***@***" title="lien cliquable"/>email</a>
</br></br>
<p id=T4> Sophrologiquement Véronique Prévost</p>
</article>
</body>
<script src="defilement.js"></script>
<script src="script.js" ></script>
</html>
a { text-decoration : none ; color : rgb(150, 150, 150) ; }
html { background-color : white ; }
/* tete de page*/
Header { position : fixed ; top : 0 ; left : 0 ; right : 0 ; bottom : 874px ; background-color : White ; box-shadow : 0.1px 0.1px 0.1px black ; z-index : 10 ; }
h1 { position : fixed ; top : -5px ; left : 200px ; }
#passage { position : fixed ; top : 0 ; bottom : 874px ; left : 1290px ; width : 70px ; background-color : LightGrey ; opacity : 0.25 ; z-index : 1 ; }
/*les liens*/
#accueil { position : fixed ;top : 28px ; left : 1300px ; z-index : 2; }
#sophrologie {position : fixed ;top : 28px ; left : 1370px ;z-index : 2; }
#contacter { position : fixed ;top : 28px ; left : 1480px ;z-index : 2; }
/*image principal*/
#img { position : absolute ; top : 79px ; left : 0 ; right : 0 ; z-index : 1 ;box-shadow : 0.1px 0.1px 0.1px black ; }
/*texte de l'image*/
#textimage { position : absolute ; top : 100px ; left : 300px ; right : 300px ; bottom : 350px ; z-index : 2 ; text-align : center ;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; color : #181d85 ; text-shadow: 2px 2px 3px rgba(0,0,0,0.6);}
#T1 { font-size : 52px ; }
#T2 { font-size : 36px ; position : absolute ; top : 195px ; left : 495px ; }
/*Ligne de l'image*/
#ligne { width : 400px ; height : 2px ; background-color : #181d85 ; position : absolute ; top : 225px ; left : 475px ; box-shadow : 0.5px 0.5px 0.5px Black; }
/* Les Boutons */
#facebook { position : absolute ; left : 485px ; width : 120px ; height : 30px ; display : inline-block ; text-indent : -5000px ; border-radius : 10px ;
background : url(images/Facebook.jpg) 0 0 no-repeat ; border : 1px solid LightGrey ; transition : all .5s ; -webkit-transition : all .5s ; -moz-transition : all .5s ; }
#telephone {position : absolute ;left : 609px ; width : 120px ; height : 30px ; display : inline-block ; text-indent : -5000px ;background : url(images/telephone.jpg) 0 0 no-repeat ;
border : 1px solid LightGrey ; transition : all .5s ; -webkit-transition : all .5s ; -moz-transition : all .5s ;border-radius : 10px ;}
#email { position : absolute ;left : 733px ; width : 120px ; height : 30px ; display : inline-block ; text-indent : -5000px ;background : url(images/email.jpg) 0 0 no-repeat ;
border : 1px solid LightGrey ; transition : all .5s ; -webkit-transition : all .5s ; -moz-transition : all .5s ;border-radius : 10px ;}
/* page sur la sophrologie */
#p2 { position : absolute ; top : 730px ; left : 0 ; right : 0 ; bottom : -1050px ; background-color : White ; z-index : 1 ; }
h2 { position : absolute ; top : 100px ; left : 300px ; color : rgb(38, 38, 38); font-size : 36px ; }
.ligne2 { width : 400px ; height : 2px ; background-color : LightGrey ; position : absolute ; top : 95px ; left : 300px ; }
/* page contacter*/
#p3 { position : absolute ; top : 1700px ; left : 0 ; right : 0 ; bottom : -1300px ; background-color : White ; z-index : 1 ; font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;}
#T3 { position : absolute ; top : 200px ; left : 300px ; }
.lienc { position : absolute ; top : 250px ; left : 400px ; }
#T4 { position : absolute ; top : 300px ; left : 300px ; }
#contacter:hover { color : #181d85 ; }
#accueil:hover { color : #181d85 ; }
#sophrologie:hover { color : #181d85 ; }
#facebook:hover { background : url(images/Facebook.jpg) 0 -30px no-repeat ; }
#telephone:hover {background : url(images/telephone.jpg) 0 -30px no-repeat ; }
#email:hover { background : url(images/email.jpg) 0 -30px no-repeat ; }
h1:hover { color : #181d85 ; }
document.getElementById('p2').addEventListener('mouseover',
function()
{
document.getElementById('passage').setAttribute('style', ' position : fixed ; top : 0 ; bottom : 874px ; left : 1365px ; width : 105px ; background-color : LightGrey ; opacity : 0.25 ; z-index : 1 ; ');
}
,false);
document.getElementById('textimage').addEventListener('mouseover',
function()
{
document.getElementById('passage').setAttribute('style', ' position : fixed ; top : 0 ; bottom : 874px ; left : 1290px ; width : 70px ; background-color : LightGrey ; opacity : 0.25 ; z-index : 1 ; ');
}
,false);
document.getElementById('p3').addEventListener('mouseover',
function()
{
document.getElementById('passage').setAttribute('style', ' position : fixed ; top : 0 ; bottom : 874px ; left : 1473px ; width : 105px ; background-color : LightGrey ; opacity : 0.25 ; z-index : 1 ; ');
}
,false);
('a[href^="#p2"]').click(function(){
var the_id = $(this).attr("href");
if (the_id === '#p2') {
return;
}
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;
});
Configuration: Windows / Chrome 72.0.3626.109
Afficher la suite
27 févr. 2019 à 17:30