event addClass when in view fonctionne mais animation non

user/themes/epau-antimatter/css-compiled/template.css

@@ -52,7 +52,7 @@ b, strong, label, th {
 .right {
   float: right; }
 
-.default-animation, #body, #header, #header #logo h3, #header #navbar ul.navigation, .modular .showcase .button {
+.default-animation, #body, #header, #header #logo h3, #header #navbar ul.navigation, #logo.active a:after, .modular .showcase .button {
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease; }
@@ -156,23 +156,6 @@ b, strong, label, th {
             display: inline-block;
             padding: 0.3rem 0.8rem;
             -webkit-backface-visibility: hidden; }
-            #header #navbar ul.navigation li a:before, #header #navbar ul.navigation li a:after {
-              content: "";
-              position: absolute;
-              width: 100%;
-              height: 1px;
-              bottom: 0;
-              left: 0;
-              background-color: #000;
-              visibility: hidden;
-              -webkit-transform: scaleX(0);
-              -moz-transform: scaleX(0);
-              -ms-transform: scaleX(0);
-              -o-transform: scaleX(0);
-              transform: scaleX(0);
-              -webkit-transition: all 0.2s ease;
-              -moz-transition: all 0.2s ease;
-              transition: all 0.2s ease; }
             #header #navbar ul.navigation li a:hover:before {
               visibility: visible;
               -webkit-transform: scaleX(0.75);
@@ -528,8 +511,7 @@ td {
 .button {
   background: #fff;
   color: #000;
-  border: 1px solid #000;
-  border-radius: 3px; }
+  border: 1px solid #000; }
   .button:hover {
     background: #000;
     color: #fff; }
@@ -539,8 +521,7 @@ td {
 .button-secondary {
   background: #fff;
   color: #F6635E;
-  border: 1px solid #F6635E;
-  border-radius: 3px; }
+  border: 1px solid #F6635E; }
   .button-secondary:hover {
     background: #F6635E;
     color: #fff; }
@@ -813,6 +794,9 @@ ul.pagination {
 .grav-lightslider .lSSlideOuter .lSPager.lSpg > li a {
   z-index: 1; }
 
+.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
+  padding-left: 3rem; }
+
 #body > script:first-child + .grav-lightslider {
   margin-top: -3rem; }
 
@@ -849,14 +833,28 @@ ul.pagination {
   font-weight: 900; }
 
 #logo {
+  position: relative;
   display: flex;
-  flex-direction: row; }
+  flex-direction: row;
+  -webkit-transform: scale(0.75);
+  -moz-transform: scale(0.75);
+  -ms-transform: scale(0.75);
+  -o-transform: scale(0.75);
+  transform: scale(0.75); }
+  #logo.active a:after {
+    top: 0;
+    visibility: visible;
+    -webkit-transform: scale(0.75);
+    -moz-transform: scale(0.75);
+    -ms-transform: scale(0.75);
+    -o-transform: scale(0.75);
+    transform: scale(0.75); }
   #logo img {
     padding: 0.5rem;
     max-height: 3rem;
     margin: auto; }
   #logo #gouv {
-    padding-right: 3rem; }
+    padding-right: 2rem; }
 
 #body p:empty {
   display: none; }
@@ -892,7 +890,7 @@ ul.pagination {
   .titre_bsn p {
     padding-right: 15%; }
 
-@keyframes anim {
+@keyframes animate {
   0% {
     width: 0%; }
   100% {
@@ -907,7 +905,7 @@ ul.pagination {
     width: 100%; } }
 
 .after-h1 .souligne.toright {
-  animation: anim 1.2s 1 normal ease-in-out forwards; }
+  animation: animate 1.2s 1 normal ease-in-out forwards; }
 
 .after-h1 .souligne.toleft {
   animation: glissement 1.2s 1 normal ease-in-out forwards; }
@@ -967,15 +965,6 @@ ul.pagination {
 .texte-cache.ouvert {
   max-height: 300vh;
   /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/ }
-  .texte-cache.ouvert .bouton-ouverture {
-    position: relative;
-    cursor: pointer;
-    border: solid;
-    background-color: transparent;
-    text-transform: uppercase;
-    left: 45%;
-    margin-top: 3rem;
-    margin-bottom: 5rem; }
 
 /*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
 .texte-cache:not(.ouvert)::after {
@@ -985,27 +974,17 @@ ul.pagination {
   bottom: 0;
   left: 0;
   right: 0; }
-  .texte-cache:not(.ouvert)::after .bouton-ouverture {
-    position: relative;
-    justify-content: center;
-    cursor: pointer;
-    border: solid;
-    background-color: transparent;
-    text-transform: uppercase;
-    left: 45%;
-    margin-top: 3rem;
-    margin-bottom: 5rem; }
 
 .bouton-ouverture {
   position: relative;
   justify-content: center;
   cursor: pointer;
   border: solid;
+  border-radius: 0px !important;
   background-color: transparent;
   text-transform: uppercase;
   left: 45%;
-  margin-top: 3rem;
-  margin-bottom: 5rem; }
+  margin-bottom: 2rem; }
 
 .gouvernance {
   background-color: #000;
@@ -1084,8 +1063,9 @@ ul.pagination {
             transition: 0.2s ease-in-out; }
 
 .bouton {
-  border: solid;
+  border: solid !important;
   background-color: transparent;
+  border-radius: 0px !important;
   text-transform: uppercase;
   align-self: flex-end;
   margin: auto;
@@ -1102,13 +1082,6 @@ ul.pagination {
 
 .modal.open {
   display: block; }
-  .modal.open .bouton {
-    border: solid;
-    background-color: transparent;
-    text-transform: uppercase;
-    align-self: flex-end;
-    margin: auto;
-    margin-bottom: 2rem; }
 
 .modal .container {
   position: absolute;
@@ -1183,6 +1156,19 @@ ul.pagination {
       #new-footer .footer .contact p {
         margin: 0; }
 
+button:focus {
+  border: solid !important;
+  background-color: transparent;
+  border-radius: 0px !important;
+  text-transform: uppercase;
+  align-self: flex-end;
+  margin: auto;
+  margin-bottom: 2rem;
+  outline: -webkit-focus-ring-color auto 0px;
+  outline-color: -webkit-focus-ring-color;
+  outline-style: auto;
+  outline-width: 0px; }
+
 .modular.header-image #header {
   background-color: rgba(255, 255, 255, 0);
   box-shadow: none; }

user/themes/epau-antimatter/js/antimatter.js

@@ -9,35 +9,12 @@ function scrollHeader() {
         $("#header").removeClass("scrolled");
 }
 
-// Souligné horizontal sur titre block
-//
-//
-//   var title = $(document).querySelectorAll("h1");
-//   var start = (document).querySelectorAll(".after-h1");
-// //     var finish = document.querySelectorAll(".after-h1-finish")
-// function isInView(event, visible) {
-//     if title(visible == true) {
-//       console.log("je te vois");
-//     }
-//     else {
-//       console.log("je ne te vois pas");
-//     }
-// };
-// var elements = document.getElementsByClass('souligne');
-//
-// elements.forEach(function(element) {
-//     new WhenInViewport(element, function(elementInViewport) {
-//         elementInViewport.classList.add('inViewport');
-//     });
-// });
-//
-
 
 
 
 jQuery(document).ready(function($){
 
-//bouton "voir plus de ressources"
+    //bouton "voir plus de ressources"
     // $("a.bouton-ouverture").removeAttr("href"); // On supprime le lien de notre bouton
 
     $('.bouton-ouverture').on('click', function(){ // lorsqu'on clique sur le bouton
@@ -53,12 +30,12 @@ jQuery(document).ready(function($){
 
     // parallax slideshow
     $(document).ready(function() {
-  var imgSrc = ["http://ouidade.net/dev-epau.archi.fr/user/themes/epau-antimatter/images/14360_default_big.jpg", "http://ouidade.net/dev-epau.archi.fr/user/themes/epau-antimatter/images/10361_web_01.jpg", "http://ouidade.net/dev-epau.archi.fr/user/themes/epau-antimatter/images/hyperliens_marseille.png",];
+    var imgSrc = ["http://ouidade.net/dev-epau.archi.fr/user/themes/epau-antimatter/images/14360_default_big.jpg", "http://ouidade.net/dev-epau.archi.fr/user/themes/epau-antimatter/images/10361_web_01.jpg", "http://ouidade.net/dev-epau.archi.fr/user/themes/epau-antimatter/images/hyperliens_marseille.png",];
 
-  var counter = 1;
-  var duration = 4000;
-  var tTime = 300;
-  var v = setInterval(function() {
+    var counter = 1;
+    var duration = 4000;
+    var tTime = 300;
+    var v = setInterval(function() {
       $('.parallax-mirror').animate({
         'opacity': 0
       }, {
@@ -76,31 +53,16 @@ jQuery(document).ready(function($){
         counter = 0
       } else {
         counter++
-      };
-    },
-    duration);
-
+        };
+      },
+      duration);
+    });
 
-});
 
 
-// // souligne apparait on scrollLock
 
-//     $(function () {
-//       var element = $("#triggerOnScroll");
-//       $(window).scroll(function () {
-//         if($(window).scrollTop() > 0) {
-//           element.addClass("animateMe");
-//         }
-//
-//       });
 
 
-// jQuery('.your-class-here').one('inview', function (event, visible) {
-//     if (visible == true) {
-//       //Enjoy !
-//     }
-// });
 
 
 
@@ -149,41 +111,25 @@ jQuery(document).ready(function($){
     	   return false;
     });
 
-    //
-    // // Animate on scroll
-    // $(function() {
-    //
-    //   var $window           = $(window),
-    //       win_height_padded = $window.height() * 1.1,
-    //       isTouch           = Modernizr.touch;
-    //
-    //   if (isTouch) { $('.after-h1').addClass('animated'); }
-    //
-    //   $window.on('scroll', revealOnScroll);
-    //
-    //   function revealOnScroll() {
-    //     var scrolled = $window.scrollTop(),
-    //         win_height_padded = $window.height() * 1.1;
-    //
-    //     // Show...
-    //     $(".after-h1:not(.animated)").each(function () {
-    //       var $this     = $(this),
-    //           offsetTop = $this.offset().top;
-    //
-    //       if (scrolled + win_height_padded > offsetTop) {
-    //         if ($this.data('timeout')) {
-    //           window.setTimeout(function(){
-    //             $this.addClass('animated ' + $this.data('animation'));
-    //           }, parseInt($this.data('timeout'),10));
-    //         } else {
-    //           $this.addClass('animated ' + $this.data('animation'));
-    //         }
-    //       }
-    //     });
-    //   }
-    //
-    //   revealOnScroll();
-    // });
 
 
 });
+
+
+    // Animation souligné if inView
+    function isScrolledIntoView(elem) {
+      var docViewTop = $(window).scrollTop();
+      var docViewBottom = docViewTop + $(window).height();
+
+      var elemTop = $(elem).offset().top;
+      var elemBottom = elemTop + $(elem).height();
+
+      return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
+    }
+    $(window).scroll(function () {
+      $('.souligne').each(function () {
+        if (isScrolledIntoView(this) === true) {
+            $(this).addClass('in-view')
+            }
+      });
+    });

user/themes/epau-antimatter/scss/configuration/template/_colors.scss

@@ -38,7 +38,7 @@ $main-bg:						#f7f7f7;
 $body-border:					darken($main-bg, 5%);
 
 // Sidebar
-$sidebar-text:					#aaa;
+$sidebar-text:					#FFF;
 
 // Bottom
 $bottom-bg:						#f7f7f7;

user/themes/epau-antimatter/scss/template/_buttons.scss

@@ -6,4 +6,4 @@
 .button-secondary {
 	@extend %button;
 	@include button-color($secondary-link);
-}
+}

user/themes/epau-antimatter/scss/template/_core.scss

@@ -41,7 +41,7 @@ b, strong {
 #body {
 	@extend .default-animation;
 	@extend .padding-horiz;
-	
+
 	background: $page-bg;
 	padding-top: $header-height + $padding-vert;
 	padding-bottom: $footer-height + $padding-vert + 2rem;
@@ -55,4 +55,3 @@ b, strong {
 .right {
   float: right;
 }
-

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -10,7 +10,9 @@
     }
 }
 
-
+.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
+  padding-left: 3rem;
+}
 
 #body > script:first-child + .grav-lightslider {
   margin-top: -3rem;
@@ -60,22 +62,25 @@
 
 
 #logo {
+  position: relative;
     display: flex;
     flex-direction: row;
-    // &.active {
-    //   a:after {
-    //     top: 0;
-    //     visibility: visible;
-    //     @include transform(scaleX(0.75));
-    //   }
-    // }
+    @include transform(scale(0.75));
+    &.active {
+      a:after {
+        top: 0;
+        visibility: visible;
+        @include transform(scale(0.75));
+			  @extend .default-animation;
+      }
+    }
     img {
       padding: 0.5rem;
       max-height: 3rem;
       margin:auto;
     }
     #gouv {
-      padding-right: 3rem;
+      padding-right: 2rem;
     }
 }
 
@@ -139,7 +144,7 @@
     }
 }
 
-@keyframes anim {
+@keyframes animate {
   0% {width: 0%;}
 
   100% {width: 100%;}
@@ -160,7 +165,7 @@
   .souligne.toright {
     // opacity: 0;
     // transition: opacity 1s ease-in-out;
-    animation: anim 1.2s 1 normal ease-in-out forwards;
+    animation: animate 1.2s 1 normal ease-in-out forwards;
   }
   .souligne.toleft {
     animation: glissement 1.2s 1 normal ease-in-out forwards;
@@ -313,20 +318,6 @@
 /*Style du module TEXTE lorsqu'il est ouvert*/
 .texte-cache.ouvert {
     max-height: 300vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/
-    .bouton-ouverture {
-        position: relative;
-        cursor: pointer;
-        border: solid;
-        background-color: transparent;
-        text-transform: uppercase;
-        left: 45%;
-        margin-top: 3rem;
-        margin-bottom: 5rem;
-        // align-self: flex-end;
-        // margin-right: 2rem;
-        // margin: auto;
-
-    }
   }
 
 /*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
@@ -338,23 +329,6 @@
   left: 0;
   right: 0;
   // background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/
-  .bouton-ouverture {
-      position: relative;
-      justify-content: center;
-      cursor: pointer;
-      border: solid;
-      background-color: transparent;
-      text-transform: uppercase;
-      left: 45%;
-      margin-top: 3rem;
-      margin-bottom: 5rem;
-      // align-self: flex-end;
-      // margin-right: 2rem;
-      // margin: auto;
-
-  }
-
-
 }
 
 .bouton-ouverture {
@@ -362,14 +336,12 @@
     justify-content: center;
     cursor: pointer;
     border: solid;
+    border-radius: 0px !important;
     background-color: transparent;
     text-transform: uppercase;
     left: 45%;
-    margin-top: 3rem;
-    margin-bottom: 5rem;
-    // align-self: flex-end;
-    // margin-right: 2rem;
-    // margin: auto;
+    // margin-top: 3rem;
+    margin-bottom: 2rem;
 
 }
 
@@ -500,8 +472,9 @@
 // }
 
 .bouton {
-  border: solid;
+  border: solid !important;
   background-color: transparent;
+  border-radius: 0px !important;
   text-transform: uppercase;
   align-self: flex-end;
   margin:auto;
@@ -526,14 +499,14 @@
 }
 .modal.open{
 	display: block;
-  .bouton {
-    border: solid;
-    background-color: transparent;
-    text-transform: uppercase;
-    align-self: flex-end;
-    margin:auto;
-    margin-bottom: 2rem;
-  }
+  // .bouton {
+  //   border: solid !important;
+  //   background-color: transparent;
+  //   text-transform: uppercase;
+  //   align-self: flex-end;
+  //   margin:auto;
+  //   margin-bottom: 2rem;
+  // }
 }
 
 // #modal .mask{
@@ -580,21 +553,6 @@
 
 }
 
-// .modal .container .message{
-// 	padding: 5% 10% 5% 5%;
-//
-// }
-
-// .modal .container a.close{
-// 	position: absolute;
-// 	right: 5%;
-// 	top:5%;
-// 	color: black;
-// 	font-size: 30px;
-// }
-// .modal .container a.close:hover{
-// 	color: black;
-// }
 
 #new-footer {
   // position:absolute;
@@ -666,7 +624,19 @@
       }
     }
   }
+}
 
 
-
+button:focus {
+  border: solid !important;
+  background-color: transparent;
+  border-radius: 0px !important;
+  text-transform: uppercase;
+  align-self: flex-end;
+  margin:auto;
+  margin-bottom: 2rem;
+  outline: -webkit-focus-ring-color auto 0px;
+      outline-color: -webkit-focus-ring-color;
+      outline-style: auto;
+      outline-width: 0px;
 }

user/themes/epau-antimatter/scss/template/_header.scss

@@ -144,19 +144,19 @@ $dropdown-color: #f6f6f6;
 						-webkit-backface-visibility: hidden;
 
 
-						&:before, &:after {
-							content: "";
-							position: absolute;
-							width: 100%;
-							height: 1px;
-							bottom: 0;
-							left: 0;
-							background-color: $core-accent;
-							visibility: hidden;
-							@include transform(scaleX(0));
-							@include transition(all 0.2s ease);
-
-						}
+						// &:before, &:after {
+						// 	content: "";
+						// 	position: absolute;
+						// 	width: 100%;
+						// 	height: 1px;
+						// 	bottom: 0;
+						// 	left: 0;
+						// 	background-color: $core-accent;
+						// 	visibility: hidden;
+						// 	@include transform(scaleX(0));
+						// 	@include transition(all 0.2s ease);
+						//
+						// }
 
 						&:hover:before {
 							visibility: visible;

user/themes/epau-antimatter/scss/template/modules/_buttons.scss

@@ -13,7 +13,7 @@
 	background: $white;
 	color: $color;
 	border: 1px solid $color;
-	border-radius: 3px;
+	// border-radius: 3px;
 	&:hover {
 		background: $color;
 		color: $white;

user/themes/epau-antimatter/templates/modular/gouvernance.html.twig

@@ -5,7 +5,7 @@
 
     <h1>Gouvernance</h1>
 
-    <div id="triggerOnScroll" class="souligne toleft">
+    <div class="souligne toleft">
       <svg width="100%" height="0.5rem">
        <rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" />
      </svg>

user/themes/epau-antimatter/templates/partials/base.html.twig

@@ -65,7 +65,7 @@
                 {% block header_navigation %}
                 {% include 'partials/navigation.html.twig' %}
                 {% endblock %}
-                <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
+                <!-- <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span> -->
             </div>
         </header>
 
@@ -94,7 +94,7 @@
         <div class="sb-slidebar sb-left sb-width-thin">
             <div id="panel">
             {% include 'partials/navigation.html.twig' %}
-            
+
             </div>
         </div>
     {% endblock %}