autoplay,autoscroll done, added spinning logos
This commit is contained in:
parent
57f3c5f3f0
commit
624265be02
GPG key ID:
4E4A5AD1FB748427
9 changed files with 241 additions and 109 deletions
|
|
@ -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…
Add table
Add a link
Reference in a new issue