├── public ├── 1.jpeg ├── 2.jpg ├── 3.jpeg ├── 4.jpg ├── 5.jpeg ├── 6.jpg ├── 7.jpeg ├── 8.jpg ├── 9.jpeg ├── 10.jpeg ├── PHOTO.png ├── vercel.svg └── next.svg ├── jsconfig.json ├── next.config.mjs ├── pages ├── _app.js ├── api │ └── hello.js ├── _document.js └── index.js ├── package.json ├── .gitignore ├── README.md └── styles └── globals.css /public/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/1.jpeg -------------------------------------------------------------------------------- /public/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/2.jpg -------------------------------------------------------------------------------- /public/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/3.jpeg -------------------------------------------------------------------------------- /public/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/4.jpg -------------------------------------------------------------------------------- /public/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/5.jpeg -------------------------------------------------------------------------------- /public/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/6.jpg -------------------------------------------------------------------------------- /public/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/7.jpeg -------------------------------------------------------------------------------- /public/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/8.jpg -------------------------------------------------------------------------------- /public/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/9.jpeg -------------------------------------------------------------------------------- /public/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/10.jpeg -------------------------------------------------------------------------------- /public/PHOTO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omair-Akbar/next-animation/HEAD/public/PHOTO.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | }; 5 | 6 | export default nextConfig; 7 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import "@/styles/globals.css"; 2 | 3 | export default function App({ Component, pageProps }) { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: "John Doe" }); 5 | } 6 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from "next/document"; 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-animation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "14.2.4", 13 | "react": "^18", 14 | "react-dom": "^18", 15 | "react-icons": "^5.2.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 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). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 20 | 21 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 22 | 23 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 24 | 25 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 26 | 27 | ## Learn More 28 | 29 | To learn more about Next.js, take a look at the following resources: 30 | 31 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 32 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 33 | 34 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 35 | 36 | ## Deploy on Vercel 37 | 38 | 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. 39 | 40 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 41 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(12, 12, 12); 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | 11 | 12 | .list { 13 | height: 100vh; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | transform-style: preserve-3d; 18 | transform: perspective(1000px); 19 | background: #141414; 20 | 21 | } 22 | 23 | .icon { 24 | color: #ffffff; 25 | font-size: 30px; 26 | } 27 | 28 | button { 29 | position: absolute; 30 | background-color: rgb(20, 20, 20); 31 | border-radius: 8px; 32 | height: 30px; 33 | width: 30px; 34 | top: 30px; 35 | right: 30px; 36 | z-index: 3; 37 | border: white 1px; 38 | display: flex; 39 | align-items: center; 40 | justify-content: center; 41 | } 42 | 43 | .list .item { 44 | transition: .5s; 45 | filter: brightness(0); 46 | border-radius: 0.5rem; 47 | overflow: hidden; 48 | padding: 2px; 49 | } 50 | 51 | .list .item:hover { 52 | filter: brightness(1); 53 | transform: translateZ(200px); 54 | } 55 | 56 | .list .item:hover+* { 57 | filter: brightness(0.6); 58 | transform: translateZ(100px) rotateY(40deg); 59 | } 60 | 61 | .list .item:hover+*+* { 62 | filter: brightness(0.4); 63 | transform: translateZ(60px) rotateY(30deg); 64 | } 65 | 66 | .list .item:hover+*+*+* { 67 | filter: brightness(0.2); 68 | transform: translateZ(20px) rotateY(30deg); 69 | } 70 | 71 | .list .item:has(+ *:hover) { 72 | filter: brightness(0.6); 73 | transform: translateZ(150px) rotateY(-40deg); 74 | } 75 | 76 | .list .item:has(+ * + *:hover) { 77 | filter: brightness(0.4); 78 | transform: translateZ(70px) rotateY(-30deg); 79 | } 80 | 81 | .list .item:has(+ * + * + *:hover) { 82 | filter: brightness(0.2); 83 | transform: translateZ(30px) rotateY(-30deg); 84 | } 85 | 86 | .list .item image { 87 | object-fit: fill; 88 | } 89 | 90 | .list .item { 91 | object-fit: fill; 92 | } 93 | 94 | .heading { 95 | display: flex; 96 | align-items: center; 97 | justify-content: center; 98 | background-color: rgb(20, 20, 20); 99 | } 100 | 101 | 102 | 103 | 104 | h1 { 105 | position: absolute; 106 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 107 | z-index: 5; 108 | color: rgb(255, 146, 83); 109 | top: 30px; 110 | font-weight: 300; 111 | } -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import Image from "next/image"; 3 | import { useState,useEffect } from "react"; 4 | import { MdFullscreen } from "react-icons/md"; 5 | import { MdFullscreenExit } from "react-icons/md"; 6 | 7 | 8 | export default function Home() { 9 | const [fullScreen,setFullScreen] = useState(false) 10 | 11 | const toggleFullScreen = ()=>{ 12 | const element = document.getElementById("body") 13 | if(!fullScreen){ 14 | element?.requestFullscreen() 15 | setFullScreen(true) 16 | }else{ 17 | if(fullScreen){ 18 | document.exitFullscreen() 19 | setFullScreen(false) 20 | } 21 | } 22 | } 23 | 24 | 25 | 26 | return ( 27 | 28 | 29 | Animation 30 | 31 | 32 | 33 | 34 |
35 | 36 |
37 |

Animation NextJs

38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 | ); 58 | } 59 | --------------------------------------------------------------------------------