@total_onion/onion-library 2.0.99 → 2.0.100
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.
|
@@ -63,7 +63,7 @@ function scrollingbannerJs(block) {
|
|
|
63
63
|
const inner = bannerElement.querySelector(
|
|
64
64
|
'.scrolling-banner-v3__inner'
|
|
65
65
|
);
|
|
66
|
-
const speed = bannerElement.dataset.speed ??
|
|
66
|
+
const speed = bannerElement.dataset.speed ?? 3;
|
|
67
67
|
|
|
68
68
|
const wrapperWidth = wrapper.clientWidth;
|
|
69
69
|
const innerContentWidth = inner.clientWidth;
|
|
@@ -82,28 +82,34 @@ function scrollingbannerJs(block) {
|
|
|
82
82
|
newTickerContainer.classList.add('clone');
|
|
83
83
|
wrapper.appendChild(newTickerContainer);
|
|
84
84
|
|
|
85
|
-
const
|
|
86
|
-
{transform:
|
|
87
|
-
{transform:
|
|
85
|
+
const animation1 = [
|
|
86
|
+
{ transform: 'translateX(0%)' },
|
|
87
|
+
{ transform: 'translateX(-100%)' }
|
|
88
|
+
];
|
|
89
|
+
const animation2 = [
|
|
90
|
+
{ transform: 'translateX(100%)' },
|
|
91
|
+
{ transform: 'translateX(0%)' }
|
|
88
92
|
];
|
|
89
93
|
|
|
90
94
|
const time = 100000 / speed;
|
|
91
95
|
|
|
92
96
|
let timing = {
|
|
93
97
|
duration: time,
|
|
94
|
-
iterations: Infinity
|
|
95
|
-
|
|
96
|
-
let timing2 = {
|
|
97
|
-
duration: time,
|
|
98
|
-
delay: time / 2,
|
|
99
|
-
iterations: Infinity
|
|
98
|
+
iterations: Infinity,
|
|
99
|
+
fill: 'both'
|
|
100
100
|
};
|
|
101
|
+
let timing2 = timing;
|
|
101
102
|
const containers = bannerElement.querySelectorAll(
|
|
102
103
|
'.scrolling-banner-v3__container'
|
|
103
104
|
);
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
105
|
+
// Ensure initial positions are applied so content is visible immediately
|
|
106
|
+
containers[0].style.transform = 'translateX(0%)';
|
|
107
|
+
containers[1].style.transform = 'translateX(100%)';
|
|
108
|
+
// Force style application before animations start
|
|
109
|
+
void containers[0].offsetWidth;
|
|
110
|
+
|
|
111
|
+
const anim1 = containers[0].animate(animation1, timing);
|
|
112
|
+
const anim2 = containers[1].animate(animation2, timing2);
|
|
107
113
|
|
|
108
114
|
// set as initialized and store animation for a possible cleanup
|
|
109
115
|
initializedBanners.set(bannerElement, {anim1, anim2});
|
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
right: 0;
|
|
10
10
|
bottom: 0;
|
|
11
11
|
left: 0;
|
|
12
|
-
min-height:
|
|
12
|
+
min-height: 0;
|
|
13
13
|
display: flex;
|
|
14
14
|
z-index: var(--image-z-index);
|
|
15
15
|
border: calc(var(--image-border-width) / var(--desktop-design-reference) * var(--screen-width-static)) var(--image-border-style) var(--image-border-colour);
|