├── app.js ├── images ├── img-1.jpg ├── img-2.jpg ├── img-3.jpg └── img-4.jpg ├── index.html └── styles.css /app.js: -------------------------------------------------------------------------------- 1 | gsap.registerPlugin(ScrollTrigger); 2 | 3 | gsap.utils.toArray('.section').forEach(section => { 4 | ScrollTrigger.create({ 5 | trigger: section, 6 | start: 'top top', 7 | pin: true, 8 | pinSpacing: false 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /images/img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/html-css-gsap-scroll-effect/866623ce7526610748cc4dc22591b343afef6146/images/img-1.jpg -------------------------------------------------------------------------------- /images/img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/html-css-gsap-scroll-effect/866623ce7526610748cc4dc22591b343afef6146/images/img-2.jpg -------------------------------------------------------------------------------- /images/img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/html-css-gsap-scroll-effect/866623ce7526610748cc4dc22591b343afef6146/images/img-3.jpg -------------------------------------------------------------------------------- /images/img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/html-css-gsap-scroll-effect/866623ce7526610748cc4dc22591b343afef6146/images/img-4.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animation Section Website 7 | 8 | 9 | 10 |
11 |
12 |
13 |

Organic Fruits

14 |

Choose from a
wide variety of options.

15 | 16 |
17 |
18 | food 19 |
20 |
21 |
22 |
23 |
24 |
25 |

26 | Delicious and nutritious foods that you can easily access 27 |

28 |
29 |
30 | food 31 |
32 |
33 |
34 |
35 |
36 |
37 |

Unique flavors and options to choose from

38 |
39 |
40 | food 41 |
42 |
43 |
44 |
45 |
46 |
47 |

We even serve ice cream

48 |
49 |
50 | food 51 |
52 |
53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 6 | 'Lucida Sans', Arial, sans-serif; 7 | } 8 | 9 | section { 10 | height: 100vh; 11 | position: sticky; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .one { 18 | background: #0c0d0d; 19 | } 20 | 21 | .two { 22 | background: #9ade6e; 23 | } 24 | 25 | .three { 26 | background: #fa7968; 27 | } 28 | 29 | .four { 30 | background: #2cbde4; 31 | } 32 | 33 | .container { 34 | display: grid; 35 | grid-template-columns: 1fr 1fr; 36 | height: 95vh; 37 | padding: 3rem calc((100vw - 1300px) / 2); 38 | } 39 | 40 | .column-left { 41 | display: flex; 42 | flex-direction: column; 43 | justify-content: center; 44 | align-items: flex-start; 45 | color: #000; 46 | padding: 0rem 2rem; 47 | } 48 | 49 | .column-left h1 { 50 | margin-bottom: 1rem; 51 | font-size: 2rem; 52 | font-style: italic; 53 | } 54 | 55 | .column-left p { 56 | margin-bottom: 2rem; 57 | font-size: 4rem; 58 | line-height: 1.1; 59 | } 60 | 61 | button { 62 | padding: 1rem 3rem; 63 | font-size: 1rem; 64 | border: none; 65 | background: #f5cd03; 66 | color: #0c0d0d; 67 | cursor: pointer; 68 | border-radius: 50px; 69 | } 70 | 71 | .column-right { 72 | display: flex; 73 | justify-content: center; 74 | align-items: center; 75 | padding: 2rem 2rem; 76 | } 77 | 78 | .image { 79 | width: 100%; 80 | height: 100%; 81 | max-width: 500px; 82 | max-height: 700px; 83 | } 84 | 85 | .text { 86 | color: #fff; 87 | } 88 | 89 | @media screen and (max-width: 768px) { 90 | .container { 91 | grid-template-columns: 1fr; 92 | } 93 | } 94 | --------------------------------------------------------------------------------