autoplay,autoscroll done, added spinning logos
This commit is contained in:
parent
57f3c5f3f0
commit
624265be02
GPG key ID:
4E4A5AD1FB748427
BIN
public/assets/hyprland-logo.ico
Normal file
BIN
public/assets/hyprland-logo.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/wayland-logo.png
Normal file
BIN
public/assets/wayland-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
9
public/assets/wayland-logo.svg
Normal file
9
public/assets/wayland-logo.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="266" height="266" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<title>Wayland logo</title>
|
||||
<g transform="translate(-208.6 -332.1)">
|
||||
<circle cx="341.4" cy="465.2" r="122.9" style="fill:currentColor"/>
|
||||
<g transform="scale(.9156 1.092)" style="fill:#fff">
|
||||
<path d="m443.9 314.6h2.35l-1.495 1.495h-0.8544v-1.495m-173 3.631v1.709l-5.554 6.836h-0.8544l-0.8544-5.34c3.275-2.136 5.696-3.204 7.263-3.204m202.5 2.35c4.842 1.9e-4 7.547 3.062 8.117 9.185l-4.059 28.84h1.495l3.204-2.136h0.8544v0.6408c-4.415 2.706-8.687 10.11-12.82 22.22-1.567 10.4-4.201 20.01-7.904 28.84-3.276 9.114-4.913 17.52-4.913 25.21l-6.195 15.17c-1.7e-4 1.282 2.35 2.563 7.049 3.845-0.8546 2.991-2.136 4.486-3.845 4.486v0.8544h1.495v0.6408c-1.7e-4 1.567-2.421 2.35-7.263 2.35l0.8544 0.8544v2.991h-1.495c0.9967 2.991 3.133 4.486 6.408 4.486v1.495h-6.408v0.8544c2.136 4e-5 3.204 1.282 3.204 3.845l-8.972 2.991 0.8544 0.8544v0.6408c-1.6e-4 0.9969-1.068 1.495-3.204 1.495v0.8544c2.706 3e-5 4.058 0.4985 4.059 1.495-3.845 1.282-8.901 7.619-15.17 19.01-6.408 10.11-11.96 15.17-16.66 15.17h-1.709c-3.56-2.279-6.48-9.826-8.758-22.64-9.114-19.51-13.67-30.97-13.67-34.39-1e-4 -8.829-2.919-18.23-8.758-28.2-1.567-4.415-2.635-9.968-3.204-16.66l-3.845-0.8544c-9.684 14.67-14.74 26.13-15.17 34.39-2.706 4.842-4.842 10.68-6.408 17.52 5.839 1.567 8.758 3.062 8.758 4.486v0.8544c-4.557-0.5696-7.761-1.638-9.612-3.204-1.994 3.845-4.628 14.53-7.904 32.04-2.563 8.117-5.768 12.18-9.612 12.18-10.82-3.56-19.87-9.399-27.13-17.52-1.139 2e-5 -2.991-4.059-5.554-12.18-1.566 3e-5 -2.635-4.059-3.204-12.18-5.411-11.53-9.114-24.71-11.11-39.52v-22.22h-0.8544l-3.845 0.8544v-0.8544c1e-5 -0.9967 1.282-1.495 3.845-1.495l-0.8544-12.82v-10.04l-6.195-32.04v-13.67c2.706-8.544 7.405-12.82 14.1-12.82h44.86v1.495c-3.56 0.1426-5.981 0.9258-7.263 2.35-2.706-1.566-5.34-2.35-7.904-2.35h-8.758l-4.913 0.6408-0.8544-0.6408h-0.6408l-6.408 0.6408-3.204-0.6408-2.35 0.6408-2.563-0.6408c10.4 11.39 16.52 21.01 18.37 28.84h7.263v1.495h-5.554v1.709c2.136 6.551 3.703 9.826 4.699 9.826h1.709l3.845-0.8544 0.8544 0.8544 0.8544-0.8544 0.8544 0.8544v0.6408c-2.848 1.709-4.771 4.059-5.767 7.049h-0.6408v1.495h1.495c1.994 23.78 5.696 41.8 11.11 54.04l3.204 2.136h1.709c2.136 8e-5 6.622-8.331 13.46-24.99 4.415-7.547 7.619-14.17 9.612-19.87l-0.8544-2.35c4.415-5.554 8.972-8.331 13.67-8.331h1.495c2.99 1.4e-4 5.127 1.567 6.408 4.699 3.987 4.7 7.191 11.75 9.612 21.15l11.96 22.22c1.566 1.567 2.35 3.347 2.35 5.34 4.414 8.402 8.402 13.96 11.96 16.66h2.563c2.99 6e-5 6.978-10.4 11.96-31.19 0.8543 9e-5 3.204-5.554 7.049-16.66v-0.8544l-13.46-1.495-3.204 0.8544h-4.059v-1.709l8.117-0.6408h15.81c6.123-18.37 11.75-32.61 16.88-42.72 1.709-20.79 4.058-31.19 7.049-31.19l9.612-3.845m-45.5 2.35c-0.8546 1.994-2.706 2.991-5.554 2.991v-1.495l5.554-1.495m-80.53 3.845h21.57v1.495l-4.913 0.6408-4.699-0.6408-4.059 1.495-1.495-1.495h-6.408v-1.495m-112.4 2.991h2.35l1.495 1.495v0.8544l-4.699 4.486v3.845h-1.709v-2.35l0.8544-0.6408v-0.8544l-4.059-3.845c0.9969-1.994 2.919-2.99 5.767-2.991m157 9.185h2.35v0.6408c-1.1e-4 0.997-0.7834 1.495-2.35 1.495l-0.8544 0.8544v0.8544l-2.35-0.8544v-1.495l3.204-1.495m-11.96 8.331v0.8544c-1e-4 1.139-3.418 2.35-10.25 3.631v-1.495l4.699-2.136 0.8544 0.6408h0.6408l4.059-1.495m-139.5 7.69v0.6408l-1.709 1.495-0.6408-0.6408v-0.8544l0.6408-0.6408h1.709m116.4 0v0.6408c-2.991 2.279-7.832 4.344-14.53 6.195v-1.495c1.139 1.5e-4 1.709-0.7831 1.709-2.35l12.82-2.991m40.59 7.476 0.8544 0.8544v0.6408l-1.495 1.709h-0.8544l-1.709-1.709v-0.6408l3.204-0.8544m29.48 0.8544h0.8544v0.6408l-1.495 1.709h-0.8544v-0.8544l1.495-1.495m-13.46 10.68 3.204 2.136c-0.5698 1.567-2.136 2.35-4.699 2.35l-1.709-2.35c-1.3e-4 -0.7119 1.068-1.424 3.204-2.136m19.22 9.826 0.6408 0.8544v0.6408l-0.6408 0.8544h-1.709v-0.8544l1.709-1.495m-30.33 7.69v0.6408l-4.059 3.204h-2.35v-0.8544c-1.1e-4 -1.282 2.136-2.278 6.408-2.991m-132.4 29.69h0.8544v0.6408c-2.136 4.7-3.987 7.548-5.554 8.544h-1.709v-3.204l6.408-5.981m104.5 35.67h0.8544v1.495l-6.408 3.204-0.8544-0.8544v-1.495l6.408-2.35m-87.79 10.04h1.495l2.563 8.331h-1.709l-2.35-7.69v-0.6408m85.44 9.826h0.6408l2.563 2.35-0.8544 0.6408h-0.8544l-1.495-2.136v-0.8544"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -31,7 +31,7 @@ const codeHTML = await processMarkdown(codeString);
|
|||
</span>
|
||||
</section>
|
||||
<section class="feature-showcase">
|
||||
<video class="feature-video" style="height: 21rem" preload="metadata" controls>
|
||||
<video class="feature-video" style="height: 21rem" preload="metadata" controls={false} autoplay loop>
|
||||
<source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
|
||||
</video>
|
||||
</section>
|
||||
|
|
@ -48,15 +48,20 @@ const codeHTML = await processMarkdown(codeString);
|
|||
<Fragment set:html={codeHTML}/>
|
||||
</section>
|
||||
</li>
|
||||
<li class="featurelist-item cloud left">
|
||||
<li class="featurelist-item cloud-li left">
|
||||
<section class="feature-text">
|
||||
<h3 class="feature-title">Extensive integrations</h3>
|
||||
<span class="feature-subtitle">
|
||||
Quickshell comes with a large set of integrations, with new ones arriving all the time.
|
||||
</span>
|
||||
</section>
|
||||
<section class="feature-showcase">
|
||||
<span>image</span>
|
||||
<section class="feature-showcase cloud">
|
||||
<span class="cloud-item hyprland">
|
||||
<img src={"/assets/hyprland-logo.ico"}/>
|
||||
</span>
|
||||
<span class="cloud-item wayland">
|
||||
<img src={"/assets/wayland-logo.png"}/>
|
||||
</span>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ const videos = [
|
|||
path: "/assets/showcase/vaxry.mp4",
|
||||
},
|
||||
];
|
||||
|
||||
---
|
||||
<div class="marquee">
|
||||
<div class="marquee-scroll">
|
||||
|
|
@ -30,10 +29,18 @@ const videos = [
|
|||
<div><Icon name="caret-right"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="marquee-content" class="marquee-content" data-scroll="0">
|
||||
<div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
|
||||
{videos.map(({ author, authorlink, path }, index) => <div class="marquee-item">
|
||||
<div>
|
||||
<video class="marquee-item-spacing marquee-item-content" muted controls {...(index == 0 ? {autoplay: ""} : {})}>
|
||||
<video
|
||||
data-media-index={index}
|
||||
data-media-author={author}
|
||||
id="showcase-video"
|
||||
class="marquee-item-spacing marquee-item-content"
|
||||
muted
|
||||
controls
|
||||
playsinline
|
||||
>
|
||||
<source src={path} type="video/mp4"/>
|
||||
</video>
|
||||
<p>Configuration by <a href={authorlink}>{author}</a></p>
|
||||
|
|
@ -44,43 +51,105 @@ const videos = [
|
|||
|
||||
<script>
|
||||
// marquee
|
||||
// const dataNum = 10 // number of elements
|
||||
const dataNum = 2; // last array index
|
||||
const marquee = document.getElementById("marquee-content")!;
|
||||
marquee.style.setProperty("--scroll", "0")
|
||||
|
||||
// autoplay
|
||||
window.addEventListener("load", autoplayInit,false);
|
||||
const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
|
||||
|
||||
function autoplayInit() {
|
||||
videos[0].play();
|
||||
videos[0].setAttribute("data-active", "");
|
||||
};
|
||||
|
||||
const intersectionOptions = {
|
||||
root: marquee,
|
||||
rootMargin: "0px",
|
||||
threshold: 1.0,
|
||||
};
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!entry.isIntersecting) {
|
||||
//@ts-expect-error
|
||||
entry.target.pause();
|
||||
entry.target.removeAttribute("autoplay")
|
||||
entry.target.removeAttribute("data-active")
|
||||
} else {
|
||||
//@ts-expect-error
|
||||
entry.target.play();
|
||||
entry.target.setAttribute("data-active","")
|
||||
}
|
||||
});
|
||||
},intersectionOptions);
|
||||
|
||||
for (const video of videos) {
|
||||
observer.observe(video);
|
||||
video.addEventListener("ended", onVideoEnded)
|
||||
}
|
||||
|
||||
const onVisibilityChange = () => {
|
||||
for(const video of videos){
|
||||
if(document.hidden){
|
||||
video.pause();
|
||||
} else {
|
||||
video.play();
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("visibilitychange", onVisibilityChange);
|
||||
|
||||
|
||||
function onVideoEnded() {
|
||||
const currentIndex = marquee.getAttribute("data-media-index");
|
||||
const currentIndexNum = Number(currentIndex);
|
||||
if(currentIndexNum !== dataNum){
|
||||
const newIndex = currentIndexNum + 1;
|
||||
marquee.setAttribute("data-media-index", `${newIndex}`);
|
||||
marquee.style.setProperty("--scroll", `-${newIndex*100}%`)
|
||||
} else {
|
||||
marquee.setAttribute("data-media-index", "0");
|
||||
marquee.style.setProperty("--scroll", "0")
|
||||
}
|
||||
}
|
||||
|
||||
// left-right buttons
|
||||
const scrollLeft = document.getElementById("marquee-scroll-left")!;
|
||||
const scrollRight = document.getElementById("marquee-scroll-right")!;
|
||||
const scrollMaxPercent = dataNum*100;
|
||||
|
||||
scrollLeft.addEventListener("mousedown", () => {
|
||||
const dataScroll = marquee.getAttribute("data-scroll")!;
|
||||
const hashMap = {
|
||||
"0": () => {
|
||||
const scrollToLast = "-900%" // dataNum
|
||||
"first": () => {
|
||||
const scrollToLast = `-${scrollMaxPercent}%`;
|
||||
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 ?
|
||||
newScroll <= scrollMaxPercent && newScroll > 0 ?
|
||||
marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
|
||||
: marquee.setAttribute("data-scroll", "0")
|
||||
}
|
||||
}
|
||||
|
||||
hashMap[dataScroll === "0" ?
|
||||
"0"
|
||||
"first"
|
||||
: "lt0"
|
||||
]()
|
||||
const updatedScroll = marquee.getAttribute("data-scroll")!;
|
||||
const mediaIndex = updatedScroll.indexOf("%") !== -1 ? updatedScroll.slice(1, -3) : "0";
|
||||
marquee.setAttribute("data-media-index", mediaIndex);
|
||||
marquee.style.setProperty("--scroll", updatedScroll)
|
||||
})
|
||||
|
||||
scrollRight.addEventListener("mousedown", () => {
|
||||
const dataScroll = marquee.getAttribute("data-scroll")!;
|
||||
const hashMap = {
|
||||
"900": () => { // dataNum
|
||||
"last": () => {
|
||||
const scrollToFirst = "0";
|
||||
marquee.setAttribute("data-scroll", scrollToFirst);
|
||||
},
|
||||
|
|
@ -88,17 +157,19 @@ const videos = [
|
|||
const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
|
||||
const oldNumScroll = Number(oldDataScroll)
|
||||
const newScroll = oldNumScroll + 100;
|
||||
newScroll <= 900 && newScroll < 1000 ?
|
||||
newScroll <= scrollMaxPercent ?
|
||||
marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
|
||||
: marquee.setAttribute("data-scroll", "0")
|
||||
}
|
||||
}
|
||||
|
||||
hashMap[dataScroll === "900" ?
|
||||
"900"
|
||||
hashMap[dataScroll === `${scrollMaxPercent}` ?
|
||||
"last"
|
||||
: "mt0"
|
||||
]()
|
||||
const updatedScroll = marquee.getAttribute("data-scroll")!;
|
||||
marquee.style.setProperty("--scroll", updatedScroll)
|
||||
const mediaIndex = updatedScroll.indexOf("%") !== -1 ? updatedScroll.slice(1, -3) : "0";
|
||||
marquee.setAttribute("data-media-index", mediaIndex);
|
||||
marquee.style.setProperty("--scroll", updatedScroll);
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -59,6 +59,53 @@
|
|||
border-radius: 0.681rem;
|
||||
}
|
||||
|
||||
.feature-showcase.cloud {
|
||||
position: relative;
|
||||
max-width: 345.717px;
|
||||
border-radius: 100vh;
|
||||
animation: spin 40s linear infinite;
|
||||
|
||||
& .cloud-item {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation: counter-spin 40s linear infinite;
|
||||
&.hyprland {
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
}
|
||||
&.wayland {
|
||||
right: 60px;
|
||||
top: 60px;
|
||||
}
|
||||
& img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes counter-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 68rem) {
|
||||
.featurelist {
|
||||
max-width: 75rem;
|
||||
|
|
|
|||
91
src/styles/components/marquee.css
Normal file
91
src/styles/components/marquee.css
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
.marquee-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2.217rem;
|
||||
font-size: 1.874rem;
|
||||
font-weight: 600;
|
||||
margin-inline: 0.618rem;
|
||||
}
|
||||
|
||||
.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: 100%;
|
||||
margin-block: 1.618rem;
|
||||
}
|
||||
|
||||
.marquee-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.marquee-item {
|
||||
flex: 1 0 100%;
|
||||
transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
|
||||
transform: translateX(var(--scroll));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.marquee-item-spacing {
|
||||
width: 75svw;
|
||||
max-width: 75rem;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.marquee-item-content {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.marquee-scroll {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s, opacity 0.3s;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
align-items: stretch;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.marquee-scroll-arrow {
|
||||
flex-grow: 1;
|
||||
max-width: 8rem;
|
||||
font-size: 2rem;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.marquee-scroll-arrow > div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
@import "./docs/collapsible.css";
|
||||
|
||||
@import "./components/featurelist.css";
|
||||
@import "./components/marquee.css";
|
||||
|
||||
.changing-theme * {
|
||||
transition: none !important;
|
||||
|
|
|
|||
|
|
@ -48,98 +48,6 @@ h1.gradient-text {
|
|||
}
|
||||
}
|
||||
|
||||
.marquee-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2.217rem;
|
||||
font-size: 1.874rem;
|
||||
font-weight: 600;
|
||||
margin-inline: 0.618rem;
|
||||
}
|
||||
|
||||
.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: 100%;
|
||||
margin-block: 1.618rem;
|
||||
}
|
||||
|
||||
.marquee-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.marquee-item {
|
||||
flex: 1 0 100%;
|
||||
transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
|
||||
transform: translateX(var(--scroll));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.marquee-item-spacing {
|
||||
width: 75svw;
|
||||
max-width: 75rem;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.marquee-item-content {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.marquee-scroll {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s, opacity 0.3s;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
align-items: stretch;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.marquee-scroll-arrow {
|
||||
flex-grow: 1;
|
||||
max-width: 8rem;
|
||||
font-size: 2rem;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.marquee-scroll-arrow > div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.main-page_links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
Loading…
Reference in a new issue