From 832e286aeecae7a905dcf74e160b7646dbba4746 Mon Sep 17 00:00:00 2001 From: guofei Date: Tue, 5 Nov 2024 19:50:02 +0800 Subject: [PATCH] add amimation swiper --- pnpm-lock.yaml | 41 ++++-- src/app/[[...lang]]/page.tsx | 18 ++- src/app/components/AutoplayCarousel.tsx | 83 +++++++++++ src/app/components/ChannelSwiper.tsx | 41 ++++++ src/app/globals.css | 182 +++++++++++++----------- tsconfig.json | 25 +++- 6 files changed, 293 insertions(+), 97 deletions(-) create mode 100644 src/app/components/AutoplayCarousel.tsx create mode 100644 src/app/components/ChannelSwiper.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b9e24d8..e015e7b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,12 @@ importers: react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) + react-seamless-scroll: + specifier: ^1.0.3 + version: 1.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + swiper: + specifier: ^11.1.14 + version: 11.1.14 devDependencies: '@types/node': specifier: ^20 @@ -1564,6 +1570,12 @@ packages: react-is@18.3.1: resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} + react-seamless-scroll@1.0.3: + resolution: {integrity: sha512-QSKrkhwZOphunAQd+5CZZ4StecsDILllVEOwR352TBVmzmhe03qxljMyOHXbNCNTujAJ/oDJytxE43jpxcqieQ==} + peerDependencies: + react: ^16.8.6 + react-dom: ^16.8.6 + react-transition-group@4.4.5: resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: @@ -1757,6 +1769,10 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + swiper@11.1.14: + resolution: {integrity: sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==} + engines: {node: '>= 4.7.0'} + tailwindcss@3.4.13: resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==} engines: {node: '>=14.0.0'} @@ -2806,8 +2822,8 @@ snapshots: '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1) eslint-plugin-react: 7.37.1(eslint@8.57.1) eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1) @@ -2826,37 +2842,37 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1): + eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.1 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -2867,7 +2883,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -3629,6 +3645,11 @@ snapshots: react-is@18.3.1: {} + react-seamless-scroll@1.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.25.7 @@ -3852,6 +3873,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + swiper@11.1.14: {} + tailwindcss@3.4.13: dependencies: '@alloc/quick-lru': 5.2.0 diff --git a/src/app/[[...lang]]/page.tsx b/src/app/[[...lang]]/page.tsx index 5424c56..07cf5c7 100644 --- a/src/app/[[...lang]]/page.tsx +++ b/src/app/[[...lang]]/page.tsx @@ -4,6 +4,7 @@ import Header from "@/app/components/header"; import Footer from "@/app/components/footer"; import Examples from "../components/Examples"; +import ChannelSwiper from "../components/ChannelSwiper"; export default async function Home(props: { params: { lang: string[] } }) { const lang = props.params.lang || ["zh"]; @@ -68,6 +69,22 @@ export default async function Home(props: { params: { lang: string[] } }) {
{dict.lightweightDeployment}
{dict.simplifyProcess}
+ +
+
+ 渠道支持 +
+
+ + +
{/*
{ dict.clickNow }
*/}
-
diff --git a/src/app/components/AutoplayCarousel.tsx b/src/app/components/AutoplayCarousel.tsx new file mode 100644 index 0000000..4d06920 --- /dev/null +++ b/src/app/components/AutoplayCarousel.tsx @@ -0,0 +1,83 @@ +import { ReactElement, useEffect, useLayoutEffect } from "react"; +import * as React from "react"; + +interface Props { + Item: (item: T) => ReactElement; + showNum: number; + speed: number; + containerWidth: number; + data: T[]; + hoverStop?: boolean; + direction?: "left" | "right"; +} + +const fillArray = (arr: any, length: number) => { + const result: any = []; + while (result.length < length) { + result.push(...arr); + } + return result.concat(result); +}; + +function AutoplayCarousel({ Item, showNum, speed, containerWidth, data, hoverStop = false, direction = "left" }: Props) { + const showData = fillArray(data, showNum); + const length = showData.length; + const itemWidth = containerWidth / showNum; + + useLayoutEffect(() => { + const style = document.createElement("style"); + + let start = "0"; + let end = `-${(itemWidth * length) / 2}`; + if (direction === "right") { + start = end; + end = "0"; + } + + const keyframes = ` + @keyframes templates-partner-moving { + 0% { + transform: translateX(${start}px); + } + 100% { + transform: translateX(${end}px); + } + } + `; + + const hoverStyles = hoverStop + ? ` + .list:hover { + animation-play-state: paused !important; + } + ` + : ``; + + style.innerText = keyframes + hoverStyles; + document.head.appendChild(style); + + return () => { + document.head.removeChild(style); + }; + }, []); + + return ( +
+
+ {showData.map((item, index) => ( +
+ +
+ ))} +
+
+ ); +} + +export default AutoplayCarousel; diff --git a/src/app/components/ChannelSwiper.tsx b/src/app/components/ChannelSwiper.tsx new file mode 100644 index 0000000..7940118 --- /dev/null +++ b/src/app/components/ChannelSwiper.tsx @@ -0,0 +1,41 @@ +"use client"; +import AutoplayCarousel from "./AutoplayCarousel"; + +interface ItemProps { + url: string; +} +const data: ItemProps[] = [ + { url: "logo-yandex.png" }, + { url: "logo-vungle.png" }, + { url: "logo-unity.png" }, + { url: "logo-tiktok.png" }, + { url: "logo-tapjoy.png" }, + { url: "logo-pangle.png" }, + { url: "logo-moloco.png" }, + { url: "logo-mintegral.png" }, + { url: "logo-liftoff.png" }, + { url: "logo-kwai.png" }, + { url: "logo-google.png" }, + { url: "logo-facebook.png" }, + { url: "logo-chartboost.png" }, + { url: "logo-bigoads.png" }, + { url: "logo-applovin.png" }, +]; + +export default function ChannelSwiper() { + const Item = (item: ItemProps) => { + return ( +
+ +
+ ); + }; + + return ( + <> +
+ +
+ + ); +} diff --git a/src/app/globals.css b/src/app/globals.css index a895b5b..7bda662 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,147 +3,165 @@ @tailwind utilities; html::-webkit-scrollbar { - width: 8px; + width: 8px; } html::-webkit-scrollbar-thumb { - background-color: rgba(169, 169, 169, 0.729); - border-radius: 10px; + background-color: rgba(169, 169, 169, 0.729); + border-radius: 10px; } html::-webkit-scrollbar-track { - background: #fff; + background: #fff; } - html { - font-size: 14.4px; + font-size: 14.4px; } .menu-item { - display: block; + display: block; } @media (min-width: 300px) and (max-width: 350px) { - html { - font-size: 3px; - } + html { + font-size: 3px; + } } @media (min-width: 350px) and (max-width: 400px) { - html { - font-size: 3.5px; - } + html { + font-size: 3.5px; + } } @media (min-width: 400px) and (max-width: 450px) { - html { - font-size: 4px; - } + html { + font-size: 4px; + } } @media (min-width: 450px) and (max-width: 500px) { - html { - font-size: 4.5px; - } + html { + font-size: 4.5px; + } } @media (min-width: 500px) and (max-width: 550px) { - html { - font-size: 5px; - } + html { + font-size: 5px; + } } @media (min-width: 550px) and (max-width: 600px) { - html { - font-size: 5.5px; - } + html { + font-size: 5.5px; + } } @media (min-width: 600px) and (max-width: 650px) { - html { - font-size: 6px; - } + html { + font-size: 6px; + } } @media (min-width: 650px) and (max-width: 700px) { - html { - font-size: 6.5px; - } + html { + font-size: 6.5px; + } } @media (min-width: 700px) and (max-width: 750px) { - html { - font-size: 7px; - } + html { + font-size: 7px; + } } @media (min-width: 750px) and (max-width: 800px) { - html { - font-size: 7.6px; - } + html { + font-size: 7.6px; + } } @media (min-width: 800px) and (max-width: 850px) { - html { - font-size: 8px; - } + html { + font-size: 8px; + } } @media (min-width: 850px) and (max-width: 900px) { - html { - font-size: 8.5px; - } + html { + font-size: 8.5px; + } } @media (min-width: 900px) and (max-width: 950px) { - html { - font-size: 9px; - } + html { + font-size: 9px; + } } @media (min-width: 1000px) and (max-width: 1050px) { - html { - font-size: 10px; - } + html { + font-size: 10px; + } } @media (min-width: 1050px) and (max-width: 1100px) { - html { - font-size: 10.5px; - } + html { + font-size: 10.5px; + } } @media (min-width: 1100px) and (max-width: 1150px) { - html { - font-size: 11px; - } + html { + font-size: 11px; + } } @media (min-width: 1150px) and (max-width: 1200px) { - html { - font-size: 11.5px; - } + html { + font-size: 11.5px; + } } @media (min-width: 1200px) and (max-width: 1250px) { - html { - font-size: 12px; - } + html { + font-size: 12px; + } } @media (min-width: 1250px) and (max-width: 1300px) { - html { - font-size: 12.5px; - } + html { + font-size: 12.5px; + } } @media (min-width: 1300px) and (max-width: 1350px) { - html { - font-size: 13px; - } + html { + font-size: 13px; + } } @media (min-width: 1350px) and (max-width: 1400px) { - html { - font-size: 13.5px; - } + html { + font-size: 13.5px; + } } @media (min-width: 1400px) and (max-width: 1450px) { - html { - font-size: 14px; - } + html { + font-size: 14px; + } } @media (min-width: 1440px) { - html { - font-size: 14.4px; - } + html { + font-size: 14.4px; + } } @media (max-width: 1440px) { - .menu-item { - display: none; - } + .menu-item { + display: none; + } } @media (min-width: 1440px) { - .menu-item { - display: block; - } + .menu-item { + display: block; + } +} + +.wrap { + overflow: hidden; +} +.wrap .list { + position: relative; + top: 0px; + left: 0px; + height: 100%; + display: flex; +} + +@media (max-width: 768px) { + .wrap .list > div { + width: 150px !important; + display: flex; + justify-content: center; + } } diff --git a/tsconfig.json b/tsconfig.json index 7b28589..bce397f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -11,16 +15,27 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", + "baseUrl": "./", "incremental": true, + "noImplicitAny": false, "plugins": [ { "name": "next" } ], "paths": { - "@/*": ["./src/*"] + "@/*": [ + "./src/*" + ] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] -} + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts" + ], + "exclude": [ + "node_modules" + ] +} \ No newline at end of file