@bebranded/bb-contents 1.0.37-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 +115 -44
  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.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: {
@@ -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';
@@ -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
@@ -521,41 +522,76 @@
521
522
  }
522
523
 
523
524
  let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
524
- const step = (parseFloat(speed) * 2) / 60; // Vitesse différente
525
+ const baseStep = (parseFloat(speed) * 2) / 60; // Vitesse de base
526
+ let currentStep = baseStep;
525
527
  let isPaused = false;
528
+ let animationId = null;
529
+ let lastTime = 0;
526
530
 
527
- // Fonction d'animation JavaScript
528
- 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
+ // Fonction d'animation JavaScript optimisée
532
+ const animate = (currentTime) => {
533
+ if (!lastTime) lastTime = currentTime;
534
+ const deltaTime = currentTime - lastTime;
535
+ lastTime = currentTime;
536
+
537
+ if (direction === 'bottom') {
538
+ currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
539
+ if (currentPosition >= 0) {
540
+ currentPosition = -contentSize - parseInt(gap);
541
+ }
542
+ } else {
543
+ currentPosition -= currentStep * (deltaTime / 16.67);
544
+ if (currentPosition <= -contentSize - parseInt(gap)) {
545
+ currentPosition = 0;
540
546
  }
541
-
542
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
543
547
  }
544
- requestAnimationFrame(animate);
548
+
549
+ scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
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
558
+ // Pause au survol avec transition fluide CSS + JS
553
559
  if (pauseOnHover === 'true') {
560
+ // Transition fluide avec easing naturel
561
+ const transitionSpeed = (targetSpeed, duration = 300) => {
562
+ const startSpeed = currentStep;
563
+ const speedDiff = targetSpeed - startSpeed;
564
+ const startTime = performance.now();
565
+
566
+ // Easing naturel
567
+ const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
568
+ const easeInCubic = (t) => t * t * t;
569
+
570
+ const animateTransition = (currentTime) => {
571
+ const elapsed = currentTime - startTime;
572
+ const progress = Math.min(elapsed / duration, 1);
573
+
574
+ // Easing différent selon la direction
575
+ const easedProgress = targetSpeed === 0 ?
576
+ easeOutCubic(progress) : easeInCubic(progress);
577
+
578
+ currentStep = startSpeed + speedDiff * easedProgress;
579
+
580
+ if (progress < 1) {
581
+ requestAnimationFrame(animateTransition);
582
+ } else {
583
+ currentStep = targetSpeed;
584
+ }
585
+ };
586
+
587
+ 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,41 +601,76 @@
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 animationId = null;
608
+ let lastTime = 0;
570
609
 
571
- // Fonction d'animation JavaScript
572
- 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
- }
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
+
616
+ if (direction === 'right') {
617
+ currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
618
+ if (currentPosition >= 0) {
619
+ currentPosition = -contentSize - parseInt(gap);
620
+ }
621
+ } else {
622
+ currentPosition -= currentStep * (deltaTime / 16.67);
623
+ if (currentPosition <= -contentSize - parseInt(gap)) {
624
+ currentPosition = 0;
584
625
  }
585
-
586
- scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
587
626
  }
588
- requestAnimationFrame(animate);
627
+
628
+ scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
629
+ animationId = requestAnimationFrame(animate);
589
630
  };
590
631
 
591
632
  // Démarrer l'animation
592
- animate();
633
+ animationId = requestAnimationFrame(animate);
593
634
 
594
635
  bbContents.utils.log('Marquee horizontal créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px');
595
636
 
596
- // Pause au survol
637
+ // Pause au survol avec transition fluide CSS + JS
597
638
  if (pauseOnHover === 'true') {
639
+ // Transition fluide avec easing naturel
640
+ const transitionSpeed = (targetSpeed, duration = 300) => {
641
+ const startSpeed = currentStep;
642
+ const speedDiff = targetSpeed - startSpeed;
643
+ const startTime = performance.now();
644
+
645
+ // Easing naturel
646
+ const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
647
+ const easeInCubic = (t) => t * t * t;
648
+
649
+ const animateTransition = (currentTime) => {
650
+ const elapsed = currentTime - startTime;
651
+ const progress = Math.min(elapsed / duration, 1);
652
+
653
+ // Easing différent selon la direction
654
+ const easedProgress = targetSpeed === 0 ?
655
+ easeOutCubic(progress) : easeInCubic(progress);
656
+
657
+ currentStep = startSpeed + speedDiff * easedProgress;
658
+
659
+ if (progress < 1) {
660
+ requestAnimationFrame(animateTransition);
661
+ } else {
662
+ currentStep = targetSpeed;
663
+ }
664
+ };
665
+
666
+ requestAnimationFrame(animateTransition);
667
+ };
668
+
598
669
  element.addEventListener('mouseenter', function() {
599
- isPaused = true;
670
+ transitionSpeed(0); // Ralentir jusqu'à 0
600
671
  });
601
672
  element.addEventListener('mouseleave', function() {
602
- isPaused = false;
673
+ transitionSpeed(baseStep); // Revenir à la vitesse normale
603
674
  });
604
675
  }
605
676
  }
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.39-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {