souligné H1, pas réussi animation js on scroll. alimation css hover ok
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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%;
|
||||
} */ */
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
@@ -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 = $('<div />').prependTo(this.mirrorContainer);
|
||||
|
||||
var slider = this.$element.find('>.parallax-slider');
|
||||
var sliderExisted = false;
|
||||
|
||||
if (slider.length == 0)
|
||||
this.$slider = $('<img />').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));
|
||||
File diff suppressed because one or more lines are too long
+12
-2
@@ -9,9 +9,9 @@
|
||||
"version": "1.0.0",
|
||||
"license": "GPL-3.0",
|
||||
"dependencies": {
|
||||
"animate.css": "^4.1.1",
|
||||
"node-sass": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {}
|
||||
}
|
||||
},
|
||||
"node_modules/abbrev": {
|
||||
"version": "1.1.1",
|
||||
@@ -41,6 +41,11 @@
|
||||
"node": ">=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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<div class="callout">
|
||||
{% set image = page.media.images|first %}
|
||||
{% if image %}
|
||||
{{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
|
||||
{% endif %}
|
||||
<div class="titre_bsn">
|
||||
|
||||
|
||||
<h1>EPAU</h1>
|
||||
|
||||
<div class="test" >
|
||||
<svg width="100%" height="0.5rem">
|
||||
<rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h2>L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS</h2>
|
||||
|
||||
<p>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</p>
|
||||
|
||||
|
||||
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +1,19 @@
|
||||
|
||||
<div class="gouvernance">
|
||||
|
||||
<div class="titre_bsn">
|
||||
|
||||
<h1>Gouvernance</h1>
|
||||
|
||||
<div class="test" >
|
||||
<svg width="100%" height="0.5rem">
|
||||
<rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" />
|
||||
</svg>
|
||||
</div>
|
||||
<p> Le conseil d’administration de l’Europe des projets architecturaux et urbains et les Directions de programmes de l’Europe des projets architecturaux urbains</p>
|
||||
|
||||
{{ page.content|raw }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mozaique_personnes">
|
||||
|
||||
@@ -1,15 +1,24 @@
|
||||
|
||||
<div class="titre_nsb">
|
||||
|
||||
{{ content|raw }}
|
||||
<h1>Ressources</h1>
|
||||
|
||||
<div class="after-h1">
|
||||
|
||||
<div class="test" >
|
||||
<svg width="100%" height="0.5rem">
|
||||
<rect class="after-h1" width="100%" height="100%" style="fill:rgb(0,0,0)" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- <div class="after-h1-finish">
|
||||
<svg width="50%" height="0.5rem">
|
||||
<rect width="100%" height="100%" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
|
||||
</svg>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
{{ content|raw }}
|
||||
|
||||
<div class="features {{ page.header.class}}">
|
||||
|
||||
<div class="feature-items">
|
||||
|
||||
@@ -4,6 +4,28 @@
|
||||
{{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
|
||||
{% endif %}
|
||||
<div class="titre_bsn">
|
||||
|
||||
|
||||
<h1>Contact</h1>
|
||||
|
||||
|
||||
<h2></h2>
|
||||
|
||||
<p>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
|
||||
</p>
|
||||
|
||||
|
||||
<div class="test" >
|
||||
<svg width="50%" height="0.5rem">
|
||||
<rect class="after-h1" width="3%" height="100%" style="fill:rgb(0,0,0)" />
|
||||
</svg>
|
||||
</div>
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user