hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-23 02:39:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

something

Browse source
This commit is contained in:
Christofer 2023-08-17 16:40:51 +02:00
parent 970843ab84
commit 0d85f7b54d
1 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/routes/PreviewRiceSlice.svelte
View file

@ -9,6 +9,7 @@
/** @type HTMLVideoElement */ /** @type HTMLVideoElement */
let videoElement let videoElement
let isVisible = false
let isShowingControls = false let isShowingControls = false
let isMuted = true let isMuted = true
@ -24,14 +25,20 @@
class="max-w-7xl px-1 -mb-4 lg:px-8 w-full relative animate-in [animation-delay:1700ms] fade-in-0 fill-mode-backwards [animation-duration:2000ms] slide-in-from-bottom-10 z-20 {$$restProps.class}" class="max-w-7xl px-1 -mb-4 lg:px-8 w-full relative animate-in [animation-delay:1700ms] fade-in-0 fill-mode-backwards [animation-duration:2000ms] slide-in-from-bottom-10 z-20 {$$restProps.class}"
> >
<div <div
class="rounded-xl group opacity-20 overflow-hidden border-sky-400 border-2 scale-90 transition-all [transition-duration:1460ms] mx-3" class={clsx(
'rounded-xl group overflow-hidden border-sky-400 border-2 transition-all [transition-duration:1460ms] mx-3',
!isVisible && 'opacity-20 scale-90'
)}
role="banner" role="banner"
use:inview={{ unobserveOnEnter: true, threshold: 0.8 }} use:inview={{ threshold: 0.8 }}
on:inview_enter={({ detail: { node } }) => { on:inview_enter={() => {
node.classList.remove('opacity-20') isVisible = true
node.classList.remove('scale-90')
videoElement.play() videoElement.play()
}} }}
on:inview_leave={() => {
isVisible = false
videoElement.pause()
}}
on:mouseenter={() => (isShowingControls = true)} on:mouseenter={() => (isShowingControls = true)}
on:mouseleave={() => (isShowingControls = false)} on:mouseleave={() => (isShowingControls = false)}
> >