diff --git a/illustrations/bah_alors.php b/illustrations/bah_alors.php
index 4d3c913..47f65e9 100644
--- a/illustrations/bah_alors.php
+++ b/illustrations/bah_alors.php
@@ -18,6 +18,9 @@
+
diff --git a/illustrations/besoin.php b/illustrations/besoin.php
index 87b5c11..603e333 100644
--- a/illustrations/besoin.php
+++ b/illustrations/besoin.php
@@ -125,6 +125,10 @@
+
+
diff --git a/illustrations/coeur.php b/illustrations/coeur.php
index 4546e91..b092ec9 100644
--- a/illustrations/coeur.php
+++ b/illustrations/coeur.php
@@ -1,6 +1,5 @@
diff --git a/illustrations/koala.php b/illustrations/koala.php
index 94f2db7..85a94a4 100644
--- a/illustrations/koala.php
+++ b/illustrations/koala.php
@@ -137,6 +137,14 @@
+
+
+
+
diff --git a/illustrations/parlons-en.php b/illustrations/parlons-en.php
index 731f505..4837c76 100644
--- a/illustrations/parlons-en.php
+++ b/illustrations/parlons-en.php
@@ -14,5 +14,8 @@
lien fiche action
+
diff --git a/illustrations/sumo.php b/illustrations/sumo.php
index cc47773..e0fe8fd 100644
--- a/illustrations/sumo.php
+++ b/illustrations/sumo.php
@@ -3,8 +3,9 @@
diff --git a/illustrations/sy_mettre.php b/illustrations/sy_mettre.php
index 7957855..6ef9e43 100644
--- a/illustrations/sy_mettre.php
+++ b/illustrations/sy_mettre.php
@@ -11,6 +11,9 @@
+
diff --git a/scripts/script.js b/scripts/script.js
index f5eefaa..863e561 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -26,7 +26,6 @@ document.documentElement.addEventListener('touchstart', function (event) {
event.preventDefault();
}
}, false);
-// Mettre le site en responsive répurerer les valeurs de position en %
// array
array_Sw = [];
@@ -84,9 +83,13 @@ function scrollto() {
array_Y = [];
array_N = [];
+ array_Nxt = [];
+ array_Nxt2 = [];
var $y = $("section > div #y")
var $n = $("section > div #n")
+ var $nxt = $("section > div #next")
+ var $nxt2 = $("section > div #next2")
for (var i = 0; i < $y.length; i++) {
var Sy = $y[i]
@@ -98,15 +101,27 @@ function scrollto() {
array_N.push(Sn);
}
+ for (var i = 0; i < $nxt.length; i++) {
+ var Snxt = $nxt[i]
+ array_Nxt.push(Snxt);
+ }
+
+ for (var i = 0; i < $nxt2.length; i++) {
+ var Snxt2 = $nxt2[i]
+ array_Nxt2.push(Snxt2);
+ }
+
+
console.log("array_Y", array_Y);
console.log("array_N", array_N);
+ console.log("array_Nxt", array_Nxt);
+ console.log("array_Nxt2", array_Nxt2);
// Click yes
$(array_Y[0]).click(function(){
var x = array_Sx[1] - ((Fw/2) - (array_Sw[1]/2));
var y = array_Sy[1] - ((Fh/2) - (array_Sh[1]/2));
$(window).scrollTo({top:y, left:x },800);
- console.log('cc');
});
$(array_Y[1]).click(function(){
@@ -212,6 +227,57 @@ function scrollto() {
$(window).scrollTo({top:y1, left:x1}, 800);
});
+
+ // click next
+ $(array_Nxt[0]).click(function(){
+ var x = array_Sx[4] - ((Fw/2) - (array_Sw[4]/2));
+ var y = array_Sy[4] - ((Fh/2) - (array_Sh[4]/2));
+ $(window).scrollTo({top:y, left:x },800);
+ });
+
+ $(array_Nxt[1]).click(function(){
+ var x = array_Sx[4] - ((Fw/2) - (array_Sw[4]/2));
+ var y = array_Sy[4] - ((Fh/2) - (array_Sh[4]/2));
+ $(window).scrollTo({top:y, left:x },800);
+ });
+
+ $(array_Nxt[2]).click(function(){
+ var x = array_Sx[4] - ((Fw/2) - (array_Sw[4]/2));
+ var y = array_Sy[4] - ((Fh/2) - (array_Sh[4]/2));
+ $(window).scrollTo({top:y, left:x },800);
+ });
+
+ $(array_Nxt[3]).click(function(){
+ var x = array_Sx[16] - ((Fw/2) - (array_Sw[16]/2));
+ var y = array_Sy[16] - ((Fh/2) - (array_Sh[16]/2));
+ $(window).scrollTo({top:y, left:x },800);
+ });
+
+ $(array_Nxt[4]).click(function(){
+ var x = array_Sx[10] - ((Fw/2) - (array_Sw[10]/2));
+ var y = array_Sy[10] - ((Fh/2) - (array_Sh[10]/2));
+ $(window).scrollTo({top:y, left:x },800);
+ });
+
+ $(array_Nxt[5]).click(function(){
+ var x = array_Sx[12] - ((Fw/2) - (array_Sw[12]/2));
+ var y = array_Sy[12] - ((Fh/2) - (array_Sh[12]/2));
+ $(window).scrollTo({top:y, left:x },800);
+ });
+
+ $(array_Nxt[6]).click(function(){
+ var x = array_Sx[15] - ((Fw/2) - (array_Sw[15]/2));
+ var y = array_Sy[15] - ((Fh/2) - (array_Sh[15]/2));
+ $(window).scrollTo({top:y, left:x },800);
+ });
+
+ // click next2
+ $(array_Nxt2[0]).click(function(){
+ var x = array_Sx[11] - ((Fw/2) - (array_Sw[11]/2));
+ var y = array_Sy[11] - ((Fh/2) - (array_Sh[11]/2));
+ $(window).scrollTo({top:y, left:x },800);
+ });
+
}
jQuery(document).ready(function($) {
diff --git a/style/style.css b/style/style.css
index 4b2b37b..8c33872 100644
--- a/style/style.css
+++ b/style/style.css
@@ -13,24 +13,6 @@ body{
/* margin-left: 200px; */
}
-/* start */
-/* @-webkit-keyframes dash {
- from {
- stroke-dashoffset: 3000;
- }
- to {
- stroke-dashoffset: 0;
- }
-}
-@keyframes dash {
- from {
- stroke-dashoffset: 3000;
- }
- to {
- stroke-dashoffset: 0;
- }
-} */
-
p, a{
font-size: 18px;
line-height: 26px;
@@ -72,6 +54,17 @@ h4{
cursor: pointer;
}
+#next, #next2{
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ z-index: 999;
+}
+
+#next img, #next2 img{
+ margin-left: 10px;
+}
+
#y p, #n p{
font-size: 30px;
margin: auto;
@@ -137,13 +130,6 @@ section{
left: 715px;
}
-/* #start #y:hover ~ .tracer-y path{
- stroke-dasharray: 3000;
- stroke-dashoffset: 0;
- -webkit-animation: dash 5s linear;
- animation: dash 5s linear;
-} */
-
/* ////////angoisses//////// */
#angoisses{
top: 3810px;
@@ -183,6 +169,12 @@ section{
left: 240px;
}
+#coeur #next{
+ top: -100px;
+ left: 330px;
+ transform: rotate(-70deg);
+}
+
/* ////////summo//////// */
#sumo{
top: 4200px;
@@ -195,6 +187,11 @@ section{
left: 200px;
}
+#sumo #next{
+ top: -40px;
+ left: 270px;
+ transform: rotate(-70deg);
+}
/* ////////voyance//////// */
#voyance{
top: 2630px;
@@ -246,6 +243,11 @@ section{
margin-left: -10px;
}
+#parlons_en #next{
+ top: 250px;
+ left: -100px;
+ transform: rotate(200deg);
+}
/* ////////ampoule//////// */
#ampoule{
top: 1908px;
@@ -305,6 +307,11 @@ section{
left: -1350px;
}
+#besoin #next{
+ top: 120px;
+ left: -120px;
+ transform: rotate(160deg);
+}
/* ////////genie//////// */
#genie{
top: 248px;
@@ -402,6 +409,11 @@ section{
left: -290px;
}
+#bah_alors #next{
+ top: 450px;
+ left: 620px;
+ transform: rotate(120deg);
+}
/* ////////et_maintenant//////// */
#et_maintenant{
top: 1450px;
@@ -495,6 +507,18 @@ section{
left: -1680px;
}
+#koala #next{
+ top: 270px;
+ left: -130px;
+ transform: rotate(140deg);
+}
+
+#koala #next2{
+ position: absolute;
+ top: 400px;
+ left: 340px;
+ transform: rotate(70deg);
+}
/* ////////chevalier//////// */
#chevalier{
top: 2410px;
@@ -542,6 +566,11 @@ section{
margin-top: 55px;
}
+#sy_mettre #next{
+ left: 130px;
+ top: 240px;
+}
+
/* ////////etoile//////// */
#etoile{
top: 3920px;
diff --git a/svg/fleche.svg b/svg/fleche.svg
new file mode 100644
index 0000000..17832d6
--- /dev/null
+++ b/svg/fleche.svg
@@ -0,0 +1,64 @@
+
+
+
+
+