Effet de transition de page
Bonjour à tous !
Tout premier post sur ce forum... je me lance ;)
Je débute en Javacript, et je rencontre un soucis technique sur lequel je bloque depuis ce matin -_- :
Je suis en train de travailler sur un site dans lequel j'ai ajouté des transitions "slide" entre les pages.
Chacune de ces page est constituée en une <section>, avec un id=#exemple, que j'ai relié à ma navigation et qui me permet de faire arriver ma page par le côté droit.
Jusque là tout va bien, ça fonctionne très bien. Sauf que, j'ai voulu utiliser le même procédé de slide sur plusieurs liens "Lire la suite" qui sont situés en bas de plusieurs petits articles. (et ainsi faire apparaitre l'article complet dans une nouvelle page, qui arriverait également par la droite)
Et l'animation de slide fonctionne sur le premier lien, mais pas sur le second... et je n'arrive pas à comprendre pourquoi.
Voici les extraits de code concernés :
(désolée, en terme de présentation c'est pas dingue... si j'ai loupé une étape pour mieux mettre en forme le code ici, n'hésitez pas à me le dire et je corrigerai)
Code:
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
72
73
74
75
76
77
78
79
80
81
82
83
| <!--Themes-->
<section class="theme section" id="theme">
<div class="container">
<div class="row">
<div class="section-title padd-15">
<h2>Thématiques</h2>
</div>
</div>
<div class="row">
<!--Theme item-->
<div class="theme-item padd-15">
<div class="theme-item-inner shadow-dark">
<div class="theme-img">
<img src="../images/Thematiques/image1.jpg" alt="image1">
</div>
<div class="theme-info">
<h4 class="theme-title">Lorem</h4>
<define class="theme-description">Text(...)</define>
<p><a href="#exemple1" class="active"><i class="fa fa-comments"></i> Lire la suite</a></p>
</div>
</div>
</div>
<!--Fin Theme item-->
<!--Theme item-->
<div class="theme-item padd-15">
<div class="theme-item-inner shadow-dark">
<div class="theme-img">
<img src="../images/Thematiques/image2.png" alt="image2">
</div>
<div class="theme-info">
<h4 class="theme-title">Lorem2</h4>
<define class="theme-description">Text2(...).
</define>
<p><a href="#exemple2"><i class="fa fa-comments"></i> Lire la suite</a></p>
</div>
</div>
</div>
<!--Fin Theme item-->
<!--Article-->
<section class="article" id="exemple1">
<div class="container">
<div class="row">
<div class="section-title padd-15">
<h2>Article 1 </h2>
</div>
</div>
<div class="row">
<p> Test 1</p>
</div>
</div>
</section>
<!--Fin article-->
<!--Article-->
<section class="article" id="exemple2">
<div class="container">
<div class="row">
<div class="section-title padd-15">
<h2>Article 2</h2>
</div>
</div>
<div class="row">
<p> Test 2</p>
</div>
</div>
</section>
<!--Fin article--> |
Code:
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
| const theme=document.querySelector(".theme-info"),
themeLink=theme.querySelectorAll("p"),
totalThemeLink=themeLink.length,
allArticles=document.querySelectorAll(".article"),
totalArticles=allArticles.length;
for(let k=0; k<totalThemeLink; k++){
const a=themeLink[k].querySelector("a");
a.addEventListener("click", function(){
// remove back section class
for(let k=0; k<totalArticles; k++){
allArticles[k].classList.remove("back-article");
}
for(let l=0; l<totalThemeLink; l++){
if(themeLink[l].querySelector("a").classList.contains("active")){
// add back section class
allArticles[l].classList.add("back-article");
}
themeLink[l].querySelector("a").classList.remove("active");
}
this.classList.add("active");
showArticle(this);
if(window.innerWidth < 1200){
asideSectionTogglerBtn();
}
})
}
function showArticle(element){
for(let k=0; k<totalArticles; k++){
allArticles[k].classList.remove("active");
}
const target=element.getAttribute("href").split("#")[1];
document.querySelector("#"+target).classList.add("active")
} |
Code:
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
| .article {
min-height: 100vh;
display: block;
padding: 0 30px;
position: fixed;
width: 100%;
left: 270px;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
overflow: hidden;
overflow-y: auto;
opacity: 1;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.article.back-article{
z-index: 0;
}
.article.active{
opacity: 1;
z-index: 2;
-webkit-animation: slideSection 1s ease;
animation: slideSection 1s ease;
}
@-webkit-keyframes slideSection{
0%{
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100%{
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
} |
J'ai essayé de jouer avec le z-index mais sans succès...
Si quelqu'un a une proposition, je suis vraiment preneuse ! :)
Merci beaucoup !!
