basic marquee roller done
This commit is contained in:
parent
f5edced908
commit
a417b18c94
GPG key ID:
4E4A5AD1FB748427
5 changed files with 213 additions and 64 deletions
93
src/components/marquee/Marquee.astro
Normal file
93
src/components/marquee/Marquee.astro
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
---
|
||||
|
||||
function placeholders() {
|
||||
const word = "placeholder";
|
||||
let str: string;
|
||||
const arr: string[] = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
str = `${word}-${i}`;
|
||||
arr.push(str);
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
const ph = placeholders();
|
||||
---
|
||||
<div class="marquee-buttons">
|
||||
<button id="button-widget" class="marquee-button marquee-button-widget">widgets</button>
|
||||
<button id="button-panel" class="marquee-button marquee-button-panel">panels</button>
|
||||
<button id="button-overlay" class="marquee-button marquee-button-overlay">overlays</button>
|
||||
</div>
|
||||
<div class="marquee">
|
||||
<div id="marquee-scroll-left" class="marquee-scroll marquee-scroll-left">left</div>
|
||||
<div id="marquee-scroll-right" class="marquee-scroll marquee-scroll-right">right</div>
|
||||
<div id="marquee-content" class="marquee-content" data-scroll="0">
|
||||
{ph.map(item => <div class="marquee-item">{item}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// marquee
|
||||
// const dataNum = 10 // number of elements
|
||||
const marquee = document.getElementById("marquee-content")!;
|
||||
marquee.style.setProperty("--scroll", "0")
|
||||
|
||||
// go-to buttons
|
||||
const buttonWidget = document.getElementById("button-widget")!;
|
||||
const buttonPanel = document.getElementById("button-panel")!;
|
||||
const buttonOverlay = document.getElementById("button-overlay")!;
|
||||
|
||||
// left-right buttons
|
||||
const scrollLeft = document.getElementById("marquee-scroll-left")!;
|
||||
const scrollRight = document.getElementById("marquee-scroll-right")!;
|
||||
|
||||
scrollLeft.addEventListener("mousedown", () => {
|
||||
const dataScroll = marquee.getAttribute("data-scroll")!;
|
||||
const hashMap = {
|
||||
"0": () => {
|
||||
const scrollToLast = "-900%" // dataNum
|
||||
marquee.setAttribute("data-scroll", scrollToLast);
|
||||
},
|
||||
"lt0": () => {
|
||||
const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
|
||||
const oldNumScroll = Number(oldDataScroll)
|
||||
const newScroll = oldNumScroll - 100;
|
||||
newScroll <= 900 && newScroll > 0 ?
|
||||
marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
|
||||
: marquee.setAttribute("data-scroll", "0")
|
||||
}
|
||||
}
|
||||
|
||||
hashMap[dataScroll === "0" ?
|
||||
"0"
|
||||
: "lt0"
|
||||
]()
|
||||
const updatedScroll = marquee.getAttribute("data-scroll")!;
|
||||
marquee.style.setProperty("--scroll", updatedScroll)
|
||||
})
|
||||
|
||||
scrollRight.addEventListener("mousedown", () => {
|
||||
const dataScroll = marquee.getAttribute("data-scroll")!;
|
||||
const hashMap = {
|
||||
"900": () => { // dataNum
|
||||
const scrollToFirst = "0";
|
||||
marquee.setAttribute("data-scroll", scrollToFirst);
|
||||
},
|
||||
"mt0": () => {
|
||||
const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
|
||||
const oldNumScroll = Number(oldDataScroll)
|
||||
const newScroll = oldNumScroll + 100;
|
||||
newScroll <= 900 && newScroll < 1000 ?
|
||||
marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
|
||||
: marquee.setAttribute("data-scroll", "0")
|
||||
}
|
||||
}
|
||||
|
||||
hashMap[dataScroll === "900" ?
|
||||
"900"
|
||||
: "mt0"
|
||||
]()
|
||||
const updatedScroll = marquee.getAttribute("data-scroll")!;
|
||||
marquee.style.setProperty("--scroll", updatedScroll)
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import Header from "@components/Header.astro";
|
||||
//import Header from "@components/Header.astro";
|
||||
import Footer from "@src/components/Footer.astro";
|
||||
import Head from "@config/Head.astro";
|
||||
import PreTheme from "@config/PreTheme.astro";
|
||||
|
|
@ -18,7 +18,7 @@ const { title, description } = Astro.props;
|
|||
<PreTheme />
|
||||
</head>
|
||||
<body class="baselayout">
|
||||
<Header />
|
||||
<!--<Header />-->
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
---
|
||||
import BaseLayout from "@layouts/BaseLayout.astro";
|
||||
import Marquee from "@components/marquee/Marquee.astro";
|
||||
|
||||
const title = "Quickshell";
|
||||
const subtitle = "A framework for building fully custom";
|
||||
---
|
||||
<BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png">
|
||||
<div class="main-page_hero" data-pagefind-ignore>
|
||||
<h1>Quick<em>shell</em></h1>
|
||||
<section class="main-page_hero-text">
|
||||
<h2>A fully <em class="green">user-customizable</em> desktop <em class="navy">shell</em></h2>
|
||||
<h3>Based on <em class="green">QtQuick</em></h3>
|
||||
<h2>{subtitle}</h2>
|
||||
</section>
|
||||
<Marquee/>
|
||||
<section class="call-buttons">
|
||||
<span class="call-button call-install"><a href="/docs/intro">Install</a></span>
|
||||
<span class="call-button call-get-started"><a href="/docs/intro">Get Started</a></span>
|
||||
</section>
|
||||
<section class="main-page_links">
|
||||
<a href="/docs/configuration" class="main-page_link-card">
|
||||
|
|
|
|||
|
|
@ -37,11 +37,6 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
[id] {
|
||||
/*offset for header*/
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
& .header {
|
||||
background-color: hsl(var(--secondary-900));
|
||||
|
|
@ -60,6 +55,11 @@ html.dark {
|
|||
all: unset;
|
||||
}
|
||||
|
||||
[id] {
|
||||
/*offset for header*/
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,16 @@
|
|||
.main-page_hero {
|
||||
position: relative;
|
||||
margin-block: 5rem;
|
||||
margin-block: 1.618rem;
|
||||
margin-inline: 0.612rem;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
& h1 {
|
||||
position: relative;
|
||||
font-size: 2.618rem;
|
||||
|
||||
&::before {
|
||||
content: "Quick";
|
||||
position: absolute;
|
||||
color: hsl(var(--accent-400));
|
||||
inset: 0;
|
||||
filter: blur(1rem);
|
||||
text-shadow: 0 0 3px white;
|
||||
}
|
||||
|
||||
& em::before {
|
||||
content: "shell";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
color: hsl(var(--blue) 66 60);
|
||||
filter: blur(1rem);
|
||||
text-shadow: 0 0 3px white;
|
||||
}
|
||||
font-size: 4.618rem;
|
||||
}
|
||||
|
||||
& em {
|
||||
|
|
@ -55,29 +37,105 @@
|
|||
flex-direction: column;
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.018rem;
|
||||
margin-bottom: 1.117rem;
|
||||
|
||||
& em {
|
||||
all: unset;
|
||||
|
||||
&:first-child {
|
||||
color: hsl(var(--accent-400));
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
color: hsl(var(--blue) 66 60);
|
||||
}
|
||||
}
|
||||
margin-bottom: 0.117rem;
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.015rem;
|
||||
color: hsla(var(--secondary-400) / 0.8);
|
||||
margin-bottom: 1.5rem;
|
||||
.marquee-buttons {
|
||||
display: flex;
|
||||
gap: 3rem;
|
||||
font-size: 1.874rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.marquee-button {
|
||||
all: unset;
|
||||
position: relative;
|
||||
color: hsl(var(--accent-400));
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
height: 3px;
|
||||
background-color: hsla(var(--accent-400) / 0.3);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
aspect-ratio: 19 / 10;
|
||||
background-color: hsla(var(--blue) 66 60 / 0.4);
|
||||
margin-block: 1.817rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.marquee-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.marquee-item {
|
||||
flex: 1 0 100%;
|
||||
height: 100%;
|
||||
border: 1px solid red;
|
||||
border-radius: inherit;
|
||||
transition: transform 0.3s linear;
|
||||
transform: translateX(var(--scroll));
|
||||
}
|
||||
|
||||
.marquee-scroll {
|
||||
position: absolute;
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
background-color: hsla(0 0 100 / 0.1);
|
||||
border: 1px solid white;
|
||||
border-radius: 8px;
|
||||
opacity: 0.3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s, opacity 0.3s;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
background-color: hsla(0 0 100 / 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.marquee-scroll-left {
|
||||
left: -3.117rem;
|
||||
}
|
||||
|
||||
.marquee-scroll-right {
|
||||
right: -3.117rem;
|
||||
}
|
||||
|
||||
.call-buttons {
|
||||
margin-bottom: 1.618rem;
|
||||
display: flex;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.call-button {
|
||||
width: 15rem;
|
||||
font-size: 1.874rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid hsl(var(--accent-400));
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-page_links {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -118,12 +176,10 @@
|
|||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
background: linear-gradient(
|
||||
115deg,
|
||||
hsla(var(--green) 20 15 / 0.7) 25%,
|
||||
hsla(var(--green) 25 25 / 0.8) 50%,
|
||||
hsla(var(--green) 60 60 / 0.6) 80%
|
||||
);
|
||||
background: linear-gradient(115deg,
|
||||
hsla(var(--green) 20 15 / 0.7) 25%,
|
||||
hsla(var(--green) 25 25 / 0.8) 50%,
|
||||
hsla(var(--green) 60 60 / 0.6) 80%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -138,12 +194,10 @@
|
|||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
background: linear-gradient(
|
||||
115deg,
|
||||
hsla(var(--blue) 10 15 / 0.7) 25%,
|
||||
hsla(var(--blue) 15 25 / 0.8) 50%,
|
||||
hsla(var(--blue) 60 60 / 0.6) 80%
|
||||
);
|
||||
background: linear-gradient(115deg,
|
||||
hsla(var(--blue) 10 15 / 0.7) 25%,
|
||||
hsla(var(--blue) 15 25 / 0.8) 50%,
|
||||
hsla(var(--blue) 60 60 / 0.6) 80%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -165,10 +219,6 @@
|
|||
}
|
||||
|
||||
@media (min-width: 65rem) {
|
||||
.main-page_hero {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-page_hero-text {
|
||||
text-align: end;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue