├── .gitignore
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
├── _app.js
├── api
│ └── hello.ts
└── index.js
├── postcss.config.js
├── prettier.config.js
├── public
├── Cloud.png
├── Scene.png
├── Sun.png
├── Train.png
├── favicon.ico
└── vercel.svg
├── styles
└── globals.css
├── tailwind.config.js
└── tsconfig.json
/.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 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 |
34 | # vercel
35 | .vercel
36 |
37 | # typescript
38 | *.tsbuildinfo
39 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Parallax a very 🆒 looking effect which can be achieved by changing the speed of the layers in the background 🌃.
2 |
3 | 
4 |
5 | Today lets explore how we can make a similar parallax effect in nextjs using a package called react-scroll-parallax 🥰.
6 |
7 | 
8 |
9 | https://react-scroll-parallax.damnthat.tv/docs/intro
10 |
11 | ```
12 | npm i react-scroll-parallax
13 | ```
14 |
15 | lets initialize our project using create-next-app
16 |
17 | ```
18 | npx create-next-app --example with-tailwindcss parallax
19 | ```
20 |
21 | I made a complete tutorial on youtube you can also check it out
22 |
23 | {% youtube vPhdhA3lZVs %}
24 |
25 | now lets continue our blog
26 |
27 | First of all replace all typescript file to JavaScript as the starter template comes configured with typescript 😞 or you can also write normal JavaScript 😲 inside the typescript file not a big deal
28 |
29 | So first wrap our Component in _app.js with ParallaxProvider and as we are creating our parallax in horizontal scrolling so we have to mention the scrollAxis='horizontal'
30 |
31 | ```js
32 | import '../styles/globals.css'
33 | import { ParallaxProvider } from 'react-scroll-parallax'
34 |
35 | function MyApp({ Component, pageProps }) {
36 | return (
37 |
38 |
40 | )
41 | }
42 |
43 | export default MyApp
44 | ```
45 |
46 | the final effect that we want is something like this 👇🏻
47 |
48 | 
49 |
50 | So as there is our main scene and there are some different components like train, cloud and sun and we want to move the cloud and train with relative to our background image and we want to make sun to be static so we will use useRef and useParallax from react-scroll-parallax to achieve this we will create a const target which will store the outermost div and and then we will use useParallax to create the refs for the inner divs and pass speed and targetElement in the useParallax here is the code 👇🏻
51 |
52 | ```js
53 | import { useParallax } from "react-scroll-parallax";
54 | import React, { useRef } from "react";
55 | import Image from "next/image";
56 |
57 | const index = () => {
58 | const target = useRef(null);
59 | const train = useParallax({
60 | speed: 500,
61 | targetElement: target.current,
62 | })
63 |
64 | const cloud = useParallax({
65 | speed: 200,
66 | targetElement: target.current,
67 | })
68 |
69 | return (
70 |
76 |
77 |
79 |
85 |
87 |
88 |
90 |
7 |
9 | )
10 | }
11 |
12 | export default MyApp
13 |
--------------------------------------------------------------------------------
/pages/api/hello.ts:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | import type { NextApiRequest, NextApiResponse } from 'next'
3 |
4 | type Data = {
5 | name: string
6 | }
7 |
8 | export default function handler(
9 | req: NextApiRequest,
10 | res: NextApiResponse
11 | ) {
12 | res.status(200).json({ name: 'John Doe' })
13 | }
14 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import { useParallax } from "react-scroll-parallax";
2 | import React, { useRef } from "react";
3 | import Image from "next/image";
4 |
5 | const index = () => {
6 | const target = useRef(null);
7 | const train = useParallax({
8 | speed: 500,
9 | targetElement: target.current,
10 | })
11 |
12 | const cloud = useParallax({
13 | speed: 200,
14 | targetElement: target.current,
15 | })
16 |
17 | return (
18 |
24 |
25 |
27 |
33 |
35 |
36 |
38 |
3 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: [
3 | './pages/**/*.{js,ts,jsx,tsx}',
4 | './components/**/*.{js,ts,jsx,tsx}',
5 | ],
6 | theme: {
7 | extend: {},
8 | },
9 | plugins: [],
10 | }
11 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "esModuleInterop": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "jsx": "preserve",
20 | "incremental": true
21 | },
22 | "include": [
23 | "next-env.d.ts",
24 | "**/*.ts",
25 | "**/*.tsx",
26 | "pages/index.js",
27 | "pages/_app.js"
28 | ],
29 | "exclude": [
30 | "node_modules"
31 | ]
32 | }
--------------------------------------------------------------------------------