diff --git a/examples/nextjs/js/.eslintrc.json b/examples/nextjs/js/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/examples/nextjs/js/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/examples/nextjs/js/.gitignore b/examples/nextjs/js/.gitignore new file mode 100644 index 0000000..fd3dbb5 --- /dev/null +++ b/examples/nextjs/js/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/nextjs/js/README.md b/examples/nextjs/js/README.md new file mode 100644 index 0000000..c403366 --- /dev/null +++ b/examples/nextjs/js/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/examples/nextjs/js/bun.lockb b/examples/nextjs/js/bun.lockb new file mode 100644 index 0000000..27a0bdc Binary files /dev/null and b/examples/nextjs/js/bun.lockb differ diff --git a/examples/nextjs/js/next.config.mjs b/examples/nextjs/js/next.config.mjs new file mode 100644 index 0000000..17ce6c8 --- /dev/null +++ b/examples/nextjs/js/next.config.mjs @@ -0,0 +1,13 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'source.unsplash.com', + }, + ], + }, +}; + +export default nextConfig; diff --git a/examples/nextjs/js/package.json b/examples/nextjs/js/package.json new file mode 100644 index 0000000..c11d1c2 --- /dev/null +++ b/examples/nextjs/js/package.json @@ -0,0 +1,25 @@ +{ + "name": "jarallax-nextjs-example-ts", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "jarallax": "^2.2.1", + "next": "14.2.3", + "react": "^18", + "react-dom": "^18" + }, + "devDependencies": { + "typescript": "^5", + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.3" + } +} diff --git a/examples/nextjs/js/src/app/favicon.ico b/examples/nextjs/js/src/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/examples/nextjs/js/src/app/favicon.ico differ diff --git a/examples/nextjs/js/src/app/layout.jsx b/examples/nextjs/js/src/app/layout.jsx new file mode 100644 index 0000000..f3129ee --- /dev/null +++ b/examples/nextjs/js/src/app/layout.jsx @@ -0,0 +1,25 @@ +import { Inter } from "next/font/google"; + +import '@/assets/css/globals.css'; + +const inter = Inter({ + subsets: ["latin"] +}); + +export const metadata = { + title: 'Jarallax Example | Nextjs', + description: "Parallax scrolling for modern browsers", + authors: { + name: 'Nikita', + url: 'https://github.com/nk-o' + } +}; + +export default function RootLayout({ + children +}) { + return ( + + {children} + ) +} diff --git a/examples/nextjs/js/src/app/page.jsx b/examples/nextjs/js/src/app/page.jsx new file mode 100644 index 0000000..c760307 --- /dev/null +++ b/examples/nextjs/js/src/app/page.jsx @@ -0,0 +1,32 @@ +import Jarallax from '@/components/Jarallax'; + +export default function Home() { + return <> +
+

Next.js Example

+

Scroll Below 🔽

+
+

Image Example

+ + +
Your Content here
+ + +

Video Example

+ + +
Your Content here
+ +

End of Examples

+ +
+ ; +} diff --git a/examples/nextjs/js/src/assets/css/globals.css b/examples/nextjs/js/src/assets/css/globals.css new file mode 100644 index 0000000..641ea0c --- /dev/null +++ b/examples/nextjs/js/src/assets/css/globals.css @@ -0,0 +1,46 @@ +body { + font-size: 20px; + margin: 0; + -webkit-font-smoothing: antialiased; +} + +section { + height: 60vh; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.jarallax { + height: 80vh; +} + +.img-style { + position: relative; + height: 500px; + display: flex; + align-items: center; +} + +.eg-text { + text-align: center; + margin-bottom: 100px; + margin-top: 100px; +} + +hr { + height: 80vh; + border: none; +} + +.card { + height: 180px; + width: 200px; + margin-left:80%; + background-color: whitesmoke; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/examples/nextjs/js/src/components/Jarallax.jsx b/examples/nextjs/js/src/components/Jarallax.jsx new file mode 100644 index 0000000..ac13c4d --- /dev/null +++ b/examples/nextjs/js/src/components/Jarallax.jsx @@ -0,0 +1,31 @@ +"use client"; +import { useEffect, useRef } from "react"; +import { jarallax, jarallaxVideo } from "jarallax"; + +import 'jarallax/dist/jarallax.min.css'; + +const Jarallax = ({ children, options, tag = 'div', ...props }) => { + // html tag can be used as jarallax tag + const Tag = tag; + const ref = useRef(null); + + // calling required function for video jarallax + if (options?.videoSrc) jarallaxVideo(); + + useEffect(() => { + // Initialization of Jarallax + if (ref.current) jarallax(ref.current, { ...options }); + + // Destroy jarallax Instance on unmount + return () => { + if (ref.current) jarallax(ref.current, 'destroy'); + }; + }, []); + + return ( + + {children} + + ) +}; +export default Jarallax; diff --git a/examples/nextjs/js/tsconfig.json b/examples/nextjs/js/tsconfig.json new file mode 100644 index 0000000..7b28589 --- /dev/null +++ b/examples/nextjs/js/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/examples/nextjs/ts/.eslintrc.json b/examples/nextjs/ts/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/examples/nextjs/ts/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/examples/nextjs/ts/.gitignore b/examples/nextjs/ts/.gitignore new file mode 100644 index 0000000..fd3dbb5 --- /dev/null +++ b/examples/nextjs/ts/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/nextjs/ts/README.md b/examples/nextjs/ts/README.md new file mode 100644 index 0000000..c403366 --- /dev/null +++ b/examples/nextjs/ts/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/examples/nextjs/ts/bun.lockb b/examples/nextjs/ts/bun.lockb new file mode 100644 index 0000000..38cb070 Binary files /dev/null and b/examples/nextjs/ts/bun.lockb differ diff --git a/examples/nextjs/ts/next.config.mjs b/examples/nextjs/ts/next.config.mjs new file mode 100644 index 0000000..17ce6c8 --- /dev/null +++ b/examples/nextjs/ts/next.config.mjs @@ -0,0 +1,13 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'source.unsplash.com', + }, + ], + }, +}; + +export default nextConfig; diff --git a/examples/nextjs/ts/package.json b/examples/nextjs/ts/package.json new file mode 100644 index 0000000..c11d1c2 --- /dev/null +++ b/examples/nextjs/ts/package.json @@ -0,0 +1,25 @@ +{ + "name": "jarallax-nextjs-example-ts", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "jarallax": "^2.2.1", + "next": "14.2.3", + "react": "^18", + "react-dom": "^18" + }, + "devDependencies": { + "typescript": "^5", + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.3" + } +} diff --git a/examples/nextjs/ts/src/app/favicon.ico b/examples/nextjs/ts/src/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/examples/nextjs/ts/src/app/favicon.ico differ diff --git a/examples/nextjs/ts/src/app/layout.tsx b/examples/nextjs/ts/src/app/layout.tsx new file mode 100644 index 0000000..af5f4a2 --- /dev/null +++ b/examples/nextjs/ts/src/app/layout.tsx @@ -0,0 +1,24 @@ +import type { Metadata } from "next" +import { Inter } from "next/font/google" +import type { ReactNode } from 'react' + +import '@/assets/css/globals.css' + +const inter = Inter({ subsets: ["latin"] }) + +export const metadata: Metadata = { + title: 'Jarallax Example | Nextjs', + description: "Parallax scrolling for modern browsers", + authors: { + name: 'Nikita', + url: 'https://github.com/nk-o', + } +} + +export default function RootLayout ({ children, }: Readonly<{ children: ReactNode }>) { + return ( + + {children} + + ) +} diff --git a/examples/nextjs/ts/src/app/page.tsx b/examples/nextjs/ts/src/app/page.tsx new file mode 100644 index 0000000..dbbd6a4 --- /dev/null +++ b/examples/nextjs/ts/src/app/page.tsx @@ -0,0 +1,38 @@ +import Jarallax from '@/components/Jarallax' + +export default function Home () { + return ( + <> +
+

Next.js Example

+

Scroll Below 🔽

+
+

Image Example

+ + +
Your Content here
+ + +

Video Example

+ + +
Your Content here
+ +

End of Examples

+ +
+ + ) +} diff --git a/examples/nextjs/ts/src/assets/css/globals.css b/examples/nextjs/ts/src/assets/css/globals.css new file mode 100644 index 0000000..641ea0c --- /dev/null +++ b/examples/nextjs/ts/src/assets/css/globals.css @@ -0,0 +1,46 @@ +body { + font-size: 20px; + margin: 0; + -webkit-font-smoothing: antialiased; +} + +section { + height: 60vh; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.jarallax { + height: 80vh; +} + +.img-style { + position: relative; + height: 500px; + display: flex; + align-items: center; +} + +.eg-text { + text-align: center; + margin-bottom: 100px; + margin-top: 100px; +} + +hr { + height: 80vh; + border: none; +} + +.card { + height: 180px; + width: 200px; + margin-left:80%; + background-color: whitesmoke; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/examples/nextjs/ts/src/components/Jarallax.tsx b/examples/nextjs/ts/src/components/Jarallax.tsx new file mode 100644 index 0000000..9ae6796 --- /dev/null +++ b/examples/nextjs/ts/src/components/Jarallax.tsx @@ -0,0 +1,37 @@ +"use client" +import { ReactNode, useEffect, useRef, type ElementType, type HTMLAttributes } from "react" +import { jarallax, jarallaxVideo, type JarallaxOptions } from "jarallax" + +import 'jarallax/dist/jarallax.min.css' + +type JarallaxPropsType = { + children?: ReactNode + options?: JarallaxOptions + tag?: ElementType +} & HTMLAttributes + +const Jarallax = ({ children, options, tag = 'div', ...props }: JarallaxPropsType) => { + // html tag can be used as jarallax tag + const Tag = tag + const ref = useRef(null) + + // calling required function for video jarallax + if (options?.videoSrc) jarallaxVideo() + + useEffect(() => { + // Initialization of Jarallax + if (ref.current) jarallax(ref.current, { ...options }) + // Destroy jarallax Instance on unmount + return () => { + if (ref.current) jarallax(ref.current, 'destroy') + } + }, []) + + return ( + + {children} + + ) +} + +export default Jarallax diff --git a/examples/nextjs/ts/tsconfig.json b/examples/nextjs/ts/tsconfig.json new file mode 100644 index 0000000..7b28589 --- /dev/null +++ b/examples/nextjs/ts/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}