@bebranded/bb-contents 1.0.53-beta → 1.0.55-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 +71 -58
  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.53-beta
4
+ * @version 1.0.55-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.53-beta',
31
+ version: '1.0.55-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)
@@ -456,86 +456,99 @@
456
456
  console.log(`[bb-contents] Marquee ${index + 1}: INITIALISATION DE L'ANIMATION`);
457
457
 
458
458
  if (isVertical) {
459
- // Animation JavaScript pour le vertical - défilement infini smooth
459
+ // Animation JavaScript pour le vertical - défilement infini parfait
460
460
  const contentSize = finalHeight;
461
461
  const gapSize = parseInt(gap);
462
- const totalSize = contentSize + gapSize; // Taille d'un cycle complet
462
+ const totalSize = contentSize * 4 + gapSize * 3; // 4 copies
463
463
 
464
464
  // Ajuster la hauteur du scrollContainer seulement si pas en mode auto
465
465
  if (!useAutoHeight) {
466
466
  scrollContainer.style.height = totalSize + 'px';
467
467
  }
468
468
 
469
- let currentPosition = direction === 'bottom' ? -totalSize : 0;
470
- const baseStep = (parseFloat(speed) * 2) / 60; // Vitesse de base
471
- let currentStep = baseStep;
472
- let isPaused = false;
473
- let animationId = null;
474
- let lastTime = 0;
469
+ // Position initiale : commencer à la 2ème copie pour défilement infini
470
+ let currentPosition = direction === 'bottom' ? -(contentSize + gapSize) : 0;
471
+ const step = (parseFloat(speed) * 2) / 60;
472
+ let isPaused = false;
475
473
 
476
- // Fonction d'animation JavaScript optimisée pour défilement infini
477
- const animate = (currentTime) => {
478
- if (!lastTime) lastTime = currentTime;
479
- const deltaTime = currentTime - lastTime;
480
- lastTime = currentTime;
481
-
482
- if (direction === 'bottom') {
483
- currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
484
- if (currentPosition >= 0) {
485
- currentPosition = -totalSize; // Reset smooth
486
- }
487
- } else {
488
- currentPosition -= currentStep * (deltaTime / 16.67);
489
- if (currentPosition <= -totalSize) {
490
- currentPosition = 0; // Reset smooth
474
+ // Fonction d'animation JavaScript avec défilement infini parfait
475
+ const animate = () => {
476
+ if (!isPaused) {
477
+ if (direction === 'bottom') {
478
+ currentPosition += step;
479
+ // Reset quand on arrive au début de la 1ère copie
480
+ if (currentPosition >= 0) {
481
+ currentPosition = -(contentSize + gapSize);
482
+ }
483
+ } else {
484
+ currentPosition -= step;
485
+ // Reset quand on arrive au début de la 4ème copie
486
+ if (currentPosition <= -(3 * (contentSize + gapSize))) {
487
+ currentPosition = -(2 * (contentSize + gapSize));
488
+ }
491
489
  }
490
+
491
+ scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
492
492
  }
493
-
494
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
495
- animationId = requestAnimationFrame(animate);
496
- };
497
-
498
- // Démarrer l'animation
499
- animationId = requestAnimationFrame(animate);
493
+ requestAnimationFrame(animate);
494
+ };
495
+
496
+ // Démarrer l'animation
497
+ animate();
498
+
499
+ // Pause au survol simple
500
+ element.addEventListener('mouseenter', function() {
501
+ isPaused = true;
502
+ });
503
+ element.addEventListener('mouseleave', function() {
504
+ isPaused = false;
505
+ });
500
506
 
501
507
  // Marquee vertical créé avec animation JS
502
508
  } else {
503
- // Animation JavaScript pour l'horizontal (comme le vertical pour éviter les saccades)
509
+ // Animation JavaScript pour l'horizontal - défilement infini parfait
504
510
  const contentSize = finalWidth;
505
- const totalSize = contentSize * 4 + parseInt(gap) * 3;
511
+ const gapSize = parseInt(gap);
512
+ const totalSize = contentSize * 4 + gapSize * 3; // 4 copies
506
513
  scrollContainer.style.width = totalSize + 'px';
507
514
 
508
- let currentPosition = direction === 'right' ? -contentSize - parseInt(gap) : 0;
509
- const baseStep = (parseFloat(speed) * 0.5) / 60; // Vitesse de base
510
- let currentStep = baseStep;
515
+ // Position initiale : commencer à la 2ème copie pour défilement infini
516
+ let currentPosition = direction === 'right' ? -(contentSize + gapSize) : 0;
517
+ const step = (parseFloat(speed) * 0.5) / 60; // Vitesse réduite pour l'horizontal
511
518
  let isPaused = false;
512
- let animationId = null;
513
- let lastTime = 0;
514
519
 
515
- // Fonction d'animation JavaScript optimisée
516
- const animate = (currentTime) => {
517
- if (!lastTime) lastTime = currentTime;
518
- const deltaTime = currentTime - lastTime;
519
- lastTime = currentTime;
520
-
521
- if (direction === 'right') {
522
- currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
523
- if (currentPosition >= 0) {
524
- currentPosition = -contentSize - parseInt(gap);
525
- }
526
- } else {
527
- currentPosition -= currentStep * (deltaTime / 16.67);
528
- if (currentPosition <= -contentSize - parseInt(gap)) {
529
- currentPosition = 0;
520
+ // Fonction d'animation JavaScript avec défilement infini parfait
521
+ const animate = () => {
522
+ if (!isPaused) {
523
+ if (direction === 'right') {
524
+ currentPosition += step;
525
+ // Reset quand on arrive au début de la 1ère copie
526
+ if (currentPosition >= 0) {
527
+ currentPosition = -(contentSize + gapSize);
528
+ }
529
+ } else {
530
+ currentPosition -= step;
531
+ // Reset quand on arrive au début de la 4ème copie
532
+ if (currentPosition <= -(3 * (contentSize + gapSize))) {
533
+ currentPosition = -(2 * (contentSize + gapSize));
534
+ }
530
535
  }
536
+
537
+ scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
531
538
  }
532
-
533
- scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
534
- animationId = requestAnimationFrame(animate);
539
+ requestAnimationFrame(animate);
535
540
  };
536
541
 
537
542
  // Démarrer l'animation
538
- animationId = requestAnimationFrame(animate);
543
+ animate();
544
+
545
+ // Pause au survol simple
546
+ element.addEventListener('mouseenter', function() {
547
+ isPaused = true;
548
+ });
549
+ element.addEventListener('mouseleave', function() {
550
+ isPaused = false;
551
+ });
539
552
 
540
553
  // Marquee horizontal créé avec animation JS
541
554
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.53-beta",
3
+ "version": "1.0.55-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {