modification etienne

hpCamille.html

@@ -20,19 +20,15 @@
 
         <div class="noScroll">
 
-            <div class="objectCamille">
+            <a href="0manifesto.html" class="objectCamille">
-                <a href="0manifesto.html">
+                <img src="ImgWholeEarthCatalog.png" />
-                <img src="ImgWholeEarthCatalog.png" class="icon"/>
+                <img src="someThoughtsBlanc.png" />
-                <img src="someThoughtsBlanc.png" class="hover"/>
+            </a>
-                </a>
-            </div>
 
-            <div class="objectCamille">
+            <a href="1beantobar.html" class="objectCamille">
-                <a href="1beantobar.html">
+                <img src="ImgChocolatePlanetBig.png" />
-                <img src="ImgChocolatePlanetBig.png" class="icon"/>
+                <img src="ImgFrombeantobarBlanc.png" />
-                <img src="ImgFrombeantobarBlanc.png" class="hover"/>
+            </a>
-                </a>
-            </div>
 
         </div>
 

js/application.js

@@ -45,9 +45,25 @@ $(document).ready(function(){
         $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
     });
 
+    function positionFloating(id){
+        $(id).css({"top": nombre(70) + "%", "left": nombre(70) + "%"}); 
+    }
+
+    function floating(id){
+        setTimeout(function(){
+            positionFloating(id);
+        }, 10);
+        setInterval(function(){
+            positionFloating(id);
+        }, 10000);
+        
+    }
+
     $(".objectCamille").each(function(){
-        $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
+        floating($(this));
-    });
+    }); 
+
+
 
     $("#trigger").each(function(){
         $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
@@ -60,17 +76,13 @@ $(document).ready(function(){
         $(".landingPage").fadeOut(600);
     })
 
-    // var poseX= 20;
-    // var poseY= 50;
 
-    // function floating(){
+    $(".objectCamille").each(function(){
-    //     poseX= poseX + 1;
+        $(this).css({"top": nombre(70) + "%", "left": nombre(70) + "%"}); 
-    //     poseY= poseY + 1;
+    });
-    //     $("#trigger").css({"top": poseX + "%", "left": poseY + "%"});
+
-    //     console.log(poseX + "/" + poseY)
+
-    // }
 
-    // setInterval(floating, 30)
 
     $(".LienEpisode1").on("click",function(){
 

styles.css

@@ -271,28 +271,28 @@ body {
 }
 
 .object:nth-child(1) {
-  left: 89%;
+  left: 33%;
-  top: 72%;
+  top: 39%;
 }
 
 .object:nth-child(2) {
-  left: 44%;
+  left: 11%;
-  top: 75%;
+  top: 58%;
 }
 
 .object:nth-child(3) {
-  left: 36%;
+  left: 5%;
-  top: 76%;
+  top: 57%;
 }
 
 .object:nth-child(4) {
-  left: 68%;
+  left: 76%;
-  top: 82%;
+  top: 63%;
 }
 
 .object:nth-child(5) {
-  left: 24%;
+  left: 77%;
-  top: 20%;
+  top: 17%;
 }
 
 .netherlands {
@@ -465,7 +465,10 @@ body {
   right: 30vw;
 }
 
-.landingPageJuli .ImgEpisode1 .closeButton {
+.landingPageJuli .closeButton {
+  position: absolute;
+  top: 0;
+  right: 0;
   background: black;
   color: white;
   display: inline-block;
@@ -475,11 +478,9 @@ body {
   border-color: white;
   padding: 0.3vw 0.6vw 0.3vw 0.6vw;
   cursor: pointer;
-  top: 2px;
-  right: 2px;
 }
 
-.landingPageJuli .ImgEpisode1 .closeButton:hover {
+.landingPageJuli .closeButton:hover {
   background: white;
   color: black;
   border-color: white;
@@ -505,52 +506,59 @@ body {
   left: 20vw;
 }
 
-.landingPageJuli .ImgEpisode2 .closeButton {
-  background: black;
-  color: white;
-  display: inline-block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1vw;
-  border-color: white;
-  padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-  cursor: pointer;
-  top: 2px;
-  right: 2px;
-}
-
-.landingPageJuli .ImgEpisode2 .closeButton:hover {
-  background: white;
-  color: black;
-  border-color: white;
-}
-
 .objectCamille {
-  position: relative;
+  position: absolute;
-  width: 25vw;
+  display: block;
-  height: 150px;
   color: white;
   text-align: center;
+  height: 10vw;
+  -webkit-transition: top 10s linear, left 10s linear;
+  transition: top 10s linear, left 10s linear;
+}
+
+.objectCamille:nth-child(1) {
+  height: 14vw;
+}
+
+.objectCamille:nth-child(2) {
+  height: 10vw;
+}
+
+.objectCamille:nth-child(3) {
+  height: 14vw;
+}
+
+.objectCamille:nth-child(4) {
+  height: 10vw;
+}
+
+.objectCamille:nth-child(5) {
+  height: 14vw;
+}
+
+.objectCamille:nth-child(6) {
+  height: 10vw;
 }
 
 .objectCamille img {
-  width: 100%;
+  height: 100%;
-  position: absolute;
+  display: none;
+}
+
+.objectCamille img:first-child {
+  display: block;
 }
 
 .objectCamille .hover {
-  opacity: 0;
+  display: block;
 }
 
-.objectCamille:hover .hover {
+.objectCamille:hover img:first-child {
-  opacity: 1;
+  display: none;
 }
 
-.objectCamille a {
+.objectCamille:hover img:last-child {
-  position: absolute;
+  display: block;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
 }
 
 .bodyManifestoPage {

styles.scss

@@ -475,28 +475,28 @@ body{
         top: 20vw;
         right: 30vw;
 
-            .closeButton {
+    }
-                // position: absolute;
-                // margin: 3px;
-                background: rgb(0, 0, 0);
-                color: rgb(255, 255, 255);
-                display: inline-block;
-                border-width: 1px;
-                border-style: solid;
-                border-radius: 1vw;
-                border-color: white;
-                padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-                cursor: pointer;
-                top: 2px;
-                right: 2px;
 
-                &:hover {
+    .closeButton {
-                    background: white;
+        position: absolute;
-                    color: rgb(0, 0, 0);
+        top: 0;
-                    border-color: white;
+        right: 0;
-                }
+        // margin: 3px;
+        background: rgb(0, 0, 0);
+        color: rgb(255, 255, 255);
+        display: inline-block;
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 1vw;
+        border-color: white;
+        padding: 0.3vw 0.6vw 0.3vw 0.6vw;
+        cursor: pointer;
 
-            }
+        &:hover {
+            background: white;
+            color: rgb(0, 0, 0);
+            border-color: white;
+        }
     }
 
     .LienEpisode2 {
@@ -518,69 +518,56 @@ body{
         top: 30vw;
         left: 20vw;
 
-            .closeButton {
-                // position: absolute;
-                // margin: 3px;
-                background: rgb(0, 0, 0);
-                color: rgb(255, 255, 255);
-                display: inline-block;
-                border-width: 1px;
-                border-style: solid;
-                border-radius: 1vw;
-                border-color: white;
-                padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-                cursor: pointer;
-                top: 2px;
-                right: 2px;
-
-                &:hover {
-                    background: white;
-                    color: rgb(0, 0, 0);
-                    border-color: white;
-                }
-
             }
-    }
 }
 
 .objectCamille {
-    position: absolute
+    position: absolute;
-    // width: 25vw;
+    display: block;
-    // height: 150px;
     color: white;
     text-align: center;
+    height: 10vw;
+
+    transition: top 10s linear, left 10s linear;
+
+    &:nth-child(1){
+        height: 14vw;
+    }
+    &:nth-child(2){
+        height: 10vw;
+    }
+    &:nth-child(3){
+        height: 14vw;
+    }
+    &:nth-child(4){
+        height: 10vw;
+    }
+    &:nth-child(5){
+        height: 14vw;
+    }
+    &:nth-child(6){
+        height: 10vw;
+    }
 
     img{            
-        height: 150px;
-        position: absolute;
-    }
-
-    .hover {
-        opacity: 0;
-        // position: absolute;
-    }
-
-    &:hover .hover{
-        opacity: 1;
-    }
-
-    a {
-        position: absolute;
-        width: 100%;
         height: 100%;
-        cursor: pointer;
+        display: none;
+    }
+    img:first-child{
+        display: block;
+    }
+    .hover {
+       display: block;
+    }
+    &:hover img:first-child{
+        display: none;
+    }
+    &:hover img:last-child{
+        display: block;
     }
-
-    // #beantobar{
-    //     width: 30vw;
-    // }
-
-    // #somethoughts{
-    //     width: 25vw;
-    // }
-
 }
 
+
 // pages thoughts
 
 .bodyManifestoPage{