@bebranded/bb-contents 1.0.38-beta → 1.0.39-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/bb-contents.js +52 -53
  2. package/package.json +1 -1
package/bb-contents.js CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  // Configuration
19
19
  const config = {
20
- version: '1.0.38-beta',
20
+ version: '1.0.39-beta',
21
21
  debug: true, // Activé temporairement pour debug
22
22
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
23
23
  i18n: {
@@ -432,6 +432,7 @@
432
432
  gap: ${gap}px;
433
433
  ${isVertical ? '' : 'white-space: nowrap;'}
434
434
  flex-shrink: 0;
435
+ transition: transform 0.1s ease-out;
435
436
  `;
436
437
 
437
438
  // Créer le bloc de contenu principal
@@ -524,67 +525,66 @@
524
525
  const baseStep = (parseFloat(speed) * 2) / 60; // Vitesse de base
525
526
  let currentStep = baseStep;
526
527
  let isPaused = false;
527
- let pauseTransition = null;
528
+ let animationId = null;
529
+ let lastTime = 0;
528
530
 
529
- // Fonction d'animation JavaScript
530
- const animate = () => {
531
+ // Fonction d'animation JavaScript optimisée
532
+ const animate = (currentTime) => {
533
+ if (!lastTime) lastTime = currentTime;
534
+ const deltaTime = currentTime - lastTime;
535
+ lastTime = currentTime;
536
+
531
537
  if (direction === 'bottom') {
532
- currentPosition += currentStep;
538
+ currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
533
539
  if (currentPosition >= 0) {
534
540
  currentPosition = -contentSize - parseInt(gap);
535
541
  }
536
542
  } else {
537
- currentPosition -= currentStep;
543
+ currentPosition -= currentStep * (deltaTime / 16.67);
538
544
  if (currentPosition <= -contentSize - parseInt(gap)) {
539
545
  currentPosition = 0;
540
546
  }
541
547
  }
542
548
 
543
549
  scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
544
- requestAnimationFrame(animate);
550
+ animationId = requestAnimationFrame(animate);
545
551
  };
546
552
 
547
553
  // Démarrer l'animation
548
- animate();
554
+ animationId = requestAnimationFrame(animate);
549
555
 
550
556
  bbContents.utils.log('Marquee vertical créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px', 'hauteur-wrapper:', height + 'px');
551
557
 
552
- // Pause au survol avec transition douce
558
+ // Pause au survol avec transition fluide CSS + JS
553
559
  if (pauseOnHover === 'true') {
554
- // Fonction de transition de vitesse
555
- const transitionSpeed = (targetSpeed, duration = 400) => {
556
- if (pauseTransition) {
557
- cancelAnimationFrame(pauseTransition);
558
- }
559
-
560
+ // Transition fluide avec easing naturel
561
+ const transitionSpeed = (targetSpeed, duration = 300) => {
560
562
  const startSpeed = currentStep;
561
563
  const speedDiff = targetSpeed - startSpeed;
562
564
  const startTime = performance.now();
563
565
 
564
- const easeOut = (t) => 1 - Math.pow(1 - t, 3);
565
- const easeIn = (t) => t * t * t;
566
+ // Easing naturel
567
+ const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
568
+ const easeInCubic = (t) => t * t * t;
566
569
 
567
570
  const animateTransition = (currentTime) => {
568
571
  const elapsed = currentTime - startTime;
569
572
  const progress = Math.min(elapsed / duration, 1);
570
573
 
571
- if (targetSpeed === 0) {
572
- // Ralentir (ease-out)
573
- currentStep = startSpeed + speedDiff * easeOut(progress);
574
- } else {
575
- // Accélérer (ease-in)
576
- currentStep = startSpeed + speedDiff * easeIn(progress);
577
- }
574
+ // Easing différent selon la direction
575
+ const easedProgress = targetSpeed === 0 ?
576
+ easeOutCubic(progress) : easeInCubic(progress);
577
+
578
+ currentStep = startSpeed + speedDiff * easedProgress;
578
579
 
579
580
  if (progress < 1) {
580
- pauseTransition = requestAnimationFrame(animateTransition);
581
+ requestAnimationFrame(animateTransition);
581
582
  } else {
582
583
  currentStep = targetSpeed;
583
- pauseTransition = null;
584
584
  }
585
585
  };
586
586
 
587
- pauseTransition = requestAnimationFrame(animateTransition);
587
+ requestAnimationFrame(animateTransition);
588
588
  };
589
589
 
590
590
  element.addEventListener('mouseenter', function() {
@@ -604,67 +604,66 @@
604
604
  const baseStep = (parseFloat(speed) * 0.5) / 60; // Vitesse de base
605
605
  let currentStep = baseStep;
606
606
  let isPaused = false;
607
- let pauseTransition = null;
607
+ let animationId = null;
608
+ let lastTime = 0;
608
609
 
609
- // Fonction d'animation JavaScript
610
- const animate = () => {
610
+ // Fonction d'animation JavaScript optimisée
611
+ const animate = (currentTime) => {
612
+ if (!lastTime) lastTime = currentTime;
613
+ const deltaTime = currentTime - lastTime;
614
+ lastTime = currentTime;
615
+
611
616
  if (direction === 'right') {
612
- currentPosition += currentStep;
617
+ currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
613
618
  if (currentPosition >= 0) {
614
619
  currentPosition = -contentSize - parseInt(gap);
615
620
  }
616
621
  } else {
617
- currentPosition -= currentStep;
622
+ currentPosition -= currentStep * (deltaTime / 16.67);
618
623
  if (currentPosition <= -contentSize - parseInt(gap)) {
619
624
  currentPosition = 0;
620
625
  }
621
626
  }
622
627
 
623
628
  scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
624
- requestAnimationFrame(animate);
629
+ animationId = requestAnimationFrame(animate);
625
630
  };
626
631
 
627
632
  // Démarrer l'animation
628
- animate();
633
+ animationId = requestAnimationFrame(animate);
629
634
 
630
635
  bbContents.utils.log('Marquee horizontal créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px');
631
636
 
632
- // Pause au survol avec transition douce
637
+ // Pause au survol avec transition fluide CSS + JS
633
638
  if (pauseOnHover === 'true') {
634
- // Fonction de transition de vitesse
635
- const transitionSpeed = (targetSpeed, duration = 400) => {
636
- if (pauseTransition) {
637
- cancelAnimationFrame(pauseTransition);
638
- }
639
-
639
+ // Transition fluide avec easing naturel
640
+ const transitionSpeed = (targetSpeed, duration = 300) => {
640
641
  const startSpeed = currentStep;
641
642
  const speedDiff = targetSpeed - startSpeed;
642
643
  const startTime = performance.now();
643
644
 
644
- const easeOut = (t) => 1 - Math.pow(1 - t, 3);
645
- const easeIn = (t) => t * t * t;
645
+ // Easing naturel
646
+ const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
647
+ const easeInCubic = (t) => t * t * t;
646
648
 
647
649
  const animateTransition = (currentTime) => {
648
650
  const elapsed = currentTime - startTime;
649
651
  const progress = Math.min(elapsed / duration, 1);
650
652
 
651
- if (targetSpeed === 0) {
652
- // Ralentir (ease-out)
653
- currentStep = startSpeed + speedDiff * easeOut(progress);
654
- } else {
655
- // Accélérer (ease-in)
656
- currentStep = startSpeed + speedDiff * easeIn(progress);
657
- }
653
+ // Easing différent selon la direction
654
+ const easedProgress = targetSpeed === 0 ?
655
+ easeOutCubic(progress) : easeInCubic(progress);
656
+
657
+ currentStep = startSpeed + speedDiff * easedProgress;
658
658
 
659
659
  if (progress < 1) {
660
- pauseTransition = requestAnimationFrame(animateTransition);
660
+ requestAnimationFrame(animateTransition);
661
661
  } else {
662
662
  currentStep = targetSpeed;
663
- pauseTransition = null;
664
663
  }
665
664
  };
666
665
 
667
- pauseTransition = requestAnimationFrame(animateTransition);
666
+ requestAnimationFrame(animateTransition);
668
667
  };
669
668
 
670
669
  element.addEventListener('mouseenter', function() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.38-beta",
3
+ "version": "1.0.39-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {