@danielleallyssa/sqs-custom-marquee 1.0.0

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 (5) hide show
  1. package/dist/sqs-custom-marquee.css +99 -0
  2. package/dist/sqs-custom-marquee.js +80 -0
  3. package/dist/sqs-custom-marquee.min.css +1 -0
  4. package/dist/sqs-custom-marquee.min.js +1 -0
  5. package/package.json +16 -0
package/dist/sqs-custom-marquee.css ADDED
@@ -0,0 +1,99 @@
1
+ @keyframes marquee-scroll {
2
+ from {
3
+ transform: translateX(0);
4
+ }
5
+ to {
6
+ transform: translateX(-50%);
7
+ }
8
+ }
9
+
10
+ .custom-marquee-wrap {
11
+ width: 100%;
12
+ overflow: hidden;
13
+ padding: 0.5rem 0;
14
+ }
15
+
16
+ .custom-marquee {
17
+ display: flex;
18
+ width: max-content;
19
+ animation: marquee-scroll var(--custom-marquee-speed, 30s) linear infinite;
20
+ }
21
+
22
+ .custom-marquee[direction-reverse="true"] {
23
+ animation-direction: reverse;
24
+ }
25
+
26
+ .custom-marquee-track {
27
+ display: flex;
28
+ align-items: center;
29
+ flex-shrink: 0;
30
+ gap: var(--custom-marquee-gap, 16px);
31
+ padding-right: var(--custom-marquee-gap, 16px);
32
+ }
33
+
34
+ .custom-marquee-wrap:not(.custom-marquee-serif) .Marquee-item {
35
+ border-radius: var(--custom-marquee-item-radius, 0);
36
+ padding: 1rem 2rem;
37
+ margin: 0;
38
+ text-transform: uppercase;
39
+ }
40
+
41
+ .custom-marquee-wrap.custom-marquee-serif .Marquee-item {
42
+ font-family: var(--custom-marquee-serif-family, serif);
43
+ font-size: var(--custom-marquee-serif-size, 3rem) !important;
44
+ padding-inline: 2rem;
45
+ }
46
+
47
+ .custom-marquee-wrap:not(.custom-marquee-serif) .Marquee-item {
48
+ font-size: var(--custom-marquee-size, 2rem);
49
+ }
50
+
51
+ .custom-marquee-wrap.custom-marquee-primary .Marquee-item {
52
+ background: var(--custom-marquee-primary-bg-color, inherit);
53
+ color: var(--custom-marquee-primary-color, inherit);
54
+ }
55
+
56
+ .custom-marquee-wrap.custom-marquee-secondary .Marquee-item {
57
+ background: var(--custom-marquee-secondary-bg-color, inherit);
58
+ color: var(--custom-marquee-secondary-color, inherit);
59
+ }
60
+
61
+ .custom-marquee-wrap.custom-marquee-tertiary .Marquee-item {
62
+ background: var(--custom-marquee-tertiary-bg-color, inherit);
63
+ color: var(--custom-marquee-tertiary-color, inherit);
64
+ }
65
+
66
+ .custom-marquee-wrap[data-link]:not([data-link=""]):hover .custom-marquee {
67
+ animation-play-state: paused;
68
+ }
69
+
70
+ .custom-marquee-wrap.custom-marquee-primary
71
+ [data-link]:not([data-link=""])
72
+ .Marquee-item:hover {
73
+ background: var(--custom-marquee-primary-bg-hover-color, inherit);
74
+ color: var(--custom-marquee-primary-hover-color, inherit);
75
+ }
76
+
77
+ .custom-marquee-wrap.custom-marquee-secondary[data-link]:not([data-link=""])
78
+ .Marquee-item:hover {
79
+ background: var(--custom-marquee-secondary-bg-hover-color, inherit);
80
+ color: var(--custom-marquee-secondary-hover-color, inherit);
81
+ }
82
+
83
+ .custom-marquee-wrap.custom-marquee-tertiary[data-link]:not([data-link=""])
84
+ .Marquee-item:hover {
85
+ background: var(--custom-marquee-tertiary-bg-hover-color, inherit);
86
+ color: var(--custom-marquee-tertiary-hover-color, inherit);
87
+ }
88
+
89
+ @media (prefers-reduced-motion: reduce) {
90
+ .custom-marquee {
91
+ animation: none;
92
+ }
93
+ }
94
+
95
+ @media screen and (min-width: 768px) {
96
+ .custom-marquee-wrap {
97
+ padding: 1.1rem 0;
98
+ }
99
+ }
package/dist/sqs-custom-marquee.js ADDED
@@ -0,0 +1,80 @@
1
+ (function () {
2
+ class Marquee {
3
+ constructor(root = document, options = {}) {
4
+ this.root = root;
5
+ this.config = {
6
+ scaleTo: 1.5,
7
+ start: "top 80%",
8
+ end: "bottom top",
9
+ ...options,
10
+ };
11
+
12
+ this.wraps = [...root.querySelectorAll(".custom-marquee-wrap")];
13
+ if (this.wraps.length === 0) return;
14
+
15
+ gsap.registerPlugin(ScrollTrigger);
16
+
17
+ this.wraps.forEach((wrap) => this.initWrap(wrap));
18
+ }
19
+
20
+ initWrap(wrap) {
21
+ const phrase = wrap.dataset.phrase || "";
22
+ const link = wrap.dataset.link || "";
23
+ const tracks = wrap.querySelectorAll(".custom-marquee-track");
24
+ const track = tracks[0];
25
+ const clone = tracks[1];
26
+
27
+ const buildTrack = () => {
28
+ track.innerHTML = "";
29
+ const minWidth = wrap.offsetWidth * 2;
30
+ let safety = 0;
31
+
32
+ while (track.scrollWidth < minWidth && safety < 200) {
33
+ const p = document.createElement("p");
34
+ p.className = "Marquee-item Marquee-item--text";
35
+ if (link) {
36
+ const a = document.createElement("a");
37
+ a.setAttribute("href", link);
38
+ a.textContent = phrase;
39
+ p.appendChild(a);
40
+ } else {
41
+ p.textContent = phrase;
42
+ }
43
+
44
+ track.appendChild(p);
45
+ safety++;
46
+ }
47
+
48
+ clone.innerHTML = track.innerHTML;
49
+ };
50
+
51
+ buildTrack();
52
+
53
+ if (wrap.hasAttribute("data-scale")) {
54
+ this.animateScale(wrap);
55
+ }
56
+
57
+ let resizeTimer;
58
+ window.addEventListener("resize", () => {
59
+ clearTimeout(resizeTimer);
60
+ resizeTimer = setTimeout(buildTrack, 200);
61
+ });
62
+ }
63
+
64
+ animateScale(wrap) {
65
+ gsap.set(wrap, { scale: 1, transformOrigin: "center center" });
66
+
67
+ gsap.to(wrap, {
68
+ scale: this.config.scaleTo,
69
+ ease: "none",
70
+ scrollTrigger: {
71
+ trigger: wrap,
72
+ start: this.config.start,
73
+ end: this.config.end,
74
+ scrub: true,
75
+ },
76
+ });
77
+ }
78
+ }
79
+ new Marquee();
80
+ })();
package/dist/sqs-custom-marquee.min.css ADDED
@@ -0,0 +1 @@
1
+ @keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.custom-marquee-wrap{width:100%;overflow:hidden;padding:.5rem 0}.custom-marquee{display:flex;width:max-content;animation:marquee-scroll var(--custom-marquee-speed,30s) linear infinite}.custom-marquee[direction-reverse=true]{animation-direction:reverse}.custom-marquee-track{display:flex;align-items:center;flex-shrink:0;gap:var(--custom-marquee-gap,16px);padding-right:var(--custom-marquee-gap,16px)}.custom-marquee-wrap:not(.custom-marquee-serif) .Marquee-item{border-radius:var(--custom-marquee-item-radius,0);padding:1rem 2rem;margin:0;text-transform:uppercase}.custom-marquee-wrap.custom-marquee-serif .Marquee-item{font-family:var(--custom-marquee-serif-family, serif);font-size:var(--custom-marquee-serif-size, 3rem)!important;padding-inline:2rem}.custom-marquee-wrap:not(.custom-marquee-serif) .Marquee-item{font-size:var(--custom-marquee-size, 2rem)}.custom-marquee-wrap.custom-marquee-primary .Marquee-item{background:var(--custom-marquee-primary-bg-color,inherit);color:var(--custom-marquee-primary-color,inherit)}.custom-marquee-wrap.custom-marquee-secondary .Marquee-item{background:var(--custom-marquee-secondary-bg-color,inherit);color:var(--custom-marquee-secondary-color,inherit)}.custom-marquee-wrap.custom-marquee-tertiary .Marquee-item{background:var(--custom-marquee-tertiary-bg-color,inherit);color:var(--custom-marquee-tertiary-color,inherit)}.custom-marquee-wrap[data-link]:not([data-link=""]):hover .custom-marquee{animation-play-state:paused}.custom-marquee-wrap.custom-marquee-primary [data-link]:not([data-link=""]) .Marquee-item:hover{background:var(--custom-marquee-primary-bg-hover-color,inherit);color:var(--custom-marquee-primary-hover-color,inherit)}.custom-marquee-wrap.custom-marquee-secondary[data-link]:not([data-link=""]) .Marquee-item:hover{background:var(--custom-marquee-secondary-bg-hover-color,inherit);color:var(--custom-marquee-secondary-hover-color,inherit)}.custom-marquee-wrap.custom-marquee-tertiary[data-link]:not([data-link=""]) .Marquee-item:hover{background:var(--custom-marquee-tertiary-bg-hover-color,inherit);color:var(--custom-marquee-tertiary-hover-color,inherit)}@media (prefers-reduced-motion:reduce){.custom-marquee{animation:none}}@media screen and (min-width:768px){.custom-marquee-wrap{padding:1.1rem 0}}
package/dist/sqs-custom-marquee.min.js ADDED
@@ -0,0 +1 @@
1
+ new class{constructor(e=document,t={}){this.root=e,this.config={scaleTo:1.5,start:"top 80%",end:"bottom top",...t},this.wraps=[...e.querySelectorAll(".custom-marquee-wrap")],0!==this.wraps.length&&(gsap.registerPlugin(ScrollTrigger),this.wraps.forEach(e=>this.initWrap(e)))}initWrap(e){const t=e.dataset.phrase||"",r=e.dataset.link||"",s=e.querySelectorAll(".custom-marquee-track"),a=s[0],n=s[1],i=()=>{a.innerHTML="";const s=2*e.offsetWidth;let i=0;for(;a.scrollWidth<s&&i<200;){const e=document.createElement("p");if(e.className="Marquee-item Marquee-item--text",r){const s=document.createElement("a");s.setAttribute("href",r),s.textContent=t,e.appendChild(s)}else e.textContent=t;a.appendChild(e),i++}n.innerHTML=a.innerHTML};let o;i(),e.hasAttribute("data-scale")&&this.animateScale(e),window.addEventListener("resize",()=>{clearTimeout(o),o=setTimeout(i,200)})}animateScale(e){gsap.set(e,{scale:1,transformOrigin:"center center"}),gsap.to(e,{scale:this.config.scaleTo,ease:"none",scrollTrigger:{trigger:e,start:this.config.start,end:this.config.end,scrub:!0}})}};
package/package.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "name": "@danielleallyssa/sqs-custom-marquee",
3
+ "version": "1.0.0",
4
+ "description": "",
5
+ "license": "ISC",
6
+ "author": "Danielle Allyssa",
7
+ "type": "commonjs",
8
+ "main": "dist/sqs-custom-marquee.js",
9
+ "unpkg": "dist/sqs-custom-marquee.min.js",
10
+ "files": [
11
+ "dist"
12
+ ],
13
+ "scripts": {
14
+ "test": "echo \"Error: no test specified\" && exit 1"
15
+ }
16
+ }