|
|
@@ -6,7 +6,7 @@ $(document).ready( () => {
|
|
|
hoverDesktopNavItems()
|
|
|
if (currentPage.text().trim() == 'Accueil') {
|
|
|
hideFooter()
|
|
|
- animateText()
|
|
|
+ toggleIndexContent()
|
|
|
} else if (currentPage.text().trim() == 'Projets' && $('main').children(":first").attr('id') != 'reader') {
|
|
|
hideFooter()
|
|
|
loadProjetIndex()
|
|
|
@@ -21,7 +21,6 @@ $(document).ready( () => {
|
|
|
let isMobileNavOpen = false,
|
|
|
isDesktopDevice = false,
|
|
|
currentPage,
|
|
|
- indexIsReady = false,
|
|
|
filterObj = {
|
|
|
publiqueCardsDisplayed : true,
|
|
|
socialeCardsDisplayed : true,
|
|
|
@@ -66,8 +65,7 @@ function initBarba() {
|
|
|
displayPictograms()
|
|
|
$('html, body').scrollTop(0)
|
|
|
if ($(data.next.container).attr('id') == 'index-content') {
|
|
|
- animateText()
|
|
|
- indexIsReady = false
|
|
|
+ toggleIndexContent()
|
|
|
} else if ($(data.next.container).attr('id') == 'projets-index') {
|
|
|
loadProjetIndex()
|
|
|
filterWhenEntering()
|
|
|
@@ -281,8 +279,8 @@ function toggleIndexContent(closeEverything) {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
- $('#index-content canvas').click( function(event) {
|
|
|
- target = $(event.target).parent().attr('id')
|
|
|
+ $('#index-content .animateText').click( function(event) {
|
|
|
+ target = $(event.target).attr('id')
|
|
|
if (target == 'publique' || target == 'sociale' || target == 'culturelle') {
|
|
|
toggleExtrait(target)
|
|
|
return false
|
|
|
@@ -416,195 +414,6 @@ function hideContent(content) {
|
|
|
}, 1200)
|
|
|
}
|
|
|
|
|
|
-// index animation
|
|
|
-function animateText() {
|
|
|
- waitForWebfonts(['Moche'], () => { // idk why listing only one font makes it work....
|
|
|
- // For each item
|
|
|
- $(".animateText").each(function(i, e) {
|
|
|
- $(e).contents().wrap('<span></span>')
|
|
|
- $('#main-p-index span').css('color', 'transparent')
|
|
|
- $('#second-p-index span').css('color', 'transparent')
|
|
|
- // Initialize a new LiquidText instance
|
|
|
- var liquidText = new LiquidText(
|
|
|
- e, // Element
|
|
|
- 0.0, // Liquid Volatility
|
|
|
- 0.5 // Speed
|
|
|
- ).start()
|
|
|
- })
|
|
|
- toggleIndexContent()
|
|
|
- displayIndexWhenReady()
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-let globalMaterial = new Blotter.LiquidDistortMaterial()
|
|
|
-
|
|
|
-let globalBlotter = new Blotter(globalMaterial, {
|
|
|
- texts: [],
|
|
|
- autostart: false,
|
|
|
- autobuild: false
|
|
|
-})
|
|
|
-
|
|
|
-class LiquidText {
|
|
|
- constructor(element, volatility, speed) {
|
|
|
- this.element = element
|
|
|
- this.text = element.text
|
|
|
- this.fontSize = parseInt($(element).css('font-size'))
|
|
|
- this.fontStack = $(element).css('font-family')
|
|
|
- this.fontWeight = $(element).css('font-weight')
|
|
|
- this.fontColor = $(element).css('color')
|
|
|
- this.material = globalMaterial
|
|
|
- this.hoverDuration = 0.35
|
|
|
- this.hoverEase = Linear.easeIn
|
|
|
- this.liquidVolatility = volatility
|
|
|
- this.liquidSpeed = speed
|
|
|
- this.scope = null
|
|
|
- this.blotter = globalBlotter
|
|
|
- this.blotterText = null
|
|
|
- this.onResize = this.onResize.bind(this)
|
|
|
- this.seed = 0.1
|
|
|
-
|
|
|
- window.addEventListener('resize', this.onResize)
|
|
|
-
|
|
|
- this.initialize()
|
|
|
-
|
|
|
- }
|
|
|
- initialize() {
|
|
|
- let blotter = this.blotter
|
|
|
- let text = new Blotter.Text(this.text, {
|
|
|
- family: this.fontStack,
|
|
|
- size: this.fontSize,
|
|
|
- fill: this.fontColor,
|
|
|
- weight: this.fontWeight,
|
|
|
- paddingLeft: 15,
|
|
|
- paddingRight: 15
|
|
|
- })
|
|
|
- this.blotterText = text
|
|
|
- this.material.uniforms.uSpeed.value = this.liquidSpeed
|
|
|
- this.material.uniforms.uVolatility.value = this.liquidVolatility
|
|
|
- blotter.addText(text)
|
|
|
-
|
|
|
- blotter.needsUpdate = true
|
|
|
-
|
|
|
- var scope = blotter.forText(text)
|
|
|
-
|
|
|
- this.scope = scope
|
|
|
-
|
|
|
- scope.appendTo(this.element)
|
|
|
-
|
|
|
- this.material.needsUpdate = true
|
|
|
- gsap.fromTo(this.material.uniforms.uVolatility, this.hoverDuration, {
|
|
|
- value: 0,
|
|
|
- ease: this.hoverEase
|
|
|
- }, {
|
|
|
- value: this.liquidVolatility,
|
|
|
- ease: this.hoverEase
|
|
|
- })
|
|
|
-
|
|
|
- this.element.onmouseenter = (event) => {
|
|
|
- this.scope.material.needsUpdate = true
|
|
|
- gsap.fromTo(this.scope.material.uniforms.uVolatility, this.hoverDuration, {
|
|
|
- value: 0,
|
|
|
- ease: this.hoverEase
|
|
|
- }, {
|
|
|
- value: this.liquidVolatility + 0.04,
|
|
|
- ease: this.hoverEase
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- this.element.onmouseleave = (event) => {
|
|
|
- gsap.fromTo(this.scope.material.uniforms.uVolatility, this.hoverDuration, {
|
|
|
- value: this.scope.material.uniforms.uVolatility.value,
|
|
|
- ease: this.hoverEase
|
|
|
- }, {
|
|
|
- value: this.liquidVolatility,
|
|
|
- ease: this.hoverEase,
|
|
|
- onComplete: () => {
|
|
|
- this.scope.material.needsUpdate = true
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- stop() {
|
|
|
- this.blotter.stop()
|
|
|
- }
|
|
|
- start() {
|
|
|
- this.blotter.start()
|
|
|
- }
|
|
|
- onResize() {
|
|
|
- let text = this.blotterText
|
|
|
- let time = 100
|
|
|
- let timer
|
|
|
- if(timer) clearTimeout(timer)
|
|
|
- timer = setTimeout(() => {
|
|
|
- text.properties.size = parseInt($(this.element).css('font-size'))
|
|
|
- text.needsUpdate = true
|
|
|
- }, time, event)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function displayIndexWhenReady() {
|
|
|
- globalBlotter.on('update', () => {
|
|
|
- if (!indexIsReady) {
|
|
|
- indexIsReady = true
|
|
|
- $('#loader-index').fadeOut(1400)
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-function waitForWebfonts(fonts, callback) {
|
|
|
- var loadedFonts = 0
|
|
|
- for (var i = 0, l = fonts.length; i < l; ++i) {
|
|
|
- ((font) => {
|
|
|
- var node = document.createElement('span')
|
|
|
- // Characters that vary significantly among different fonts
|
|
|
- node.innerHTML = 'giItT1WQy@!-/#'
|
|
|
- // Visible - so we can measure it - but not on the screen
|
|
|
- node.style.position = 'absolute'
|
|
|
- node.style.left = '-10000px'
|
|
|
- node.style.top = '-10000px'
|
|
|
- // Large font size makes even subtle changes obvious
|
|
|
- node.style.fontSize = '300px'
|
|
|
- // Reset any font properties
|
|
|
- node.style.fontFamily = 'sans-serif'
|
|
|
- node.style.fontVariant = 'normal'
|
|
|
- node.style.fontStyle = 'normal'
|
|
|
- node.style.fontWeight = 'normal'
|
|
|
- node.style.letterSpacing = '0'
|
|
|
- document.body.appendChild(node)
|
|
|
-
|
|
|
- // Remember width with no applied web font
|
|
|
- var width = node.offsetWidth
|
|
|
-
|
|
|
- node.style.fontFamily = font + ', sans-serif'
|
|
|
-
|
|
|
- var interval
|
|
|
-
|
|
|
- function checkFont() {
|
|
|
- // Compare current width with original width
|
|
|
- if (node && node.offsetWidth != width) {
|
|
|
- ++loadedFonts
|
|
|
- node.parentNode.removeChild(node)
|
|
|
- node = null
|
|
|
- }
|
|
|
-
|
|
|
- // If all fonts have been loaded
|
|
|
- if (loadedFonts >= fonts.length) {
|
|
|
- if (interval) {
|
|
|
- clearInterval(interval)
|
|
|
- }
|
|
|
- if (loadedFonts == fonts.length) {
|
|
|
- callback()
|
|
|
- return true
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (!checkFont()) {
|
|
|
- interval = setInterval(checkFont, 50)
|
|
|
- }
|
|
|
- })(fonts[i])
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
// display project grid
|
|
|
function toggleCategory(category) {
|
|
|
@@ -756,12 +565,43 @@ function filterWhenEntering() {
|
|
|
|
|
|
// display reader
|
|
|
function displayReader() {
|
|
|
- $('.owl-carousel').owlCarousel()
|
|
|
- // initCarrousel()
|
|
|
+ const swiper = new Swiper('.swiper', {
|
|
|
+ // Optional parameters
|
|
|
+ loop: true,
|
|
|
+ // Navigation arrows
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.swiper-button-next',
|
|
|
+ prevEl: '.swiper-button-prev',
|
|
|
+ },
|
|
|
+
|
|
|
+ });
|
|
|
+ $('#cover-image img, .project-image').click( function(event) {
|
|
|
+ const totalImg = $('img')
|
|
|
+ let indexImg = 0
|
|
|
+ for (let img of totalImg) {
|
|
|
+ if (event.target === img) { break }
|
|
|
+ indexImg++
|
|
|
+ }
|
|
|
+ swiper.slideToLoop(indexImg - 1)
|
|
|
+ $('body').css('overflow-y', 'hidden');
|
|
|
+ swiper.el.style.display = "block";
|
|
|
+ setTimeout(() => {
|
|
|
+ swiper.el.style.opacity = "1";
|
|
|
+ }, 10);
|
|
|
+ })
|
|
|
+ $('#close-carousel').click( () => {
|
|
|
+ $('body').css('overflow-y', 'auto');
|
|
|
+ swiper.el.style.opacity = "0";
|
|
|
+ setTimeout(() => {
|
|
|
+ swiper.el.style.display = "none";
|
|
|
+ }, 300);
|
|
|
+ })
|
|
|
$('header').fadeOut()
|
|
|
projectTitleIsScrolling = false
|
|
|
checkTitleAutoScroll()
|
|
|
|
|
|
+
|
|
|
+
|
|
|
let isProjectHeaderDisplayed = false
|
|
|
|
|
|
$(window).scroll( () => {
|
|
|
@@ -822,55 +662,6 @@ function checkTitleAutoScroll() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// function initCarrousel() {
|
|
|
-// let isCarrouselOpen = false, currentImg
|
|
|
-// $('#reader img').each((i, el) => {
|
|
|
-// $(el).on('click', () => {
|
|
|
-// if (!isCarrouselOpen) { displayCarrousel(el) }
|
|
|
-// })
|
|
|
-// })
|
|
|
-// $('#bg-carrousel').on('click', () => {
|
|
|
-// hideCarrousel()
|
|
|
-// })
|
|
|
-
|
|
|
-// function displayCarrousel(img) {
|
|
|
-// // if ($(img).attr('src') == $('#cover-image img').attr('src')) {
|
|
|
-// // $('#arrow-left .picto').addClass('disabled')
|
|
|
-// // } else {
|
|
|
-// // $('#arrow-left .picto').removeClass('disabled')
|
|
|
-// // }
|
|
|
-
|
|
|
-// // if ($(img).attr('src') == $('#reader img').last().attr('src')) {
|
|
|
-// // $('#arrow-right .picto').addClass('disabled')
|
|
|
-// // } else {
|
|
|
-// // $('#arrow-right .picto').removeClass('disabled')
|
|
|
-// // }
|
|
|
-
|
|
|
-// $('#reader #carrousel figure img').attr('src', $(img).attr('src'))
|
|
|
-
|
|
|
-// currentImg = $(img)
|
|
|
-
|
|
|
-// $('#arrow-left').on('click', () => {
|
|
|
-// $('#reader #carrousel figure img').attr('src', $(currentImg).parent().prev().children().first().attr('src'))
|
|
|
-// currentImg = $(currentImg).parent().prev().children().first()
|
|
|
-// })
|
|
|
-
|
|
|
-// $('#arrow-right').on('click', () => {
|
|
|
-// $('#reader #carrousel figure img').attr('src', $(currentImg).parent().next().children().first().attr('src'))
|
|
|
-// currentImg = $(currentImg).parent().next().children().first()
|
|
|
-// })
|
|
|
-
|
|
|
-// $('#carrousel').css('display', 'block')
|
|
|
-// isCarrouselOpen = true
|
|
|
-// }
|
|
|
-
|
|
|
-// function hideCarrousel() {
|
|
|
-// $('#carrousel').css('display', 'none')
|
|
|
-// isCarrouselOpen = false
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-
|
|
|
// show and hide footer
|
|
|
function displayFooter() {
|
|
|
$('footer').fadeIn()
|
Valentin