From 614106538900f653b7ce87967878dca6770f0547 Mon Sep 17 00:00:00 2001 From: kevin tessier Date: Mon, 3 Dec 2018 17:34:40 +0100 Subject: [PATCH] add next --- illustrations/bah_alors.php | 3 ++ illustrations/besoin.php | 4 ++ illustrations/coeur.php | 4 +- illustrations/koala.php | 8 ++++ illustrations/parlons-en.php | 3 ++ illustrations/sumo.php | 8 +++- illustrations/sy_mettre.php | 3 ++ scripts/script.js | 70 +++++++++++++++++++++++++++++++- style/style.css | 79 ++++++++++++++++++++++++------------ svg/fleche.svg | 64 +++++++++++++++++++++++++++++ 10 files changed, 216 insertions(+), 30 deletions(-) create mode 100644 svg/fleche.svg 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 @@
-
@@ -17,6 +16,9 @@
+
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 @@
+ + + +
+ next2 +
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 @@
- -
+ + +

@@ -15,6 +16,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 @@ + + + + + + + + + + image/svg+xml + + + + + + + + +