Comment ralentir l'appel à une ancre ?

**dhillig** · 11/11/2014, 16h29

Bonjour,
Comment ralentir l'appel à une ancre ? Je m'explique : si je clique dans ma page sur un bouton faisant appel à une ancre, le changement est immédiat, donc violent (dans mon cas, je passe d'une image plein pot à une page texte).
J'ai vu sur certains sites qu'en appuyant sur un bouton, la page défilait verticalement pour aller là où se trouve l'ancre. Le contenu ancré n'apparait qu'au bout d'1 ou 2 secondes !
Pour le coup, l'oeil n'est pas agressé par un changement visuel brutal.
Quelqu'un aurait-il une idée ?
Merci pour votre aide.
dhillig

**ryan** · 11/11/2014, 16h41

Yop!

Ce n'est probablement pas une ancre, mais un bout de javascript, et il y a des chances que ce soit la fonction "animate" de Jquery qui se charge du taf.

**dhillig** · 11/11/2014, 17h51

Rhâââ !!! Bordel !!!

Merci pour ta réponse (que je craignais) Ryan

Puis-je en savoir plus ? Un lien ou un code ? Je débute en Jquery que j'ai du mal gérer. Ma page fait déjà appel à un jquery et dans mes exercices (car je ne peux pas encore parler de site), j'ai constaté quelques conflits si on fait appel à plusieurs Jquery (une question de version ????). En attendant, je vais chercher cette fonction "animate" sur le net au cas où...
Merci et bonne fin de journée.
dhillig

**ryan** · 12/11/2014, 10h54

Yop!

Jquery, c'est pas si compliqué que ça...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script> 
$().ready(function(){
 
	$("#slide").click(function(){
		$("#conteneur").animate({top: "-" + $("#photo").outerHeight( true ) + "px" });
	});
 
	$("#slideback").click(function(){
		$("#conteneur").animate({top: "0px"});
	});	
});
</script> 
</head>
 
<body>
 
<div id='conteneur' style="width:100%;position:absolute;">
 
	<div id='photo' style='background-color: #ff0000; height: 500px;'>
		<a href='#' id='slide'>Slide me</a><br/><br/>
		PHOTO
	</div>
 
	<div id='texte' style='background-color: #ebebeb; height: 500px;'>
		<a href='#' id='slideback'>Slide me back</a><br/><br/>
		TEXTE
	</div>
 
</div>
 
</body>
</html>

Donc, un conteneur qui englobe toute la page, une anchor pour scroller de la hauteur de la div PHOTO et une autre anchor pour remonter.
A ne pas oublier: le conteneur doit absolument être en "position:absolute", sinon, ça ne marche pas.

**dhillig** · 14/11/2014, 22h03

Bonsoir à tous,
Merci Ryan pour ce code qui fonctionne à merveille

, mais malheureusement, après plusieurs tentatives, impossible de mettre "ma" page en position absolute

C'est une page que j'ai pas mal trafiquotée

dont voici le lien :
http://tympanus.net/codrops/2012/01/...show-with-css3
J'ai eu beau tenté de changer les CSS, la <div> fenetre (ce que je nommais "texte" dans mon message) vient empiéter dans le diaporama (et la <div> logo est ce que je nommais "photo").
Voici le body :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body id="page">
<ul class="cb-slideshow">
  <li><span>Image 01</span></li>
            <li><span>Image 02</span></li>
            <li><span>Image 03</span></li>
            <li><span>Image 04</span></li>
            <li><span>Image 05</span></li>
            <li><span>Image 06</span></li>
    </ul>
<div id="logo"><a href="#fenetre"id='slide'><img src="img/lddc_deux.jpg"  alt="" class="logo"/></a><br/><br/></div>
<div id="fenetre"><ul>
  <li><a name="fenetre"></a><a href="../LDDC/Sanstitre-23.html" class="button">Bolo</a> <a href="../LDDC/Sanstitre-19.html" class="button">texte</a></li>
</ul></div>
</body>

Y'a t'il possibilité d'adapter le script "animate" ?
Encore merci et bon week-end !
dhillig

**ryan** · 15/11/2014, 01h17

Attends, je ne suis pas certain de comprendre...

Si je crois ce que je vois dans le code de ton dernier message, tu aurais donc 6 images contenues dans ta page, les images seraient accessibles par un clic sur les 6 éléments de ta liste, et tu voudrais que ça scrolle vers l'image sélectionnée, au lieu d'y sauter hop sans transition?

Ou bien je bats la campagne en broutant les verts pâturages de l'erreur?

**dhillig** · 15/11/2014, 14h54

Slt Ryan,
Le diaporama (full screen) est composé de 6 images non cliquables. Au centre de ce diaporama se trouve la <div>logo positionnée en relative et cliquable.
Lorsque l'on clique dessus, on accède à l'ancre de la <div>fenêtre qui elle est positionnée en absolute (top:100%).
On peut aussi passer du diaporama à la div fenêtre uniquement avec la molette de la souris.
Petit rappel pour ne pas se mélanger les pinceaux, sur mon premier message :
image = div logo
texte = div fenetre
Comment ralentir l'accès au lien texte en cliquant sur une image =
Comment ralentir l'accès au lien (div) fenetre en cliquant sur la div logo
Tu m'as bien expliqué que pour que ton script fonctionne, il fallait que je sois en position absolute. Malheureusement, dans ma page, je suis obligé de multiplier les positions (absolute, relative...).
Voilà, en espérant avoir été clair

Bon week-end,
dhillig

**ryan** · 15/11/2014, 17h15

Yop!

Voilà le code javascript appliqué à la structure de ta page.

J'ai juste ajouté la div "conteneur", qui comme son nom l'indique, contient tout ce qui est affiché dans la page.
C'est cette div qui monte, faisant ainsi monter tout le contenu de la page, ce qui donne l'illusion qu'on scrolle vers le bas.
Le conteneur doit être en "position:absolute;".

Attention, dans la div avec l'ID logo, le href du lien ne doit contenir que #

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE HTML>
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script> 
        $().ready(function(){
                
                // fait monter le conteneur du nombre de pixels égal à la hauteur de la div logo, en 1000 millisecondes
                
                $("#slide").click(function(){
                        $("#conteneur").animate({top: "-" + $("#logo").outerHeight( true ) + "px" },1000);
                });
         
                // fait redescendre le conteneur à sa position initiale, en 1000 millisecondes
                
                $("#slideback").click(function(){
                        $("#conteneur").animate({top: "0px"},1000);
                });     
        });
        </script> 	
</head>
<body id="page">
 
	<div id='conteneur' style='position:absolute;'>
 
		<ul class="cb-slideshow">
			<li><span>Image 01</span></li>
			<li><span>Image 02</span></li>
			<li><span>Image 03</span></li>
			<li><span>Image 04</span></li>
			<li><span>Image 05</span></li>
			<li><span>Image 06</span></li>
		</ul>
 
		<div id="logo">
			<a href="#" id='slide'><img src="img/lddc_deux.jpg" alt="le_logo" class="logo"/></a>
			<br/><br/>
		</div>
 
		<div id="fenetre">
			<ul>
				<li><a name="fenetre"></a><a href="../LDDC/Sanstitre-23.html" class="button">Bolo</a> <a href="../LDDC/Sanstitre-19.html" class="button">texte</a></li>
			</ul>
		</div>
 
	</div><!-- fin conteneur -->
 
</body> 
</html>

**dhillig** · 15/11/2014, 18h48

Merci Ryan,
Je vais tester ce soir ou demain. Mais pour info, le créateur du diaporama (non, ce n'est pas moi

a nommé son "container" #page, et non #container ou #main.
J'ai tenté de changer les attributs de #page (position:absolute), ça a tout fait foirer (ce dont je te parlais hier, ma div "fenetre" qui empiète sur le diaporama). Comme je suis malin, j'ai créer un #container (position:absolute) et mis l'ensemble du body à l'intérieur. Même résultat. Je suis plus singe que malin

Cela n'a rien à voir avec ta réponse, mais une fois encore, c'était pour info.
J'ai hâte de tester ta solution, on ne dit jamais assez merci alors MERCi

dhillig

**dhillig** · 16/11/2014, 19h19

Slt Ryan
Désolé pour cette réponse tardive. J'ai tenté bcp de choses, rien n'y fait, ça ne fonctionne pas dans ma page.
Pour que ton aide ne reste pas vaine, je recommence tout à 0 avec ce foutu diaporama

Je te tiens au courant.
Bonne soirée.
dhillig

**dhillig** · 17/11/2014, 23h00

Stt Ryan,
J'ai abandonné le test avec le diaporama. Après avoir tout repris à 0, impossible de mettre une position absolute sans que cela déclenche de gros problèmes de mise en page (problème que je pense irrésoluble tant j'ai tenté de changer les CSS etc… du diapo).
Alors, nouveau test avec une image à la place du diapo.
Dans la div "conteneur", la div cover (à la place du diapo) puis encore la div logo et la div fenetre (le tout en position absolute).
Avec le dernier code, un ralenti de la div cover après avoir cliqué sur la div logo, mais qui monte uniquement de qq %, et la div fenêtre ne suit pas (elle reste invisible).
Comme mon code est très succinct, je te l'envoie en entier.
J'ai aussi testé ton code de base, qui fonctionne très bien, mais impossible de lui appliquer ce que je désire : une balise fullscreen, ou un fond d'écran fulscreen via le body.
Ce qui me pause des prob : c'est la position top:100% la position de la balise qui suit celle du diaparama (de la photo, pardon), la balise qui doit rester cachée avant le cliq sur le logo. Elle fonctionnait très bien avant. Avec tes codes, impossible de la mettre a top:100% As-tu une idée Ryan ?
Bonne soirée,
dhillig

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script> 
	$().ready(function(){
*
		// fait monter le conteneur du nombre de pixels égal à la hauteur de la div logo, en 1000 millisecondes
*
		$("#slide").click(function(){
			$("#conteneur").animate({top: "-" + $("#logo").outerHeight( true ) + "px" },1000);
		});
*
		// fait redescendre le conteneur à sa position initiale, en 1000 millisecondes
*
		$("#slideback").click(function(){
			$("#conteneur").animate({top: "0px"},1000);
		});	
	});
	</script> 
<style type="text/css">
#conteneur {
	width: 100%;
	height: auto;
	position: absolute;
}
#cover {
	position: absolute;
}
.cover {
	width: 100%;
}
.logo {
	position: absolute;
	top: 10%;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
#logo {
	position: absolute;
	background-color: #CC0000;
	width: 100%;
	height: 80px;
	text-align: center;
}
#fenetre {
	position: absolute;
	width: 100%;
	height: 800px;
	background-color: #CC3333;
	margin-top: 100%;
}
</style>
</head>
 
<body>
<div id="conteneur"><img src="img/lddc_deux.jpg"  alt="" class="cover"/></div>
		<div id="logo">
			<a href="#" id='slide'><img src="img/lddc_deux.jpg" alt="le_logo" class="logo"/></a>
			<br/><br/>
        <div id="fenetre">
			<li><a name="fenetre"></a></a></li></div>
		</div>
</body>
</html>

**ryan** · 18/11/2014, 01h50

Yop!

Houu, c'est du code qui pique aux yeux que tu nous a envoyé là

....Evite de donner des ID's et des classes qui ont le même nom, ça n'aide pas à y voir clair.

Si j'ai bien compris ce que tu cherches à faire:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script> 
        $().ready(function(){
 
                // fait monter le conteneur du nombre de pixels égal à la hauteur de la div logo, en 1000 millisecondes
 
                $("#slide").click(function(){
                        $("#conteneur").animate({top: "-" + $("#logo").outerHeight( true ) + "px" },1000);
                });
 
                // fait redescendre le conteneur à sa position initiale, en 1000 millisecondes
 
                $("#slideback").click(function(){
                        $("#conteneur").animate({top: "0px"},1000);
                });     
        });
        </script> 
<style type="text/css">
body{
        margin: 0;
        padding: 0;
        overflow: hidden;
}
 
#conteneur {
        width: 100%;
        position: absolute;
}
 
.cover{
        height: 100%;
        width: 100%
}
 
</style>
</head>
<body>
<div id="conteneur">
 
	<div id="logo">
		<a href="#" id='slide'>clic to slide</a>
		<br/>
		<img class='cover' src='http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/1.jpg' alt='' />
	</div>
 
	<div>
		FENETRE AVEC DU TEXTE
	</div>
 
</div>
</body>
</html>

Tu peux évidemment remplacer les mots "clic to slide" par une image.

**dhillig** · 18/11/2014, 22h44

Slt Ryan,
"Evite de donner des ID's et des classes qui ont le même nom, ça n'aide pas à y voir clair"
J'ai vu cela sur plusieurs sites, je pensais que c'était une règle à respecter; mais tu as raison, ça n'aide pas. Chose comprise

Alors mauvaise nouvelle, plus le temps avance, plus ma page test "recule" (mais plus j'apprends

Aujourd'hui, plus aucune intéractivité sur ma page, plus de ralenti, plus rien (et j'en passe du temps sur dreamweaver_et le code_ avant de répondre sur le forum)...
J'en suis à ma 16e page d'exercice (sur le ralenti). J'en ai jamais autant ch...

Alors j'en suis venu à ta première réponse dont le code était parfait si appliqué comme tel, mais résultat 0 avec div diaporama, idem avec div cover par la suite (enfin, ce que j'ai testé). Alors j'ai retenté l'expérience (avec ton premier code) avec une image de fond sur le body, une div logo et une seconde div texte... pas si mal

Mais deux probs (uniquement

- en cliquant sur les liens (descendre et remonter), le body (image de fond) bouge ! (je n'ai jamais vu ça

)
- un prob que je n'arrive pas à résoudre depuis le début, impossible de caler la div texte à 100% de la hauteur afin qu'elle reste invisible. J'ai testé x fois les positions. IMPOSSIBLE ! J'ai réellement l'impression que cela oblige une div après le conteneur.
Cela semble illogique niveau code et ce fameux "main/conteneur", mais niveau compréhension du novice, c'est comme une page qui suit une autre page. On y accède avec la molette de la souris, et pas besoin d'ancre, un #de la div et ça fonctionne très bien. Reste le problème de ralenti...
Le code actuel de la nouvelle page test :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$().ready(function(){
 
	$("#slide").click(function(){
		$("#conteneur").animate({top: "-" + $("#logo").outerHeight( true ) + "px" });
	});
 
	$("#slideback").click(function(){
		$("#conteneur").animate({top: "0px"});
	});	
});
</script>
<style type="text/css">
#texte {
	position: absolute;
	width: 100%;
	height: 800px;
	background-color: #CC9900;
	top: 100%;
}
.logo {
	margin-left: 0px;
	margin-right: 0px;
	left: 0px;
	right: 0px;
	position: absolute;
	top: 10px;
}
body {
	background-repeat: no-repeat;
	background-image: url(img/bg.jpg);
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
#conteneur {
	width: 100%;
	height: auto;
	position: absolute;
}
</style>
</head>
 
<body>
 
<div id='conteneur' style="width:100%;position:absolute;">
  <div id='logo' style='height: 500px;'>
	  <a href='#' id='slide'><img src="img/lddc_deux.jpg"  alt="" width="400" height="200" class="logo"/></a><br/><br/>
  </div>
 
  <div id='texte' style='background-color: height: 500px;'>
		<a href='#' id='slideback'>Slide me back</a><br/><br/>
		TEXTE
	</div>
 
</div>
 
</body>
</html>

Bonne soirée et merci,
dhillig
(vain diou, je crains la prochaine discussion qe je vais ouvrir sur le forum après avoir cloturé celle-ci

**dhillig** · 20/11/2014, 22h30

Avec tout ce que m'a passé Ryan, je pense pouvoir m'en sortir avec un peu de travail. THX Ryan !!!

Bonne soirée,
dhillig

Comment ralentir l'appel à une ancre ?

CSS

Discussions similaires

Partager

Partager