Tutoriel Vidéo jQuery : Page cornée animée

agentcobra Il y a 3 mois Répondre

salut à tous,

comment on peut mettre du contenu, html pourquoi pas , sous cette image ?

cordialement,
agentcobra

Grafman Il y a 8 mois Répondre

Tu utilises quoi comme frameworks ? Juste par curiosité

patgine Il y a 1 an Répondre

Bonjour.
j'espère qu'il n'est pas trop tard pour avoir de l'aide.
mon image reste en haut à gauche, même après plusieurs essais.
voilà le script. Merci de m'aider, à bientôt.
<html>
<head>

<style type="text/css" media="screen">
body{background:#f2f2f2; margin:0; padding:0;}
.page{position:absolute; botton:0; right:0; width:50px; height:50px;}
.page img{ width:100%; height:100%;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js> ;</script>
<script type="text/javascript">
$(function(){
$('.page').hover{
function(){
$(this).stop().animate({ width:150, height:150},500);
}
,
function(){
$(this).stop().animate({ width:50,height: 50},500);
}
};

});
</script>

</head>

<body>
<div classe="page">
<img src="page.jpg"/>
</div>
</body>
</html>

Dodo01 Il y a 1 an

.page{position:absolute; botton:0; right:0; width:50px; height:50px;}
C'est bottoM (pour "bas" en anglais)

Grafman Il y a 8 mois - Répondre

Piox Il y a 1 an Répondre

Quelle est le logiciel que vous utilisez pour faire cela ??

benkhai Il y a 2 ans Répondre

par contre si en veux créer une revue ou un livre qui comporte du texte comment peut on le faire

hector Il y a 2 ans Répondre

Aidez moi s'il vous plait! j'ai essayé le tutot mais ça ne marche pas et je ne comprend pas pourquoi...

mon page.html :

<!DOCTYPE html PUBLIC "_//W3C::DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml " xml:lang="fr" lang="fr">

<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
<script type="text/javascript" src="page.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>
<div class="page">
<img src="page.jpg"/>
</div>
</body>

</html>

mon page.css :

body{ background:#F1F1F3; margin:0; padding:0; }
.page{ position:absolute; bottom:0; right:0; width:50px; height:50px; }
.page img{ width:100%; height:100%; }

mon page.js :

$(function(){
$('.page').hover{
function(){
$(this).stop().animate((width:500, height:500), 500);
}
,
function(){
$(this).stop().animate((width:50, height:50), 500);
}
};
});

shawy129 Il y a 2 ans - Répondre

Problème de parenthèses dans tes fonctions 'animate'. Ce sont des accolades qu'il faut mettre autour des dimensions. Redis-nous si c'est bon!

Merci pour le tuto !

pato Il y a 2 ans Répondre

j'aurais jamais pensé que c'était si simple de faire cet effet :o

[HS] C'est quoi le raccourci pour la complétion des balises ? [/HS]

oligo Il y a 2 ans Répondre

Bonjour,

Je suis débutant, et ma question peut sembler bête ... mais dans quelle page du site dois-je inscrire ce code ?

coldragon Il y a 2 ans Répondre

Super tutos ^^ Par contre pour l'histoire de pas avoir d'erreur d'animation quand on passe plusieurs fois ces bien ^^ mais faudrait que tu le fasse sur ton site aussi ^^ Quand on est sur un tutoriel, le menu deroumlant avec les autre tutoriel (Graphisme, Developement, autres) Car lorsque que lon passe la souris de droite a gauche rapidement, le bug se fait ^^

zautre Il y a 2 ans Répondre

tu parlais de mettre une image par derrière, mais comment?

juvaro Il y a 2 ans Répondre

sympa! jaysalvat a proposé un code similaire il y a un certain temps

Ludo Il y a 2 ans Répondre

Comme d'habitude super tuto bien expliqué.
C'est vraiment un plus de faire cet effet en javascript, trop de gens utilise la technologie flash n'importe comment et de façon peu approprié. Javascript permet maintenant de faire tellement de chose.
Encore bravo!

Baptiste Il y a 2 ans Répondre

Encore un super tuto

boardingnow Il y a 2 ans Répondre

tres bien je me suis toujours demander commnent c'etait fait
merci

robin850 Il y a 2 ans Répondre

super le tuto !

lelex347 Il y a 2 ans Répondre

Ah un tuto que j'attendais merci grafikart =D

maofiozo Il y a 2 ans Répondre

bonjour, j'adore cette effet et j'avais deja vu le même en plus c'est fou comment c'est super rapide a faire par rapport a la beauté du rendu !
moi je voulais savoir en plus si il est possible de mettre un lien sur l'image dessous est comment ?

maofiozo Il y a 2 ans - Répondre

ma question sur le lien est bete, désoé j'ai fait le tuto j'ai direct vu ma betise c'est un jeux de bébé

Croquelajeunesse Il y a 2 ans Répondre

Super tutoriel, par contre, le stop n'est pas génial, puisqu'il va... stopper l'animation avant qu'elle ne soit terminée si on arrête le survol en plein milieu. Il serait plus judicieux de faire:

$(".page").hover(function(){
$(this).filter(':not(:animated)').animate({ width: "150", height: "150" }, 500);
}, function() {
$(this).animate({ width: "50" }, 500);
});

Un article assez bien expliqué montre tout ça avec des exemples ici -> http://css-tricks.com/full-jquery-animations/

Merci pour ce tutoriel!

Badbart Il y a 2 ans - Répondre

Le comportement de l'animation est très bien avec le stop, justement dans le cas d'une page qui se tourne c'est bien avoir l'animation qui ne va pas jusqu'au bout si on mouseout, ça fait plus "réel".
ps : tu as oublié de remette le height a 50px pour le retour