@bebranded/bb-contents 1.0.52-beta → 1.0.54-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 +57 -133
  2. package/package.json +1 -1
package/bb-contents.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * BeBranded Contents
3
3
  * Contenus additionnels français pour Webflow
4
- * @version 1.0.52-beta
4
+ * @version 1.0.54-beta
5
5
  * @author BeBranded
6
6
  * @license MIT
7
7
  * @website https://www.bebranded.xyz
@@ -28,7 +28,7 @@
28
28
 
29
29
  // Configuration
30
30
  const config = {
31
- version: '1.0.52-beta',
31
+ version: '1.0.54-beta',
32
32
  debug: false, // Debug désactivé
33
33
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
34
34
  youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
@@ -288,7 +288,6 @@
288
288
  // Récupérer les options
289
289
  const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
290
290
  const direction = bbContents._getAttr(element, 'bb-marquee-direction') || 'left';
291
- const pauseOnHover = bbContents._getAttr(element, 'bb-marquee-pause');
292
291
  const gap = bbContents._getAttr(element, 'bb-marquee-gap') || '50';
293
292
  const orientation = bbContents._getAttr(element, 'bb-marquee-orientation') || 'horizontal';
294
293
  const height = bbContents._getAttr(element, 'bb-marquee-height') || '300';
@@ -457,168 +456,93 @@
457
456
  console.log(`[bb-contents] Marquee ${index + 1}: INITIALISATION DE L'ANIMATION`);
458
457
 
459
458
  if (isVertical) {
460
- // Animation JavaScript pour le vertical - défilement infini smooth
459
+ // Animation JavaScript pour le vertical - version 1.0.33-beta
461
460
  const contentSize = finalHeight;
462
- const gapSize = parseInt(gap);
463
- const totalSize = contentSize + gapSize; // Taille d'un cycle complet
461
+ const totalSize = contentSize * 4 + parseInt(gap) * 3; // 4 copies au lieu de 3
464
462
 
465
463
  // Ajuster la hauteur du scrollContainer seulement si pas en mode auto
466
464
  if (!useAutoHeight) {
467
465
  scrollContainer.style.height = totalSize + 'px';
468
466
  }
469
467
 
470
- let currentPosition = direction === 'bottom' ? -totalSize : 0;
471
- const baseStep = (parseFloat(speed) * 2) / 60; // Vitesse de base
472
- let currentStep = baseStep;
473
- let isPaused = false;
474
- let animationId = null;
475
- let lastTime = 0;
468
+ let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
469
+ const step = (parseFloat(speed) * 2) / 60; // Vitesse différente
470
+ let isPaused = false;
476
471
 
477
- // Fonction d'animation JavaScript optimisée pour défilement infini
478
- const animate = (currentTime) => {
479
- if (!lastTime) lastTime = currentTime;
480
- const deltaTime = currentTime - lastTime;
481
- lastTime = currentTime;
482
-
483
- if (direction === 'bottom') {
484
- currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
485
- if (currentPosition >= 0) {
486
- currentPosition = -totalSize; // Reset smooth
487
- }
488
- } else {
489
- currentPosition -= currentStep * (deltaTime / 16.67);
490
- if (currentPosition <= -totalSize) {
491
- currentPosition = 0; // Reset smooth
492
- }
493
- }
494
-
495
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
496
- animationId = requestAnimationFrame(animate);
497
- };
498
-
499
- // Démarrer l'animation
500
- animationId = requestAnimationFrame(animate);
501
-
502
- // Marquee vertical créé avec animation JS
503
-
504
- // Pause au survol avec transition fluide CSS + JS
505
- if (pauseOnHover === 'true') {
506
- // Transition fluide avec easing naturel
507
- const transitionSpeed = (targetSpeed, duration = 300) => {
508
- const startSpeed = currentStep;
509
- const speedDiff = targetSpeed - startSpeed;
510
- const startTime = performance.now();
511
-
512
- // Easing naturel
513
- const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
514
- const easeInCubic = (t) => t * t * t;
515
-
516
- const animateTransition = (currentTime) => {
517
- const elapsed = currentTime - startTime;
518
- const progress = Math.min(elapsed / duration, 1);
519
-
520
- // Easing différent selon la direction
521
- const easedProgress = targetSpeed === 0 ?
522
- easeOutCubic(progress) : easeInCubic(progress);
523
-
524
- currentStep = startSpeed + speedDiff * easedProgress;
525
-
526
- if (progress < 1) {
527
- requestAnimationFrame(animateTransition);
528
- } else {
529
- currentStep = targetSpeed;
472
+ // Fonction d'animation JavaScript
473
+ const animate = () => {
474
+ if (!isPaused) {
475
+ if (direction === 'bottom') {
476
+ currentPosition += step;
477
+ if (currentPosition >= 0) {
478
+ currentPosition = -contentSize - parseInt(gap);
479
+ }
480
+ } else {
481
+ currentPosition -= step;
482
+ if (currentPosition <= -contentSize - parseInt(gap)) {
483
+ currentPosition = 0;
530
484
  }
531
- };
485
+ }
532
486
 
533
- requestAnimationFrame(animateTransition);
534
- };
535
-
487
+ scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
488
+ }
489
+ requestAnimationFrame(animate);
490
+ };
491
+
492
+ // Démarrer l'animation
493
+ animate();
494
+
495
+ // Pause au survol simple
536
496
  element.addEventListener('mouseenter', function() {
537
- transitionSpeed(0); // Ralentir jusqu'à 0
497
+ isPaused = true;
538
498
  });
539
499
  element.addEventListener('mouseleave', function() {
540
- transitionSpeed(baseStep); // Revenir à la vitesse normale
500
+ isPaused = false;
541
501
  });
542
- }
502
+
503
+ // Marquee vertical créé avec animation JS
543
504
  } else {
544
- // Animation JavaScript pour l'horizontal (comme le vertical pour éviter les saccades)
505
+ // Animation JavaScript pour l'horizontal - version 1.0.33-beta
545
506
  const contentSize = finalWidth;
546
507
  const totalSize = contentSize * 4 + parseInt(gap) * 3;
547
508
  scrollContainer.style.width = totalSize + 'px';
548
509
 
549
510
  let currentPosition = direction === 'right' ? -contentSize - parseInt(gap) : 0;
550
- const baseStep = (parseFloat(speed) * 0.5) / 60; // Vitesse de base
551
- let currentStep = baseStep;
511
+ const step = (parseFloat(speed) * 0.5) / 60; // Vitesse réduite pour l'horizontal
552
512
  let isPaused = false;
553
- let animationId = null;
554
- let lastTime = 0;
555
513
 
556
- // Fonction d'animation JavaScript optimisée
557
- const animate = (currentTime) => {
558
- if (!lastTime) lastTime = currentTime;
559
- const deltaTime = currentTime - lastTime;
560
- lastTime = currentTime;
561
-
562
- if (direction === 'right') {
563
- currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
564
- if (currentPosition >= 0) {
565
- currentPosition = -contentSize - parseInt(gap);
566
- }
567
- } else {
568
- currentPosition -= currentStep * (deltaTime / 16.67);
569
- if (currentPosition <= -contentSize - parseInt(gap)) {
570
- currentPosition = 0;
514
+ // Fonction d'animation JavaScript
515
+ const animate = () => {
516
+ if (!isPaused) {
517
+ if (direction === 'right') {
518
+ currentPosition += step;
519
+ if (currentPosition >= 0) {
520
+ currentPosition = -contentSize - parseInt(gap);
521
+ }
522
+ } else {
523
+ currentPosition -= step;
524
+ if (currentPosition <= -contentSize - parseInt(gap)) {
525
+ currentPosition = 0;
526
+ }
571
527
  }
528
+
529
+ scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
572
530
  }
573
-
574
- scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
575
- animationId = requestAnimationFrame(animate);
531
+ requestAnimationFrame(animate);
576
532
  };
577
533
 
578
534
  // Démarrer l'animation
579
- animationId = requestAnimationFrame(animate);
535
+ animate();
580
536
 
581
- // Marquee horizontal créé avec animation JS
582
-
583
- // Pause au survol avec transition fluide CSS + JS
584
- if (pauseOnHover === 'true') {
585
- // Transition fluide avec easing naturel
586
- const transitionSpeed = (targetSpeed, duration = 300) => {
587
- const startSpeed = currentStep;
588
- const speedDiff = targetSpeed - startSpeed;
589
- const startTime = performance.now();
590
-
591
- // Easing naturel
592
- const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
593
- const easeInCubic = (t) => t * t * t;
594
-
595
- const animateTransition = (currentTime) => {
596
- const elapsed = currentTime - startTime;
597
- const progress = Math.min(elapsed / duration, 1);
598
-
599
- // Easing différent selon la direction
600
- const easedProgress = targetSpeed === 0 ?
601
- easeOutCubic(progress) : easeInCubic(progress);
602
-
603
- currentStep = startSpeed + speedDiff * easedProgress;
604
-
605
- if (progress < 1) {
606
- requestAnimationFrame(animateTransition);
607
- } else {
608
- currentStep = targetSpeed;
609
- }
610
- };
611
-
612
- requestAnimationFrame(animateTransition);
613
- };
614
-
537
+ // Pause au survol simple
615
538
  element.addEventListener('mouseenter', function() {
616
- transitionSpeed(0); // Ralentir jusqu'à 0
539
+ isPaused = true;
617
540
  });
618
541
  element.addEventListener('mouseleave', function() {
619
- transitionSpeed(baseStep); // Revenir à la vitesse normale
542
+ isPaused = false;
620
543
  });
621
- }
544
+
545
+ // Marquee horizontal créé avec animation JS
622
546
  }
623
547
  });
624
548
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.52-beta",
3
+ "version": "1.0.54-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {