From 03309f4e3766dcb2c4bf09617a9c594922ed5e86 Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 8 Apr 2021 11:14:43 +0200 Subject: [PATCH] =?UTF-8?q?soulign=C3=A9=20H1,=20pas=20r=C3=A9ussi=20anima?= =?UTF-8?q?tion=20js=20on=20scroll.=20alimation=20css=20hover=20ok?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../epau-antimatter/css-compiled/template.css | 29 +- user/themes/epau-antimatter/css/custom.css | 186 -------- user/themes/epau-antimatter/js/antimatter.js | 63 ++- user/themes/epau-antimatter/js/parallax.js | 412 ------------------ .../themes/epau-antimatter/js/parallax.min.js | 6 - user/themes/epau-antimatter/package-lock.json | 14 +- user/themes/epau-antimatter/package.json | 2 +- .../scss/template/_custom.scss | 86 +++- .../templates/modular/accueil.html.twig | 25 ++ .../templates/modular/gouvernance.html.twig | 12 + .../templates/modular/ressources.html.twig | 15 +- .../templates/modular/text.html.twig | 22 + 12 files changed, 248 insertions(+), 624 deletions(-) delete mode 100755 user/themes/epau-antimatter/js/parallax.js delete mode 100644 user/themes/epau-antimatter/js/parallax.min.js create mode 100644 user/themes/epau-antimatter/templates/modular/accueil.html.twig diff --git a/user/themes/epau-antimatter/css-compiled/template.css b/user/themes/epau-antimatter/css-compiled/template.css index 7e0ba19..bc14d53 100644 --- a/user/themes/epau-antimatter/css-compiled/template.css +++ b/user/themes/epau-antimatter/css-compiled/template.css @@ -835,16 +835,35 @@ ul.pagination { .callout h1, h2, h3, p { text-align: left !important; } -.callout h1 { - padding-bottom: 5rem; } +.callout { + padding-right: 0rem !important; + padding-left: 0rem !important; } + .callout h2 { + text-transform: capitalize; + font-weight: 300; + font-size: 1rem; } + +.titre_nsb { + display: block; + margin-right: 52%; } + .titre_nsb h1 { + margin-bottom: 0rem !important; + text-align: right; + padding-right: 0rem !important; } .titre_bsn { display: block; - margin-left: 40%; - margin-right: 15%; } + margin-left: 40%; } .titre_bsn h1 { text-align: left; - padding-bottom: 3rem; } + margin-bottom: 0rem !important; } + .titre_bsn p { + padding-right: 15%; } + +.after-h1 { + transition: width 5s ease-in-out; } + .after-h1:hover { + width: 100%; } .programmes { display: flex; diff --git a/user/themes/epau-antimatter/css/custom.css b/user/themes/epau-antimatter/css/custom.css index 195eecc..e69de29 100644 --- a/user/themes/epau-antimatter/css/custom.css +++ b/user/themes/epau-antimatter/css/custom.css @@ -1,186 +0,0 @@ -/* #header #navbar ul.navigation li a { - font-family: "Sarabun", sans-serif; - font-weight: 400; - text-transform: uppercase; - font-size: 1rem; - display: inline-block; - padding: 0.3rem 0.8rem; - -webkit-backface-visibility: hidden; - -} - - - #header.scrolled #navbar ul.navigation li a { - color: black !important; - font-size: 0.95rem; - - transition:0.6s ease-in-out; - - } - - -.callout { - background-color: #000; - color: white; - padding-top: 0.5rem; -} - -.callout h1, h2, h3, p { - text-align: left !important; - - } - -.callout h1 { - padding-bottom: 5rem; -} - -h2 { - font-size: 30px; - font-weight: lighter; - line-height: 35px; -} - -.titre_bsn { - display: block; - margin-left: 40%; - margin-right: 15%; -} - -.titre_bsn h1 { - text-align: left; - padding-bottom: 3rem; -} - - - -.programmes { - display: flex; - flex-wrap: wrap; - background-color: #d5d2d1; - justify-content: center; - padding-left: 15%; - padding-right: 15%; - - padding-top: 8rem; - padding-bottom: 8rem; -} - - - - .programme { - max-width: 45%; - padding: 1.5rem; - background-color: white; - margin: 0.4rem; - - } - - .programme h4 { - text-transform: uppercase; - } - - .programme img { - max-width: 30%; - } - - .programmes :hover { - background-color: #000; - color: #ffffff; - transition:0.2s ease-in-out; - } - - /* .titre_nsb { - display: block; - position: absolute; - margin-right: 39%; - } */ - - -/* .ressources { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - background-color: #ffffff; - padding-top: 8rem; - padding-right: 5rem; - padding-left: 5rem; - } */ - - /* .ressource { - max-width: 20%; - margin-block: 5rem; - flex-wrap: wrap; - flex: 0 1 15%; - } */ - - -/* -.ressources h1 { - text-transform: uppercase; - background-color: #fff; - color: #000; - padding-top: 5rem; - padding-bottom: 6rem; -} */ - -/* .ressources { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-gap: 3rem; - grid-auto-rows: auto; - background-color: #ffffff; - padding-top: 18rem; - justify-items: center; - position: relative; - margin-right: 10%; - margin-bottom: 6rem; - margin-left: 10%; -} */ - -/* .ressources img { - max-width: 50%; -} */ - -/* .ressource h1 h2 h3 h4 { - margin: 0.2rem; -} */ -/* -.gouvernance { - background-color: #000; - color: #ffffff; - text-transform: uppercase; - padding-bottom: 6rem; - padding-top: 2rem; -} -.gouverance h1 { - padding-bottom: 5rem; -} - -.mozaique_personnes { - background-color: #d5d2d1 -} - -.mozaique_personnes h3 { - margin-top: 0px !important; - padding-top: 3rem; - padding-left: 15%; - padding-right: 15%; - font-family: "Sarabun"; - font-weight: 800; - font-size: 1rem; - line-height: 20px; -} - -.personne { - background-color: #fff; - display: flex; - - justify-items: center; - position: relative; - margin-right: 10%; - margin-bottom: 6rem; - margin-left: 10%; -} -.portrait { - max-width: 20%; -} */ */ diff --git a/user/themes/epau-antimatter/js/antimatter.js b/user/themes/epau-antimatter/js/antimatter.js index c6f6847..a9e97cd 100644 --- a/user/themes/epau-antimatter/js/antimatter.js +++ b/user/themes/epau-antimatter/js/antimatter.js @@ -9,10 +9,31 @@ 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"); +// } +// }; + + jQuery(document).ready(function($){ - // paralax - // $('.parallax-window').parallax({imageSrc: '{/pages/02._programmes/10361_web_01.jpg}'}); + +// jQuery('.your-class-here').one('inview', function (event, visible) { +// if (visible == true) { +// //Enjoy ! +// } +// }); + // ON SCROLL EVENTS @@ -59,4 +80,42 @@ jQuery(document).ready(function($){ }); + // 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(); + }); + + + + }); diff --git a/user/themes/epau-antimatter/js/parallax.js b/user/themes/epau-antimatter/js/parallax.js deleted file mode 100755 index 5d7a97c..0000000 --- a/user/themes/epau-antimatter/js/parallax.js +++ /dev/null @@ -1,412 +0,0 @@ -/*! - * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/) - * @copyright 2016 PixelCog, Inc. - * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE) - */ - -;(function ( $, window, document, undefined ) { - - // Polyfill for requestAnimationFrame - // via: https://gist.github.com/paulirish/1579671 - - (function() { - var lastTime = 0; - var vendors = ['ms', 'moz', 'webkit', 'o']; - for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { - window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; - window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; - } - - if (!window.requestAnimationFrame) - window.requestAnimationFrame = function(callback) { - var currTime = new Date().getTime(); - var timeToCall = Math.max(0, 16 - (currTime - lastTime)); - var id = window.setTimeout(function() { callback(currTime + timeToCall); }, - timeToCall); - lastTime = currTime + timeToCall; - return id; - }; - - if (!window.cancelAnimationFrame) - window.cancelAnimationFrame = function(id) { - clearTimeout(id); - }; - }()); - - - // Parallax Constructor - - function Parallax(element, options) { - var self = this; - - if (typeof options == 'object') { - delete options.refresh; - delete options.render; - $.extend(this, options); - } - - this.$element = $(element); - - if (!this.imageSrc && this.$element.is('img')) { - this.imageSrc = this.$element.attr('src'); - } - - var positions = (this.position + '').toLowerCase().match(/\S+/g) || []; - - if (positions.length < 1) { - positions.push('center'); - } - if (positions.length == 1) { - positions.push(positions[0]); - } - - if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') { - positions = [positions[1], positions[0]]; - } - - if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase(); - if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase(); - - self.positionX = positions[0]; - self.positionY = positions[1]; - - if (this.positionX != 'left' && this.positionX != 'right') { - if (isNaN(parseInt(this.positionX))) { - this.positionX = 'center'; - } else { - this.positionX = parseInt(this.positionX); - } - } - - if (this.positionY != 'top' && this.positionY != 'bottom') { - if (isNaN(parseInt(this.positionY))) { - this.positionY = 'center'; - } else { - this.positionY = parseInt(this.positionY); - } - } - - this.position = - this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' + - this.positionY + (isNaN(this.positionY)? '' : 'px'); - - if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { - if (this.imageSrc && this.iosFix && !this.$element.is('img')) { - this.$element.css({ - backgroundImage: 'url(' + this.imageSrc + ')', - backgroundSize: 'cover', - backgroundPosition: this.position - }); - } - return this; - } - - if (navigator.userAgent.match(/(Android)/)) { - if (this.imageSrc && this.androidFix && !this.$element.is('img')) { - this.$element.css({ - backgroundImage: 'url(' + this.imageSrc + ')', - backgroundSize: 'cover', - backgroundPosition: this.position - }); - } - return this; - } - - this.$mirror = $('
').prependTo(this.mirrorContainer); - - var slider = this.$element.find('>.parallax-slider'); - var sliderExisted = false; - - if (slider.length == 0) - this.$slider = $('').prependTo(this.$mirror); - else { - this.$slider = slider.prependTo(this.$mirror) - sliderExisted = true; - } - - this.$mirror.addClass('parallax-mirror').css({ - visibility: 'hidden', - zIndex: this.zIndex, - position: 'fixed', - top: 0, - left: 0, - overflow: 'hidden' - }); - - this.$slider.addClass('parallax-slider').one('load', function() { - if (!self.naturalHeight || !self.naturalWidth) { - self.naturalHeight = this.naturalHeight || this.height || 1; - self.naturalWidth = this.naturalWidth || this.width || 1; - } - self.aspectRatio = self.naturalWidth / self.naturalHeight; - - Parallax.isSetup || Parallax.setup(); - Parallax.sliders.push(self); - Parallax.isFresh = false; - Parallax.requestRender(); - }); - - if (!sliderExisted) - this.$slider[0].src = this.imageSrc; - - if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) { - this.$slider.trigger('load'); - } - - } - - - // Parallax Instance Methods - - $.extend(Parallax.prototype, { - speed: 0.2, - bleed: 0, - zIndex: -100, - iosFix: true, - androidFix: true, - position: 'center', - overScrollFix: false, - mirrorContainer: 'body', - - refresh: function() { - this.boxWidth = this.$element.outerWidth(); - this.boxHeight = this.$element.outerHeight() + this.bleed * 2; - this.boxOffsetTop = this.$element.offset().top - this.bleed; - this.boxOffsetLeft = this.$element.offset().left; - this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight; - - var winHeight = Parallax.winHeight; - var docHeight = Parallax.docHeight; - var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight); - var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0); - var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0; - var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0; - var margin; - - if (imageHeightMin * this.aspectRatio >= this.boxWidth) { - this.imageWidth = imageHeightMin * this.aspectRatio | 0; - this.imageHeight = imageHeightMin; - this.offsetBaseTop = imageOffsetMin; - - margin = this.imageWidth - this.boxWidth; - - if (this.positionX == 'left') { - this.offsetLeft = 0; - } else if (this.positionX == 'right') { - this.offsetLeft = - margin; - } else if (!isNaN(this.positionX)) { - this.offsetLeft = Math.max(this.positionX, - margin); - } else { - this.offsetLeft = - margin / 2 | 0; - } - } else { - this.imageWidth = this.boxWidth; - this.imageHeight = this.boxWidth / this.aspectRatio | 0; - this.offsetLeft = 0; - - margin = this.imageHeight - imageHeightMin; - - if (this.positionY == 'top') { - this.offsetBaseTop = imageOffsetMin; - } else if (this.positionY == 'bottom') { - this.offsetBaseTop = imageOffsetMin - margin; - } else if (!isNaN(this.positionY)) { - this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin); - } else { - this.offsetBaseTop = imageOffsetMin - margin / 2 | 0; - } - } - }, - - render: function() { - var scrollTop = Parallax.scrollTop; - var scrollLeft = Parallax.scrollLeft; - var overScroll = this.overScrollFix ? Parallax.overScroll : 0; - var scrollBottom = scrollTop + Parallax.winHeight; - - if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) { - this.visibility = 'visible'; - this.mirrorTop = this.boxOffsetTop - scrollTop; - this.mirrorLeft = this.boxOffsetLeft - scrollLeft; - this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed); - } else { - this.visibility = 'hidden'; - } - - this.$mirror.css({ - transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)', - visibility: this.visibility, - height: this.boxHeight, - width: this.boxWidth - }); - - this.$slider.css({ - transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)', - position: 'absolute', - height: this.imageHeight, - width: this.imageWidth, - maxWidth: 'none' - }); - } - }); - - - // Parallax Static Methods - - $.extend(Parallax, { - scrollTop: 0, - scrollLeft: 0, - winHeight: 0, - winWidth: 0, - docHeight: 1 << 30, - docWidth: 1 << 30, - sliders: [], - isReady: false, - isFresh: false, - isBusy: false, - - setup: function() { - if (this.isReady) return; - - var self = this; - - var $doc = $(document), $win = $(window); - - var loadDimensions = function() { - Parallax.winHeight = $win.height(); - Parallax.winWidth = $win.width(); - Parallax.docHeight = $doc.height(); - Parallax.docWidth = $doc.width(); - }; - - var loadScrollPosition = function() { - var winScrollTop = $win.scrollTop(); - var scrollTopMax = Parallax.docHeight - Parallax.winHeight; - var scrollLeftMax = Parallax.docWidth - Parallax.winWidth; - Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop)); - Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft())); - Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0)); - }; - - $win.on('resize.px.parallax load.px.parallax', function() { - loadDimensions(); - self.refresh(); - Parallax.isFresh = false; - Parallax.requestRender(); - }) - .on('scroll.px.parallax load.px.parallax', function() { - loadScrollPosition(); - Parallax.requestRender(); - }); - - loadDimensions(); - loadScrollPosition(); - - this.isReady = true; - - var lastPosition = -1; - - function frameLoop() { - if (lastPosition == window.pageYOffset) { // Avoid overcalculations - window.requestAnimationFrame(frameLoop); - return false; - } else lastPosition = window.pageYOffset; - - self.render(); - window.requestAnimationFrame(frameLoop); - } - - frameLoop(); - }, - - configure: function(options) { - if (typeof options == 'object') { - delete options.refresh; - delete options.render; - $.extend(this.prototype, options); - } - }, - - refresh: function() { - $.each(this.sliders, function(){ this.refresh(); }); - this.isFresh = true; - }, - - render: function() { - this.isFresh || this.refresh(); - $.each(this.sliders, function(){ this.render(); }); - }, - - requestRender: function() { - var self = this; - self.render(); - self.isBusy = false; - }, - destroy: function(el){ - var i, - parallaxElement = $(el).data('px.parallax'); - parallaxElement.$mirror.remove(); - for(i=0; i < this.sliders.length; i+=1){ - if(this.sliders[i] == parallaxElement){ - this.sliders.splice(i, 1); - } - } - $(el).data('px.parallax', false); - if(this.sliders.length === 0){ - $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax'); - this.isReady = false; - Parallax.isSetup = false; - } - } - }); - - - // Parallax Plugin Definition - - function Plugin(option) { - return this.each(function () { - var $this = $(this); - var options = typeof option == 'object' && option; - - if (this == window || this == document || $this.is('body')) { - Parallax.configure(options); - } - else if (!$this.data('px.parallax')) { - options = $.extend({}, $this.data(), options); - $this.data('px.parallax', new Parallax(this, options)); - } - else if (typeof option == 'object') - { - $.extend($this.data('px.parallax'), options); - } - if (typeof option == 'string') { - if(option == 'destroy'){ - Parallax.destroy(this); - }else{ - Parallax[option](); - } - } - }); - } - - var old = $.fn.parallax; - - $.fn.parallax = Plugin; - $.fn.parallax.Constructor = Parallax; - - - // Parallax No Conflict - - $.fn.parallax.noConflict = function () { - $.fn.parallax = old; - return this; - }; - - - // Parallax Data-API - - $( function () { - $('[data-parallax="scroll"]').parallax(); - }); - -}(jQuery, window, document)); diff --git a/user/themes/epau-antimatter/js/parallax.min.js b/user/themes/epau-antimatter/js/parallax.min.js deleted file mode 100644 index 8d85c99..0000000 --- a/user/themes/epau-antimatter/js/parallax.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/*! - * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/) - * @copyright 2016 PixelCog, Inc. - * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE) - */ -!function(t,i,e,s){function o(i,e){var h=this;"object"==typeof e&&(delete e.refresh,delete e.render,t.extend(this,e)),this.$element=t(i),!this.imageSrc&&this.$element.is("img")&&(this.imageSrc=this.$element.attr("src"));var r=(this.position+"").toLowerCase().match(/\S+/g)||[];if(r.length<1&&r.push("center"),1==r.length&&r.push(r[0]),"top"!=r[0]&&"bottom"!=r[0]&&"left"!=r[1]&&"right"!=r[1]||(r=[r[1],r[0]]),this.positionX!==s&&(r[0]=this.positionX.toLowerCase()),this.positionY!==s&&(r[1]=this.positionY.toLowerCase()),h.positionX=r[0],h.positionY=r[1],"left"!=this.positionX&&"right"!=this.positionX&&(isNaN(parseInt(this.positionX))?this.positionX="center":this.positionX=parseInt(this.positionX)),"top"!=this.positionY&&"bottom"!=this.positionY&&(isNaN(parseInt(this.positionY))?this.positionY="center":this.positionY=parseInt(this.positionY)),this.position=this.positionX+(isNaN(this.positionX)?"":"px")+" "+this.positionY+(isNaN(this.positionY)?"":"px"),navigator.userAgent.match(/(iPod|iPhone|iPad)/))return this.imageSrc&&this.iosFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this;if(navigator.userAgent.match(/(Android)/))return this.imageSrc&&this.androidFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this;this.$mirror=t("
").prependTo(this.mirrorContainer);var a=this.$element.find(">.parallax-slider"),n=!1;0==a.length?this.$slider=t("").prependTo(this.$mirror):(this.$slider=a.prependTo(this.$mirror),n=!0),this.$mirror.addClass("parallax-mirror").css({visibility:"hidden",zIndex:this.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"}),this.$slider.addClass("parallax-slider").one("load",function(){h.naturalHeight&&h.naturalWidth||(h.naturalHeight=this.naturalHeight||this.height||1,h.naturalWidth=this.naturalWidth||this.width||1),h.aspectRatio=h.naturalWidth/h.naturalHeight,o.isSetup||o.setup(),o.sliders.push(h),o.isFresh=!1,o.requestRender()}),n||(this.$slider[0].src=this.imageSrc),(this.naturalHeight&&this.naturalWidth||this.$slider[0].complete||a.length>0)&&this.$slider.trigger("load")}!function(){for(var t=0,e=["ms","moz","webkit","o"],s=0;s=this.boxWidth?(this.imageWidth=r*this.aspectRatio|0,this.imageHeight=r,this.offsetBaseTop=a,t=this.imageWidth-this.boxWidth,"left"==this.positionX?this.offsetLeft=0:"right"==this.positionX?this.offsetLeft=-t:isNaN(this.positionX)?this.offsetLeft=-t/2|0:this.offsetLeft=Math.max(this.positionX,-t)):(this.imageWidth=this.boxWidth,this.imageHeight=this.boxWidth/this.aspectRatio|0,this.offsetLeft=0,t=this.imageHeight-r,"top"==this.positionY?this.offsetBaseTop=a:"bottom"==this.positionY?this.offsetBaseTop=a-t:isNaN(this.positionY)?this.offsetBaseTop=a-t/2|0:this.offsetBaseTop=a+Math.max(this.positionY,-t))},render:function(){var t=o.scrollTop,i=o.scrollLeft,e=this.overScrollFix?o.overScroll:0,s=t+o.winHeight;this.boxOffsetBottom>t&&this.boxOffsetTop<=s?(this.visibility="visible",this.mirrorTop=this.boxOffsetTop-t,this.mirrorLeft=this.boxOffsetLeft-i,this.offsetTop=this.offsetBaseTop-this.mirrorTop*(1-this.speed)):this.visibility="hidden",this.$mirror.css({transform:"translate3d("+this.mirrorLeft+"px, "+(this.mirrorTop-e)+"px, 0px)",visibility:this.visibility,height:this.boxHeight,width:this.boxWidth}),this.$slider.css({transform:"translate3d("+this.offsetLeft+"px, "+this.offsetTop+"px, 0px)",position:"absolute",height:this.imageHeight,width:this.imageWidth,maxWidth:"none"})}}),t.extend(o,{scrollTop:0,scrollLeft:0,winHeight:0,winWidth:0,docHeight:1<<30,docWidth:1<<30,sliders:[],isReady:!1,isFresh:!1,isBusy:!1,setup:function(){function s(){if(p==i.pageYOffset)return i.requestAnimationFrame(s),!1;p=i.pageYOffset,h.render(),i.requestAnimationFrame(s)}if(!this.isReady){var h=this,r=t(e),a=t(i),n=function(){o.winHeight=a.height(),o.winWidth=a.width(),o.docHeight=r.height(),o.docWidth=r.width()},l=function(){var t=a.scrollTop(),i=o.docHeight-o.winHeight,e=o.docWidth-o.winWidth;o.scrollTop=Math.max(0,Math.min(i,t)),o.scrollLeft=Math.max(0,Math.min(e,a.scrollLeft())),o.overScroll=Math.max(t-i,Math.min(t,0))};a.on("resize.px.parallax load.px.parallax",function(){n(),h.refresh(),o.isFresh=!1,o.requestRender()}).on("scroll.px.parallax load.px.parallax",function(){l(),o.requestRender()}),n(),l(),this.isReady=!0;var p=-1;s()}},configure:function(i){"object"==typeof i&&(delete i.refresh,delete i.render,t.extend(this.prototype,i))},refresh:function(){t.each(this.sliders,function(){this.refresh()}),this.isFresh=!0},render:function(){this.isFresh||this.refresh(),t.each(this.sliders,function(){this.render()})},requestRender:function(){var t=this;t.render(),t.isBusy=!1},destroy:function(e){var s,h=t(e).data("px.parallax");for(h.$mirror.remove(),s=0;s=0.4.2" } }, + "node_modules/animate.css": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" + }, "node_modules/ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", @@ -1853,6 +1858,11 @@ "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=" }, + "animate.css": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" + }, "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", diff --git a/user/themes/epau-antimatter/package.json b/user/themes/epau-antimatter/package.json index 12c1d0c..15e5d03 100644 --- a/user/themes/epau-antimatter/package.json +++ b/user/themes/epau-antimatter/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "animate.css": "^4.1.1", "node-sass": "^5.0.0" }, "scripts": { @@ -12,7 +13,6 @@ "directories": { "test": "tests" }, - "devDependencies": {}, "repository": { "type": "git", "url": "https://figureslibres.io/gogs/ouidade/dev-epau.archi.fr" diff --git a/user/themes/epau-antimatter/scss/template/_custom.scss b/user/themes/epau-antimatter/scss/template/_custom.scss index 17f2003..bda10a8 100644 --- a/user/themes/epau-antimatter/scss/template/_custom.scss +++ b/user/themes/epau-antimatter/scss/template/_custom.scss @@ -58,9 +58,47 @@ padding: 0.5rem; } -h1::after { +//tentative animation when in View +// @media () { +// +// @viewport { +// +// } +// rect.after-h1 { +// animation-duration: 4s; +// animation-timing-function: linear; +// animation-timeline: grow-timeline; +// } +// +// @scroll-timeline grow-timeline { +// source: selector(.test); +// orientation: block; +// scroll-offsets: 250px, 300px; +// } +// +// @keyframes grow { +// to { transform: translate(300px) } +// } +// @k + +// @keyframes souligne { +// 0% { width: 0.5%; +// } +// 100%{ +// width: 50%; +// } +// } +// +// // selecteur:hover, +// // selecteur:focus, +// selecteur:hover{ +// animation: souligne 2s ease-in-out; +// } + + + + -} .callout { padding-top: 0.5rem; @@ -71,22 +109,56 @@ h1::after { text-align: left !important; } -.callout h1 { - padding-bottom: 5rem; +.callout { + padding-right: 0rem !important; + padding-left: 0rem !important; + + // h1 { + // margin-bottom: 0rem !important; + // } + h2 { + text-transform: capitalize; + font-weight: 300; + font-size: 1rem; + } + +} +.titre_nsb { + display: block; + margin-right: 52%; + + h1 { + margin-bottom: 0rem !important; + text-align: right; + padding-right: 0rem !important; + } } .titre_bsn { display: block; margin-left: 40%; - margin-right: 15%; + // padding-right: 15%; h1 { text-align: left; - padding-bottom: 3rem; + margin-bottom: 0rem !important; + // padding-bottom: 3rem; } + p { + padding-right: 15%; + } } +.after-h1 { // fonctionne mais manque "when in View" + transition: width 5s ease-in-out; + &:hover { + width: 100%; + // transition: width 5s ease-in-out; + } +} + + // fond images en grille pour parallax @@ -186,7 +258,7 @@ h1::after { } h4 { - color: #fff; + color: #fff; } } diff --git a/user/themes/epau-antimatter/templates/modular/accueil.html.twig b/user/themes/epau-antimatter/templates/modular/accueil.html.twig new file mode 100644 index 0000000..18bc588 --- /dev/null +++ b/user/themes/epau-antimatter/templates/modular/accueil.html.twig @@ -0,0 +1,25 @@ +
+ {% set image = page.media.images|first %} + {% if image %} + {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }} + {% endif %} +
+ + +

EPAU

+ +
+ + + +
+ +

L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS

+ +

Organisme national de recherche et d’expérimentation, sous la tutelle des Ministères en charge de l’architecture et de l’urbanisme, la Cité de l’Architecture et du Patrimoine et de l’Association Europan France

+ + + + {{ content|raw }} +
+
diff --git a/user/themes/epau-antimatter/templates/modular/gouvernance.html.twig b/user/themes/epau-antimatter/templates/modular/gouvernance.html.twig index de45078..bfa359d 100644 --- a/user/themes/epau-antimatter/templates/modular/gouvernance.html.twig +++ b/user/themes/epau-antimatter/templates/modular/gouvernance.html.twig @@ -1,7 +1,19 @@
+
+ +

Gouvernance

+ +
+ + + +
+

Le conseil d’administration de l’Europe des projets architecturaux et urbains et les Directions de programmes de l’Europe des projets architecturaux urbains

+ {{ page.content|raw }} +
diff --git a/user/themes/epau-antimatter/templates/modular/ressources.html.twig b/user/themes/epau-antimatter/templates/modular/ressources.html.twig index 6631105..fd931ac 100644 --- a/user/themes/epau-antimatter/templates/modular/ressources.html.twig +++ b/user/themes/epau-antimatter/templates/modular/ressources.html.twig @@ -1,15 +1,24 @@
- {{ content|raw }} +

Ressources

-
+ +
+ + + +
+ +
+ {{ content|raw }} +
diff --git a/user/themes/epau-antimatter/templates/modular/text.html.twig b/user/themes/epau-antimatter/templates/modular/text.html.twig index e760a44..87afc4d 100644 --- a/user/themes/epau-antimatter/templates/modular/text.html.twig +++ b/user/themes/epau-antimatter/templates/modular/text.html.twig @@ -4,6 +4,28 @@ {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }} {% endif %}
+ + +

Contact

+ + +

+ +

Fabienne Dran +Assistante de direction + +Fabienne.Dran@developpement-durable.gouv.fr + + 33 (0)1 40 81 93 27 + +33 (0)7 86 50 33 31 +

+ + +
+ + + +
{{ content|raw }}