├── css └── styles.css ├── images ├── hero-one.jpeg ├── img-one.jpeg ├── img-three.jpeg └── img-two.jpeg ├── index.html └── js └── script.js /css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | width: 100%; 10 | height: 100vh; 11 | background: #bebeb8; 12 | } 13 | 14 | nav { 15 | width: 100%; 16 | height: 100px; 17 | margin: 0 auto; 18 | display: flex; 19 | flex-direction: row; 20 | flex-wrap: wrap; 21 | justify-content: flex-start; 22 | align-items: center; 23 | text-transform: uppercase; 24 | font-family: "Monument Extended"; 25 | } 26 | 27 | .menu-item { 28 | flex: 1; 29 | } 30 | 31 | .menu-left { 32 | text-align: left; 33 | margin-left: 4em; 34 | } 35 | 36 | .menu-center { 37 | text-align: center; 38 | } 39 | 40 | .menu-right { 41 | text-align: right; 42 | margin-right: 4em; 43 | } 44 | 45 | .menu-link { 46 | padding: 0 30px; 47 | } 48 | 49 | .hero-image { 50 | position: absolute; 51 | top: 0; 52 | width: 100%; 53 | height: 100vh; 54 | display: flex; 55 | justify-content: center; 56 | align-items: center; 57 | } 58 | 59 | .wrapper-img { 60 | position: absolute; 61 | overflow: hidden; 62 | position: relative; 63 | margin: 0 auto; 64 | width: 50%; 65 | height: 100vh; 66 | } 67 | 68 | img { 69 | width: 100%; 70 | height: 100%; 71 | object-fit: cover; 72 | } 73 | 74 | .box { 75 | background: #bebeb8; 76 | opacity: 1; 77 | position: absolute; 78 | top: 0; 79 | bottom: 0; 80 | right: 0; 81 | left: 0; 82 | z-index: 2; 83 | } 84 | 85 | .images { 86 | position: absolute; 87 | width: 100%; 88 | height: 100vh; 89 | display: flex; 90 | justify-content: space-between; 91 | align-items: center; 92 | } 93 | 94 | .img { 95 | position: absolute; 96 | top: 40%; 97 | left: 50%; 98 | transform: translate(-50%, -50%); 99 | width: 300px; 100 | height: 400px; 101 | background: black; 102 | } 103 | 104 | .left { 105 | background: url("../images/img-one.jpeg") 106 | no-repeat 50% 50%; 107 | background-size: cover; 108 | } 109 | 110 | .right { 111 | background: url("../images/img-three.jpeg") 112 | no-repeat 50% 50%; 113 | background-size: cover; 114 | } 115 | 116 | p { 117 | width: 100%; 118 | text-align: center; 119 | position: absolute; 120 | top: 45%; 121 | left: 50%; 122 | transform: translate(-50%, -50%); 123 | color: red; 124 | font-family: "Voyage"; 125 | font-size: 300px; 126 | } 127 | 128 | .title .letter { 129 | display: inline-block; 130 | line-height: 1em; 131 | } 132 | 133 | 134 | .sidebar-text { 135 | font-family: "Monument Extended"; 136 | position: absolute; 137 | top: 20%; 138 | right: 0.4em; 139 | transform: translate(-50%, -50%); 140 | font-size: 40px; 141 | color: transparent; 142 | -webkit-text-stroke: 1px rgb(117, 113, 113); 143 | } 144 | 145 | .projects { 146 | position: absolute; 147 | bottom: 10%; 148 | left: 10%; 149 | transform: translate(-50%, -50%); 150 | text-transform: uppercase; 151 | font-family: "Monument Extended"; 152 | 153 | } 154 | 155 | .img-nav { 156 | position: absolute; 157 | right: 10%; 158 | bottom: 13%; 159 | transform: translate(-50%, -50%); 160 | text-transform: uppercase; 161 | color: #000; 162 | font-family: "Monument Extended"; 163 | 164 | } 165 | 166 | .next { 167 | position: relative; 168 | top: 40px; 169 | left: 80px; 170 | font-family: "Monument Extended"; 171 | 172 | } 173 | -------------------------------------------------------------------------------- /images/hero-one.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/website-landing-page-animation-antidote/f5a6461c81dc422f43c65659cf871729de73645e/images/hero-one.jpeg -------------------------------------------------------------------------------- /images/img-one.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/website-landing-page-animation-antidote/f5a6461c81dc422f43c65659cf871729de73645e/images/img-one.jpeg -------------------------------------------------------------------------------- /images/img-three.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/website-landing-page-animation-antidote/f5a6461c81dc422f43c65659cf871729de73645e/images/img-three.jpeg -------------------------------------------------------------------------------- /images/img-two.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/website-landing-page-animation-antidote/f5a6461c81dc422f43c65659cf871729de73645e/images/img-two.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CG120422 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | 38 |
39 |
40 |
41 |

antidote

42 |
43 |
003
44 |
projects
45 |
46 | 47 | 48 |
49 |
50 |
51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | var textWrapper = document.querySelector(".title"); 2 | textWrapper.innerHTML = textWrapper.textContent.replace( 3 | /\S/g, 4 | "$&" 5 | ); 6 | 7 | anime.timeline().add({ 8 | targets: ".title .letter", 9 | translateY: [100, 0], 10 | translateZ: 0, 11 | opacity: [0, 1], 12 | easing: "easeOutExpo", 13 | duration: 2000, 14 | delay: (el, i) => 4800 + 40 * i, 15 | }); 16 | TweenMax.to(".box", 2.4, { 17 | y: "-100%", 18 | ease: Expo.easeInOut, 19 | delay: 1, 20 | }); 21 | 22 | TweenMax.from("img", 4, { 23 | scale: "2", 24 | ease: Expo.easeInOut, 25 | delay: 0, 26 | }); 27 | 28 | TweenMax.to(".wrapper-img", 2.4, { 29 | width: "400", 30 | height: "500", 31 | ease: Expo.easeInOut, 32 | delay: 3.6, 33 | }); 34 | 35 | TweenMax.from(".img", 0.4, { 36 | opacity: 0, 37 | ease: Expo.easeInOut, 38 | delay: 3.4, 39 | }); 40 | 41 | TweenMax.to(".left", 2, { 42 | x: "-400", 43 | rotation: -10, 44 | ease: Expo.easeInOut, 45 | delay: 3.8, 46 | }); 47 | 48 | TweenMax.to(".right", 2, { 49 | x: "100", 50 | rotation: 10, 51 | ease: Expo.easeInOut, 52 | delay: 3.8, 53 | }); 54 | 55 | TweenMax.staggerFrom( 56 | ".menu > div, .hero-container > div", 57 | 2, 58 | { 59 | opacity: 0, 60 | y: 30, 61 | ease: Expo.easeInOut, 62 | delay: 4.2, 63 | }, 64 | 0.1 65 | ); --------------------------------------------------------------------------------