├── README.md ├── code ├── index.html └── style.css └── topProducts.json /README.md: -------------------------------------------------------------------------------- 1 | # Parallax-Effect 2 | hello this is lalith 3 | -------------------------------------------------------------------------------- /code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Parallax 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 |
38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /code/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | background-color: #FEDCC8; 8 | } 9 | .parallax { 10 | perspective: 100px; 11 | height: 100vh; 12 | overflow-x: hidden; 13 | overflow-y: auto; 14 | position: absolute; 15 | top: 0; 16 | left: 50%; 17 | right: 0; 18 | bottom: 0; 19 | margin-left: -1500px; 20 | } 21 | 22 | .parallax__layer { 23 | position: absolute; 24 | top: 0; 25 | right: 0; 26 | bottom: 0; 27 | left: 0; 28 | } 29 | .parallax__layer img { 30 | display: block; 31 | position: absolute; 32 | bottom: 0; 33 | } 34 | 35 | .parallax__cover { 36 | background: #2D112B; 37 | display: block; 38 | position: absolute; 39 | top: 100%; 40 | left: 0; 41 | right: 0; 42 | height: 2000px; 43 | z-index: 2; 44 | } 45 | 46 | .parallax__layer__0 { 47 | transform: translateZ(-300px) scale(4); 48 | } 49 | 50 | .parallax__layer__1 { 51 | transform: translateZ(-250px) scale(3.5); 52 | } 53 | 54 | .parallax__layer__2 { 55 | transform: translateZ(-200px) scale(3); 56 | } 57 | 58 | .parallax__layer__3 { 59 | transform: translateZ(-150px) scale(2.5); 60 | } 61 | 62 | .parallax__layer__4 { 63 | transform: translateZ(-100px) scale(2); 64 | } 65 | 66 | .parallax__layer__5 { 67 | transform: translateZ(-50px) scale(1.5); 68 | } 69 | 70 | .parallax__layer__6 { 71 | transform: translateZ(0px) scale(1); 72 | } -------------------------------------------------------------------------------- /topProducts.json: -------------------------------------------------------------------------------- 1 | { 2 | "shoes": [ 3 | { 4 | "id": 1, 5 | "name": "Adidass Falcon Shoes for men - 2021 Edition", 6 | "price": "Rs 120.50", 7 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197327637-25d6d8cb-c1de-4f9d-9a9c-27a8ad7c49f3.png", 8 | "bgGradient": [ 9 | "#FE7831", 10 | "#FFDEBE" 11 | ] 12 | }, 13 | { 14 | "id": 2, 15 | "name": "Nike Falcon Shoes for men - 2019 Edition", 16 | "price": "Rs 160.99", 17 | "imgSrc": "https://user-images.githubusercontent.com/87645745/196216268-9a2aecc3-50d0-470d-a039-6977c31742a9.png", 18 | "bgGradient": [ 19 | "#02BE83", 20 | "#B3F6DC" 21 | ] 22 | }, 23 | { 24 | "id": 3, 25 | "name": "Puma Falcon Shoes for men - 2022 Edition", 26 | "price": "Rs 230.50", 27 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197327638-887e8385-2e1a-4a6c-ad0f-dcbc87db5795.png", 28 | "bgGradient": [ 29 | "#FF3C78", 30 | "#FFB2B2" 31 | ] 32 | }, 33 | { 34 | "id": 4, 35 | "name": "Reebok Falcon Shoes for men - 2020 Edition", 36 | "price": "Rs 420.99", 37 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197755172-e244d5d9-270d-4483-8e69-e225e54759e6.png", 38 | "bgGradient": [ 39 | "#8AA8F8", 40 | "#315BFF" 41 | ] 42 | }, 43 | { 44 | "id": 5, 45 | "name": "Yellow Tape Mens Rte277a Sneaker", 46 | "price": "Rs 253.45", 47 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197329056-7000301b-cea9-4f9c-9327-34a21f1cabfd.png", 48 | "bgGradient": [ 49 | "#27EC37", 50 | "#CCEFBA" 51 | ] 52 | }, 53 | { 54 | "id": 6, 55 | "name": "Nike Unisex-Child Air Jordan 1 White", 56 | "price": "Rs 442.46", 57 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197329064-a65f5693-93c4-41e6-a55e-07b6781abf4d.png", 58 | "bgGradient": [ 59 | "#E9EA55", 60 | "#F7F7C1" 61 | ] 62 | }, 63 | { 64 | "id": 7, 65 | "name": "Nike Orange Air Jordan ", 66 | "price": "Rs 202.37", 67 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197327633-a29adf55-e991-49e3-8086-54c0405715f2.png", 68 | "bgGradient": [ 69 | "#018F92", 70 | "#C7C5C5" 71 | ] 72 | }, 73 | { 74 | "id": 8, 75 | "name": "Puma x Helly Hansen RS Connect Sneakers", 76 | "price": "Rs 300.46", 77 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197327641-5b5d82ca-1026-4579-87a0-7ba88e07baeb.png", 78 | "bgGradient": [ 79 | "#9F2AFF", 80 | "#B59DF1" 81 | ] 82 | }, 83 | { 84 | "id": 9, 85 | "name": "Adidas Stan Smith", 86 | "price": "Rs 101.13", 87 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197327644-9b114302-9c97-4ad2-b207-94e3eac6ef31.png", 88 | "bgGradient": [ 89 | "#2BFF5C", 90 | "#B2D0A5" 91 | ] 92 | }, 93 | { 94 | "id": 10, 95 | "name": "Puma x Ader Error Vaderon Sneakers", 96 | "price": "Rs 159.15", 97 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197327643-09da0c09-815e-4aaf-a1f8-dd2df351e814.png", 98 | "bgGradient": [ 99 | "#F6FD14", 100 | "#D9E2A5" 101 | ] 102 | }, 103 | { 104 | "id": 11, 105 | "name": "Adidas Yeezy Boost 350 V2", 106 | "price": "Rs 175.73", 107 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197327642-1e638d26-b97a-40a5-8277-87edf82e81dd.png", 108 | "bgGradient": [ 109 | "#E63A3A", 110 | "#FFBABA" 111 | ] 112 | }, 113 | { 114 | "id": 12, 115 | "name": "Reebok Classic Leather Green", 116 | "price": "Rs 178.89", 117 | "imgSrc": "https://user-images.githubusercontent.com/87645745/197327646-dbf8bdba-5b7c-45ea-a9f0-0b3dcf2e9ad7.png", 118 | "bgGradient": [ 119 | "#55B7D8", 120 | "#B0D8D5" 121 | ] 122 | } 123 | ] 124 | } --------------------------------------------------------------------------------