début corrections 2024, ajout d'un carousel dans les lecteurs de projets, suppression des animations de l'index

2024-03-05 00:05:41 +01:00
parent 5d90d88ae5
commit 16b7135b03
13 changed files with 190 additions and 480 deletions
@@ -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()