Skip to content

Commit 8c0920c

Browse files
DevRickLinDevRickLin
committed
update:--20220805 completed BillBoard
1 parent 90278ca commit 8c0920c

13 files changed

+245
-9
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ deploy to [https://csu-apple-lab.github.io/](https://csu-apple-lab.github.io/)
2525
```bash
2626
npm run deploy
2727
```
28-
# Trobles shooting
28+
# Troubles shooting
2929

3030
1. hot-reload not working
3131

32-
SvelteKit has supported hot-reload out of box, if it doesn't work, check these out:
32+
SvelteKit has supported hot-reload out of the box, if it doesn't work, check these out:
3333

3434
1. you are not running inside WSL (it causes some problems)
3535
2. the format of your `.svelte` is correct (like `<p/>` will causes hot-reload not working).

‎package-lock.json

+34
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
},
1717
"devDependencies": {
1818
"@playwright/test": "^1.22.2",
19+
"@rgossiaux/svelte-headlessui": "^1.0.2",
20+
"@rgossiaux/svelte-heroicons": "^0.1.2",
1921
"@sveltejs/adapter-auto": "next",
2022
"@sveltejs/adapter-static": "^1.0.0-next.38",
2123
"@sveltejs/kit": "next",

‎src/app.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" id="main" class="transition-colors duration-500">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />

‎src/components/BillBoard.svelte

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<script lang="ts">
2+
import { browser } from "$app/env";
3+
import Menu from "@/components/Menu/index.svelte";
4+
import { XIcon } from "@rgossiaux/svelte-heroicons/solid";
5+
6+
let clicked = false;
7+
let scrollOutOfBillBoard = false;
8+
9+
const links = [
10+
{ href:"/", tag:"首页"},
11+
{ href:"/", tag:"关于我们"},
12+
{ href:"/", tag:"加入我们"}
13+
]
14+
15+
function clickBillBoard() {
16+
if (!clicked) {
17+
document.getElementById('main')?.classList.add('bg-black');
18+
window.scrollTo({top:0})
19+
} else {
20+
document.getElementById('main')?.classList.remove('bg-black');
21+
}
22+
clicked = !clicked;
23+
}
24+
25+
function switchLogoPosition(e:Event) {
26+
const billBoardHeight = document.getElementById("bill_board")?.clientHeight || 0;
27+
if ( scrollY > billBoardHeight / 3 ) {
28+
scrollOutOfBillBoard = true;
29+
}else {
30+
scrollOutOfBillBoard = false;
31+
}
32+
}
33+
34+
function getLogoStyle(clicked:boolean,scrollOutOfBillBoard:boolean) {
35+
return `${clicked? "hidden": ""} fixed top-0 w-full pt-1 pb-1 pl-3
36+
transition-all duration-300
37+
flex ${scrollOutOfBillBoard?
38+
"bg-white items-center shadow-md gap-3" :
39+
"justify-center items-center h-32 sm:h-80 gap-5 md:gap-16" }
40+
`;
41+
}
42+
43+
if( browser ) {
44+
window.addEventListener('scroll', (e)=>{
45+
window.requestAnimationFrame(()=>switchLogoPosition(e));
46+
})
47+
}
48+
</script>
49+
50+
<div id="bill_board">
51+
<div class={`block w-full ${clicked ? '' : 'h-32 sm:h-80 overflow-hidden'}`}>
52+
<video
53+
class={`w-full max-h-screen bg-black ${clicked ? '' : 'opacity-40'}`}
54+
muted={!clicked}
55+
autoplay
56+
loop
57+
controls
58+
>
59+
<track kind="captions" />
60+
<source src="think_different.mp4" type="video/mp4" />
61+
</video>
62+
</div>
63+
<div class={getLogoStyle(clicked,scrollOutOfBillBoard)}>
64+
<img class={`
65+
${scrollOutOfBillBoard?
66+
"w-9 h-9":
67+
"w-20 h-20 sm:w-48 sm:h-48"}
68+
`}
69+
src="iOS_Club_LOGO.png" alt="the logo of ios club."
70+
/>
71+
{#if scrollOutOfBillBoard}
72+
<h1 class="text-xl">
73+
中南大学苹果实验室
74+
</h1>
75+
{:else}
76+
<h1 class="text-2xl sm:text-5xl text-white font-bold cursor-pointer"
77+
on:click={clickBillBoard}
78+
>
79+
Think different.
80+
</h1>
81+
{/if}
82+
<div class={`invisible sm:visible fixed top-0 right-5 w-1/3 max-w-sm h-10 flex justify-end items-center gap-5
83+
${scrollOutOfBillBoard?
84+
"":
85+
"text-white font-bold"
86+
}
87+
`}>
88+
{#each links as link}
89+
<a href={link.href}>{link.tag}</a>
90+
{/each}
91+
</div>
92+
</div>
93+
<div class="fixed top-0 right-3">
94+
{#if clicked}
95+
<XIcon role="button" class="w-10 h-10 m-5 text-white cursor-pointer" on:click={clickBillBoard}/>
96+
{:else}
97+
<Menu items={links}/>
98+
{/if}
99+
</div>
100+
</div>

‎src/components/Menu/Item.svelte

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script>
2+
export let href = "/";
3+
</script>
4+
5+
<a href={href} class="w-full flex justify-center items-center"><slot/></a>

‎src/components/Menu/index.svelte

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts">
2+
import {
3+
Popover,
4+
PopoverButton,
5+
PopoverPanel,
6+
} from "@rgossiaux/svelte-headlessui";
7+
import {
8+
MenuIcon
9+
} from "@rgossiaux/svelte-heroicons/solid";
10+
import ChevronRight from "@rgossiaux/svelte-heroicons/solid/ChevronRight";
11+
import Item from "./Item.svelte";
12+
export let items: { href: string, tag: string }[] = [];
13+
</script>
14+
15+
<Popover class="sm:hidden">
16+
<PopoverButton>
17+
<MenuIcon class="w-10 h-10 text-gray-700"/>
18+
</PopoverButton>
19+
20+
<PopoverPanel class="fixed w-4/5 h-full top-0 right-0 flex flex-col gap-5 bg-white">
21+
<PopoverButton class="bg-slate-200">
22+
<ChevronRight class="w-10 h-10 text-gray-700 self-end"/>
23+
</PopoverButton>
24+
<div class="flex flex-col gap-5">
25+
{#each items as item}
26+
<Item href={item.href}>{item.tag}</Item>
27+
{/each}
28+
</div>
29+
</PopoverPanel>
30+
</Popover>
31+

‎src/routes/__layout.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
22
import "../app.css";
33
</script>
4-
4+
55
<slot />

0 commit comments

Comments
 (0)