Tweet
Bonjour à tous !
Je cherche à créer un site avec une ouverture un peu "classe", c'est à dire un effet de rideau qui s'ouvre lorsqu'on clique sur le logo (pour illustrer mon idée http://buildinternet.com/live/curtains/), uniquement sur la page d'accueil. J'ai pu créer ce que je voulais mais je n'arrive malheureusement pas à l'intégrer sur Joomla, rien ne se passe lorsque je clique sur mon logo... Et n'ayant pas des connaissances très évoluées en javascript, je dois avouer que je suis perdu et j'ai besoin d'aide.
Voici mon code si besoin est :
Y aurait-il une âme charitable qui puisse m'aider ou m'aiguiller ?
Maxime
Je cherche à créer un site avec une ouverture un peu "classe", c'est à dire un effet de rideau qui s'ouvre lorsqu'on clique sur le logo (pour illustrer mon idée http://buildinternet.com/live/curtains/), uniquement sur la page d'accueil. J'ai pu créer ce que je voulais mais je n'arrive malheureusement pas à l'intégrer sur Joomla, rien ne se passe lorsque je clique sur mon logo... Et n'ayant pas des connaissances très évoluées en javascript, je dois avouer que je suis perdu et j'ai besoin d'aide.
Voici mon code si besoin est :
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Animate a Curtain Opening with jQuery | Build Internet</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".button").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '-20%' }, {queue:false, duration:2000, easing:'easeOutBack'});
$(".leftcurtain").stop().animate({left:'-50%', opacity:'0'}, {queue:false, duration:2000, easing:'easeOutBack'} );
$(".rightcurtain").stop().animate({right:'-50%', opacity:'0'}, {queue:false, duration:2000, easing:'easeOutBack'} );
$curtainopen = true;
}
return false;
});
});
</script>
<style type="text/css">
.leftcurtain{
width: 50%;
height: 100%;
top: 0px;
left: -5px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 100%;
right: -5px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 150px;
}
.button{
position: absolute;
top: 25%;
left: 46%;
z-index: 4;
}
</style>
</head>
<body>
<div class="leftcurtain"><img src="images/leftcurtain.jpg"/></div>
<div class="rightcurtain"><img src="images/rightcurtain.jpg"/></div>
<img class="logo" src="images/buildinter.png"/>
<a class="button" href="#">
<img src="images/logo.jpg"/>
</a>
</body>
Maxime
Commentaire