@bebranded/bb-contents 1.0.37-beta → 1.0.38-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 +108 -36
  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.37-beta',
20
+ version: '1.0.38-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: {
@@ -397,7 +397,7 @@
397
397
  // Récupérer les options
398
398
  const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
399
399
  const direction = bbContents._getAttr(element, 'bb-marquee-direction') || 'left';
400
- const pauseOnHover = bbContents._getAttr(element, 'bb-marquee-pause') || 'true';
400
+ const pauseOnHover = bbContents._getAttr(element, 'bb-marquee-pause');
401
401
  const gap = bbContents._getAttr(element, 'bb-marquee-gap') || '50';
402
402
  const orientation = bbContents._getAttr(element, 'bb-marquee-orientation') || 'horizontal';
403
403
  const height = bbContents._getAttr(element, 'bb-marquee-height') || '300';
@@ -521,26 +521,26 @@
521
521
  }
522
522
 
523
523
  let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
524
- const step = (parseFloat(speed) * 2) / 60; // Vitesse différente
524
+ const baseStep = (parseFloat(speed) * 2) / 60; // Vitesse de base
525
+ let currentStep = baseStep;
525
526
  let isPaused = false;
527
+ let pauseTransition = null;
526
528
 
527
529
  // Fonction d'animation JavaScript
528
530
  const animate = () => {
529
- if (!isPaused) {
530
- if (direction === 'bottom') {
531
- currentPosition += step;
532
- if (currentPosition >= 0) {
533
- currentPosition = -contentSize - parseInt(gap);
534
- }
535
- } else {
536
- currentPosition -= step;
537
- if (currentPosition <= -contentSize - parseInt(gap)) {
538
- currentPosition = 0;
539
- }
531
+ if (direction === 'bottom') {
532
+ currentPosition += currentStep;
533
+ if (currentPosition >= 0) {
534
+ currentPosition = -contentSize - parseInt(gap);
535
+ }
536
+ } else {
537
+ currentPosition -= currentStep;
538
+ if (currentPosition <= -contentSize - parseInt(gap)) {
539
+ currentPosition = 0;
540
540
  }
541
-
542
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
543
541
  }
542
+
543
+ scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
544
544
  requestAnimationFrame(animate);
545
545
  };
546
546
 
@@ -549,13 +549,49 @@
549
549
 
550
550
  bbContents.utils.log('Marquee vertical créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px', 'hauteur-wrapper:', height + 'px');
551
551
 
552
- // Pause au survol
552
+ // Pause au survol avec transition douce
553
553
  if (pauseOnHover === 'true') {
554
+ // Fonction de transition de vitesse
555
+ const transitionSpeed = (targetSpeed, duration = 400) => {
556
+ if (pauseTransition) {
557
+ cancelAnimationFrame(pauseTransition);
558
+ }
559
+
560
+ const startSpeed = currentStep;
561
+ const speedDiff = targetSpeed - startSpeed;
562
+ const startTime = performance.now();
563
+
564
+ const easeOut = (t) => 1 - Math.pow(1 - t, 3);
565
+ const easeIn = (t) => t * t * t;
566
+
567
+ const animateTransition = (currentTime) => {
568
+ const elapsed = currentTime - startTime;
569
+ const progress = Math.min(elapsed / duration, 1);
570
+
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
+ }
578
+
579
+ if (progress < 1) {
580
+ pauseTransition = requestAnimationFrame(animateTransition);
581
+ } else {
582
+ currentStep = targetSpeed;
583
+ pauseTransition = null;
584
+ }
585
+ };
586
+
587
+ pauseTransition = requestAnimationFrame(animateTransition);
588
+ };
589
+
554
590
  element.addEventListener('mouseenter', function() {
555
- isPaused = true;
591
+ transitionSpeed(0); // Ralentir jusqu'à 0
556
592
  });
557
593
  element.addEventListener('mouseleave', function() {
558
- isPaused = false;
594
+ transitionSpeed(baseStep); // Revenir à la vitesse normale
559
595
  });
560
596
  }
561
597
  } else {
@@ -565,26 +601,26 @@
565
601
  scrollContainer.style.width = totalSize + 'px';
566
602
 
567
603
  let currentPosition = direction === 'right' ? -contentSize - parseInt(gap) : 0;
568
- const step = (parseFloat(speed) * 0.5) / 60; // Vitesse réduite pour l'horizontal
604
+ const baseStep = (parseFloat(speed) * 0.5) / 60; // Vitesse de base
605
+ let currentStep = baseStep;
569
606
  let isPaused = false;
607
+ let pauseTransition = null;
570
608
 
571
609
  // Fonction d'animation JavaScript
572
610
  const animate = () => {
573
- if (!isPaused) {
574
- if (direction === 'right') {
575
- currentPosition += step;
576
- if (currentPosition >= 0) {
577
- currentPosition = -contentSize - parseInt(gap);
578
- }
579
- } else {
580
- currentPosition -= step;
581
- if (currentPosition <= -contentSize - parseInt(gap)) {
582
- currentPosition = 0;
583
- }
611
+ if (direction === 'right') {
612
+ currentPosition += currentStep;
613
+ if (currentPosition >= 0) {
614
+ currentPosition = -contentSize - parseInt(gap);
615
+ }
616
+ } else {
617
+ currentPosition -= currentStep;
618
+ if (currentPosition <= -contentSize - parseInt(gap)) {
619
+ currentPosition = 0;
584
620
  }
585
-
586
- scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
587
621
  }
622
+
623
+ scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
588
624
  requestAnimationFrame(animate);
589
625
  };
590
626
 
@@ -593,13 +629,49 @@
593
629
 
594
630
  bbContents.utils.log('Marquee horizontal créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px');
595
631
 
596
- // Pause au survol
632
+ // Pause au survol avec transition douce
597
633
  if (pauseOnHover === 'true') {
634
+ // Fonction de transition de vitesse
635
+ const transitionSpeed = (targetSpeed, duration = 400) => {
636
+ if (pauseTransition) {
637
+ cancelAnimationFrame(pauseTransition);
638
+ }
639
+
640
+ const startSpeed = currentStep;
641
+ const speedDiff = targetSpeed - startSpeed;
642
+ const startTime = performance.now();
643
+
644
+ const easeOut = (t) => 1 - Math.pow(1 - t, 3);
645
+ const easeIn = (t) => t * t * t;
646
+
647
+ const animateTransition = (currentTime) => {
648
+ const elapsed = currentTime - startTime;
649
+ const progress = Math.min(elapsed / duration, 1);
650
+
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
+ }
658
+
659
+ if (progress < 1) {
660
+ pauseTransition = requestAnimationFrame(animateTransition);
661
+ } else {
662
+ currentStep = targetSpeed;
663
+ pauseTransition = null;
664
+ }
665
+ };
666
+
667
+ pauseTransition = requestAnimationFrame(animateTransition);
668
+ };
669
+
598
670
  element.addEventListener('mouseenter', function() {
599
- isPaused = true;
671
+ transitionSpeed(0); // Ralentir jusqu'à 0
600
672
  });
601
673
  element.addEventListener('mouseleave', function() {
602
- isPaused = false;
674
+ transitionSpeed(baseStep); // Revenir à la vitesse normale
603
675
  });
604
676
  }
605
677
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.37-beta",
3
+ "version": "1.0.38-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {