@bebranded/bb-contents 1.0.51-beta → 1.0.53-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.
- package/bb-contents.js +16 -90
- 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.
|
|
4
|
+
* @version 1.0.53-beta
|
|
5
5
|
* @author BeBranded
|
|
6
6
|
* @license MIT
|
|
7
7
|
* @website https://www.bebranded.xyz
|
|
@@ -19,10 +19,16 @@
|
|
|
19
19
|
console.warn('BeBranded Contents est déjà chargé');
|
|
20
20
|
return;
|
|
21
21
|
}
|
|
22
|
+
|
|
23
|
+
// Vérifier si la version a déjà été affichée
|
|
24
|
+
if (window._bbContentsVersionDisplayed) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
window._bbContentsVersionDisplayed = true;
|
|
22
28
|
|
|
23
29
|
// Configuration
|
|
24
30
|
const config = {
|
|
25
|
-
version: '1.0.
|
|
31
|
+
version: '1.0.53-beta',
|
|
26
32
|
debug: false, // Debug désactivé
|
|
27
33
|
prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
|
|
28
34
|
youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
|
|
@@ -282,7 +288,6 @@
|
|
|
282
288
|
// Récupérer les options
|
|
283
289
|
const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
|
|
284
290
|
const direction = bbContents._getAttr(element, 'bb-marquee-direction') || 'left';
|
|
285
|
-
const pauseOnHover = bbContents._getAttr(element, 'bb-marquee-pause');
|
|
286
291
|
const gap = bbContents._getAttr(element, 'bb-marquee-gap') || '50';
|
|
287
292
|
const orientation = bbContents._getAttr(element, 'bb-marquee-orientation') || 'horizontal';
|
|
288
293
|
const height = bbContents._getAttr(element, 'bb-marquee-height') || '300';
|
|
@@ -451,23 +456,24 @@
|
|
|
451
456
|
console.log(`[bb-contents] Marquee ${index + 1}: INITIALISATION DE L'ANIMATION`);
|
|
452
457
|
|
|
453
458
|
if (isVertical) {
|
|
454
|
-
// Animation JavaScript pour le vertical
|
|
459
|
+
// Animation JavaScript pour le vertical - défilement infini smooth
|
|
455
460
|
const contentSize = finalHeight;
|
|
456
|
-
const
|
|
461
|
+
const gapSize = parseInt(gap);
|
|
462
|
+
const totalSize = contentSize + gapSize; // Taille d'un cycle complet
|
|
457
463
|
|
|
458
464
|
// Ajuster la hauteur du scrollContainer seulement si pas en mode auto
|
|
459
465
|
if (!useAutoHeight) {
|
|
460
466
|
scrollContainer.style.height = totalSize + 'px';
|
|
461
467
|
}
|
|
462
468
|
|
|
463
|
-
let currentPosition = direction === 'bottom' ? -
|
|
469
|
+
let currentPosition = direction === 'bottom' ? -totalSize : 0;
|
|
464
470
|
const baseStep = (parseFloat(speed) * 2) / 60; // Vitesse de base
|
|
465
471
|
let currentStep = baseStep;
|
|
466
472
|
let isPaused = false;
|
|
467
473
|
let animationId = null;
|
|
468
474
|
let lastTime = 0;
|
|
469
475
|
|
|
470
|
-
// Fonction d'animation JavaScript optimisée
|
|
476
|
+
// Fonction d'animation JavaScript optimisée pour défilement infini
|
|
471
477
|
const animate = (currentTime) => {
|
|
472
478
|
if (!lastTime) lastTime = currentTime;
|
|
473
479
|
const deltaTime = currentTime - lastTime;
|
|
@@ -476,12 +482,12 @@
|
|
|
476
482
|
if (direction === 'bottom') {
|
|
477
483
|
currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
|
|
478
484
|
if (currentPosition >= 0) {
|
|
479
|
-
currentPosition = -
|
|
485
|
+
currentPosition = -totalSize; // Reset smooth
|
|
480
486
|
}
|
|
481
487
|
} else {
|
|
482
488
|
currentPosition -= currentStep * (deltaTime / 16.67);
|
|
483
|
-
if (currentPosition <= -
|
|
484
|
-
currentPosition = 0;
|
|
489
|
+
if (currentPosition <= -totalSize) {
|
|
490
|
+
currentPosition = 0; // Reset smooth
|
|
485
491
|
}
|
|
486
492
|
}
|
|
487
493
|
|
|
@@ -493,46 +499,6 @@
|
|
|
493
499
|
animationId = requestAnimationFrame(animate);
|
|
494
500
|
|
|
495
501
|
// Marquee vertical créé avec animation JS
|
|
496
|
-
|
|
497
|
-
// Pause au survol avec transition fluide CSS + JS
|
|
498
|
-
if (pauseOnHover === 'true') {
|
|
499
|
-
// Transition fluide avec easing naturel
|
|
500
|
-
const transitionSpeed = (targetSpeed, duration = 300) => {
|
|
501
|
-
const startSpeed = currentStep;
|
|
502
|
-
const speedDiff = targetSpeed - startSpeed;
|
|
503
|
-
const startTime = performance.now();
|
|
504
|
-
|
|
505
|
-
// Easing naturel
|
|
506
|
-
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
|
|
507
|
-
const easeInCubic = (t) => t * t * t;
|
|
508
|
-
|
|
509
|
-
const animateTransition = (currentTime) => {
|
|
510
|
-
const elapsed = currentTime - startTime;
|
|
511
|
-
const progress = Math.min(elapsed / duration, 1);
|
|
512
|
-
|
|
513
|
-
// Easing différent selon la direction
|
|
514
|
-
const easedProgress = targetSpeed === 0 ?
|
|
515
|
-
easeOutCubic(progress) : easeInCubic(progress);
|
|
516
|
-
|
|
517
|
-
currentStep = startSpeed + speedDiff * easedProgress;
|
|
518
|
-
|
|
519
|
-
if (progress < 1) {
|
|
520
|
-
requestAnimationFrame(animateTransition);
|
|
521
|
-
} else {
|
|
522
|
-
currentStep = targetSpeed;
|
|
523
|
-
}
|
|
524
|
-
};
|
|
525
|
-
|
|
526
|
-
requestAnimationFrame(animateTransition);
|
|
527
|
-
};
|
|
528
|
-
|
|
529
|
-
element.addEventListener('mouseenter', function() {
|
|
530
|
-
transitionSpeed(0); // Ralentir jusqu'à 0
|
|
531
|
-
});
|
|
532
|
-
element.addEventListener('mouseleave', function() {
|
|
533
|
-
transitionSpeed(baseStep); // Revenir à la vitesse normale
|
|
534
|
-
});
|
|
535
|
-
}
|
|
536
502
|
} else {
|
|
537
503
|
// Animation JavaScript pour l'horizontal (comme le vertical pour éviter les saccades)
|
|
538
504
|
const contentSize = finalWidth;
|
|
@@ -572,46 +538,6 @@
|
|
|
572
538
|
animationId = requestAnimationFrame(animate);
|
|
573
539
|
|
|
574
540
|
// Marquee horizontal créé avec animation JS
|
|
575
|
-
|
|
576
|
-
// Pause au survol avec transition fluide CSS + JS
|
|
577
|
-
if (pauseOnHover === 'true') {
|
|
578
|
-
// Transition fluide avec easing naturel
|
|
579
|
-
const transitionSpeed = (targetSpeed, duration = 300) => {
|
|
580
|
-
const startSpeed = currentStep;
|
|
581
|
-
const speedDiff = targetSpeed - startSpeed;
|
|
582
|
-
const startTime = performance.now();
|
|
583
|
-
|
|
584
|
-
// Easing naturel
|
|
585
|
-
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
|
|
586
|
-
const easeInCubic = (t) => t * t * t;
|
|
587
|
-
|
|
588
|
-
const animateTransition = (currentTime) => {
|
|
589
|
-
const elapsed = currentTime - startTime;
|
|
590
|
-
const progress = Math.min(elapsed / duration, 1);
|
|
591
|
-
|
|
592
|
-
// Easing différent selon la direction
|
|
593
|
-
const easedProgress = targetSpeed === 0 ?
|
|
594
|
-
easeOutCubic(progress) : easeInCubic(progress);
|
|
595
|
-
|
|
596
|
-
currentStep = startSpeed + speedDiff * easedProgress;
|
|
597
|
-
|
|
598
|
-
if (progress < 1) {
|
|
599
|
-
requestAnimationFrame(animateTransition);
|
|
600
|
-
} else {
|
|
601
|
-
currentStep = targetSpeed;
|
|
602
|
-
}
|
|
603
|
-
};
|
|
604
|
-
|
|
605
|
-
requestAnimationFrame(animateTransition);
|
|
606
|
-
};
|
|
607
|
-
|
|
608
|
-
element.addEventListener('mouseenter', function() {
|
|
609
|
-
transitionSpeed(0); // Ralentir jusqu'à 0
|
|
610
|
-
});
|
|
611
|
-
element.addEventListener('mouseleave', function() {
|
|
612
|
-
transitionSpeed(baseStep); // Revenir à la vitesse normale
|
|
613
|
-
});
|
|
614
|
-
}
|
|
615
541
|
}
|
|
616
542
|
});
|
|
617
543
|
};
|