add next

illustrations/bah_alors.php

@@ -18,6 +18,9 @@
         <div class="tracer-y">
           <svg xmlns="http://www.w3.org/2000/svg" width="884.747" height="682.4" viewBox="0 0 234.089 180.552"><path d="M233.378.33c-34.296 74.402-70.181 148.203-224.07 177.354" fill="none" stroke="#2a3692" stroke-width="1.58751"/><path d="M11.12 180.55l-1.035-6.222-10.077 5.047z" fill="#2a3692" fill-rule="evenodd"/></svg>
         </div>
+        <div class="buttons" id="next">
+          <img src="/svg/fleche.svg" alt="next">
+        </div>
       </div>
     </div>
   </div>

illustrations/coeur.php

@@ -1,6 +1,5 @@
 <div id="coeur" class="section">
 
-
 <div class="block">
 
   <div  class="illu">
@@ -17,6 +16,9 @@
     </div>
     <div class="tracer-y">
     </div>
+    <div class="buttons" id="next">
+      <img src="/svg/fleche.svg" alt="next">
+    </div>
   </div>
 </div>
 </div>

illustrations/koala.php

@@ -137,6 +137,14 @@
     </div>
     <div class="tracer-y">
     </div>
+
+    <div class="buttons" id="next">
+      <img src="/svg/fleche.svg" alt="next">
+    </div>
+
+    <div class="buttons" id="next2">
+      <img src="/svg/fleche.svg" alt="next2">
+    </div>
   </div>
 
 </div>

illustrations/parlons-en.php

@@ -14,5 +14,8 @@
     <a href="https://www.sgdf.fr/vos-ressources/doc-en-stock/category/298-saturation?download=2202:fiche-action-conseil-territorial" target="_blank">lien fiche action</a>
     </p>
   </div>
+  <div class="buttons" id="next">
+    <img src="/svg/fleche.svg" alt="next">
+  </div>
 </div>
 </div>

illustrations/sy_mettre.php

@@ -11,6 +11,9 @@
         </div>
         <div class="tracer-y">
         </div>
+        <div class="buttons" id="next">
+          <img src="/svg/fleche.svg" alt="next">
+        </div>
       </div>
     </div>
   </div>

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($) {

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;

svg/fleche.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="34.948002"
+   height="63.652"
+   viewBox="0 0 9.2466586 16.841259"
+   version="1.1"
+   id="svg2045"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="fleche.svg">
+  <defs
+     id="defs2039" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.9195959"
+     inkscape:cx="46.810794"
+     inkscape:cy="22.583733"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1006"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata2042">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-280.15872)">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.58749998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 0.8018132,280.96058 7.651118,7.56242 -7.6479516,7.67522"
+       id="path2013"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+  </g>
+</svg>