├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SKY.GIT 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

SKY.GIT

17 |

Awesome Hover effect 😍

18 |
19 |
20 |
21 | 203 |
204 | 205 | 206 | 207 | 208 | 209 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // - Noel Delgado | @pixelia_me 2 | 3 | const nodes = [].slice.call(document.querySelectorAll('li'), 0); 4 | const directions = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' }; 5 | const classNames = ['in', 'out'].map(p => Object.values(directions).map(d => `${p}-${d}`)).reduce((a, b) => a.concat(b)); 6 | 7 | const getDirectionKey = (ev, node) => { 8 | const { width, height, top, left } = node.getBoundingClientRect(); 9 | const l = ev.pageX - (left + window.pageXOffset); 10 | const t = ev.pageY - (top + window.pageYOffset); 11 | const x = l - width / 2 * (width > height ? height / width : 1); 12 | const y = t - height / 2 * (height > width ? width / height : 1); 13 | return Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4; 14 | }; 15 | 16 | class Item { 17 | constructor(element) { 18 | this.element = element; 19 | this.element.addEventListener('mouseover', ev => this.update(ev, 'in')); 20 | this.element.addEventListener('mouseout', ev => this.update(ev, 'out')); 21 | } 22 | 23 | update(ev, prefix) { 24 | this.element.classList.remove(...classNames); 25 | this.element.classList.add(`${prefix}-${directions[getDirectionKey(ev, this.element)]}`); 26 | } 27 | } 28 | 29 | 30 | nodes.forEach(node => new Item(node)); 31 | 32 | 33 | 34 | 35 | m -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Bree+Serif); 2 | 3 | /* the important bits */ 4 | li { 5 | perspective: 400px; 6 | } 7 | 8 | .info { 9 | transform: rotate3d(1, 0, 0, 90deg); 10 | width: 100%; 11 | height: 100%; 12 | padding: 20px; 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | border-radius: 4px; 17 | pointer-events: none; 18 | background-color: #5F7161; 19 | } 20 | 21 | .in-top .info { 22 | transform-origin: 50% 0%; 23 | -webkit-animation: in-top 300ms ease 0ms 1 forwards; 24 | animation: in-top 300ms ease 0ms 1 forwards; 25 | } 26 | 27 | .in-right .info { 28 | transform-origin: 100% 0%; 29 | -webkit-animation: in-right 300ms ease 0ms 1 forwards; 30 | animation: in-right 300ms ease 0ms 1 forwards; 31 | } 32 | 33 | .in-bottom .info { 34 | transform-origin: 50% 100%; 35 | -webkit-animation: in-bottom 300ms ease 0ms 1 forwards; 36 | animation: in-bottom 300ms ease 0ms 1 forwards; 37 | } 38 | 39 | .in-left .info { 40 | transform-origin: 0% 0%; 41 | -webkit-animation: in-left 300ms ease 0ms 1 forwards; 42 | animation: in-left 300ms ease 0ms 1 forwards; 43 | } 44 | 45 | .out-top .info { 46 | transform-origin: 50% 0%; 47 | -webkit-animation: out-top 300ms ease 0ms 1 forwards; 48 | animation: out-top 300ms ease 0ms 1 forwards; 49 | } 50 | 51 | .out-right .info { 52 | transform-origin: 100% 50%; 53 | -webkit-animation: out-right 300ms ease 0ms 1 forwards; 54 | animation: out-right 300ms ease 0ms 1 forwards; 55 | } 56 | 57 | .out-bottom .info { 58 | transform-origin: 50% 100%; 59 | -webkit-animation: out-bottom 300ms ease 0ms 1 forwards; 60 | animation: out-bottom 300ms ease 0ms 1 forwards; 61 | } 62 | 63 | .out-left .info { 64 | transform-origin: 0% 0%; 65 | -webkit-animation: out-left 300ms ease 0ms 1 forwards; 66 | animation: out-left 300ms ease 0ms 1 forwards; 67 | } 68 | 69 | @-webkit-keyframes in-top { 70 | from { 71 | transform: rotate3d(-1, 0, 0, 90deg); 72 | } 73 | 74 | to { 75 | transform: rotate3d(0, 0, 0, 0deg); 76 | } 77 | } 78 | 79 | @keyframes in-top { 80 | from { 81 | transform: rotate3d(-1, 0, 0, 90deg); 82 | } 83 | 84 | to { 85 | transform: rotate3d(0, 0, 0, 0deg); 86 | } 87 | } 88 | 89 | @-webkit-keyframes in-right { 90 | from { 91 | transform: rotate3d(0, -1, 0, 90deg); 92 | } 93 | 94 | to { 95 | transform: rotate3d(0, 0, 0, 0deg); 96 | } 97 | } 98 | 99 | @keyframes in-right { 100 | from { 101 | transform: rotate3d(0, -1, 0, 90deg); 102 | } 103 | 104 | to { 105 | transform: rotate3d(0, 0, 0, 0deg); 106 | } 107 | } 108 | 109 | @-webkit-keyframes in-bottom { 110 | from { 111 | transform: rotate3d(1, 0, 0, 90deg); 112 | } 113 | 114 | to { 115 | transform: rotate3d(0, 0, 0, 0deg); 116 | } 117 | } 118 | 119 | @keyframes in-bottom { 120 | from { 121 | transform: rotate3d(1, 0, 0, 90deg); 122 | } 123 | 124 | to { 125 | transform: rotate3d(0, 0, 0, 0deg); 126 | } 127 | } 128 | 129 | @-webkit-keyframes in-left { 130 | from { 131 | transform: rotate3d(0, 1, 0, 90deg); 132 | } 133 | 134 | to { 135 | transform: rotate3d(0, 0, 0, 0deg); 136 | } 137 | } 138 | 139 | @keyframes in-left { 140 | from { 141 | transform: rotate3d(0, 1, 0, 90deg); 142 | } 143 | 144 | to { 145 | transform: rotate3d(0, 0, 0, 0deg); 146 | } 147 | } 148 | 149 | @-webkit-keyframes out-top { 150 | from { 151 | transform: rotate3d(0, 0, 0, 0deg); 152 | } 153 | 154 | to { 155 | transform: rotate3d(-1, 0, 0, 104deg); 156 | } 157 | } 158 | 159 | @keyframes out-top { 160 | from { 161 | transform: rotate3d(0, 0, 0, 0deg); 162 | } 163 | 164 | to { 165 | transform: rotate3d(-1, 0, 0, 104deg); 166 | } 167 | } 168 | 169 | @-webkit-keyframes out-right { 170 | from { 171 | transform: rotate3d(0, 0, 0, 0deg); 172 | } 173 | 174 | to { 175 | transform: rotate3d(0, -1, 0, 104deg); 176 | } 177 | } 178 | 179 | @keyframes out-right { 180 | from { 181 | transform: rotate3d(0, 0, 0, 0deg); 182 | } 183 | 184 | to { 185 | transform: rotate3d(0, -1, 0, 104deg); 186 | } 187 | } 188 | 189 | @-webkit-keyframes out-bottom { 190 | from { 191 | transform: rotate3d(0, 0, 0, 0deg); 192 | } 193 | 194 | to { 195 | transform: rotate3d(1, 0, 0, 104deg); 196 | } 197 | } 198 | 199 | @keyframes out-bottom { 200 | from { 201 | transform: rotate3d(0, 0, 0, 0deg); 202 | } 203 | 204 | to { 205 | transform: rotate3d(1, 0, 0, 104deg); 206 | } 207 | } 208 | 209 | @-webkit-keyframes out-left { 210 | from { 211 | transform: rotate3d(0, 0, 0, 0deg); 212 | } 213 | 214 | to { 215 | transform: rotate3d(0, 1, 0, 104deg); 216 | } 217 | } 218 | 219 | @keyframes out-left { 220 | from { 221 | transform: rotate3d(0, 0, 0, 0deg); 222 | } 223 | 224 | to { 225 | transform: rotate3d(0, 1, 0, 104deg); 226 | } 227 | } 228 | 229 | /* you can ignore this ones */ 230 | ul { 231 | padding: 0; 232 | margin: 0 0 50px; 233 | } 234 | 235 | ul:after { 236 | content: ""; 237 | display: table; 238 | clear: both; 239 | } 240 | 241 | li { 242 | position: relative; 243 | float: left; 244 | width: 200px; 245 | height: 200px; 246 | margin: 5px; 247 | padding: 0; 248 | list-style: none; 249 | } 250 | 251 | li a { 252 | display: inline-block; 253 | vertical-align: top; 254 | text-decoration: none; 255 | border-radius: 4px; 256 | } 257 | 258 | li h3 { 259 | margin: 0; 260 | font-size: 16px; 261 | color: #EFEAD8; 262 | cursor: pointer; 263 | } 264 | 265 | li p { 266 | font-size: 12px; 267 | line-height: 1.5; 268 | color: #EFEAD8; 269 | } 270 | 271 | li .normal { 272 | width: 100%; 273 | height: 100%; 274 | background-color: #EFEAD8; 275 | color: rgba(52, 73, 94, 0.6); 276 | box-shadow: inset 0 2px 20px #EFEAD8; 277 | text-align: center; 278 | font-size: 50px; 279 | line-height: 200px; 280 | } 281 | 282 | li .normal svg { 283 | pointer-events: none; 284 | width: 50px; 285 | } 286 | 287 | li .normal svg path { 288 | fill: #5F7161; 289 | } 290 | 291 | * { 292 | box-sizing: border-box; 293 | } 294 | 295 | body { 296 | background-color: #272525; 297 | } 298 | 299 | h1 { 300 | margin: 0 auto 5px; 301 | text-align: center; 302 | } 303 | 304 | h3 { 305 | font-family: Verdana, Geneva, Tahoma, sans-serif; 306 | } 307 | 308 | li h3:hover { 309 | color: #5F7161; 310 | } 311 | 312 | .sky { 313 | width: 840px; 314 | margin: 0 auto; 315 | } 316 | 317 | header { 318 | font-family: Verdana, Geneva, Tahoma, sans-serif; 319 | text-align: center; 320 | margin: 50px 0 25px; 321 | color: #fff; 322 | } 323 | 324 | header p { 325 | margin: 0; 326 | color: #fff; 327 | } --------------------------------------------------------------------------------