parent
							
								
									c5107688cf
								
							
						
					
					
						commit
						2f47190a10
					
				
				 14 changed files with 332 additions and 64 deletions
			
			
		| After Width: | Height: | Size: 259 KiB | 
| After Width: | Height: | Size: 1.5 MiB | 
| After Width: | Height: | Size: 6.6 KiB | 
| After Width: | Height: | Size: 6.6 MiB | 
| @ -0,0 +1,36 @@ | |||||||
|  | import React, { useEffect, useState } from "react"; | ||||||
|  | import projectorIcon from "../../../../assets/icons/projector.svg"; | ||||||
|  | import lightIcon from "../../../../assets/icons/light.svg"; | ||||||
|  | import _ from "lodash"; | ||||||
|  | 
 | ||||||
|  | export default function Header() { | ||||||
|  |   return ( | ||||||
|  |     <header className="container flex flex-row justify-between z-50 transform -translate-y-24"> | ||||||
|  |       {[32, 17, 0, -17, -32].map((light, index) => ( | ||||||
|  |         <Light degree={light} key={index}/> | ||||||
|  |       ))} | ||||||
|  |     </header> | ||||||
|  |   ); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | const Light = ({ degree }) => { | ||||||
|  |   return ( | ||||||
|  |     <div | ||||||
|  |       className="flex flex-col items-center relative" | ||||||
|  |       style={{ transform: `rotate(${degree}deg)` }} | ||||||
|  |     > | ||||||
|  |       <img src={projectorIcon} alt="" className="w-12 h-12" /> | ||||||
|  |       <img | ||||||
|  |         src={lightIcon} | ||||||
|  |         alt="" | ||||||
|  |         className={_.join( | ||||||
|  |           [ | ||||||
|  |             "absolute z-50 light-animation", | ||||||
|  |           ], | ||||||
|  |           " " | ||||||
|  |         )} | ||||||
|  |         style={{ transform: `scale(6) translateY(24%)` }} | ||||||
|  |       /> | ||||||
|  |     </div> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
| @ -0,0 +1,47 @@ | |||||||
|  | .light-animation { | ||||||
|  |   animation-name: light-animation; | ||||||
|  |   animation-duration: 6s; | ||||||
|  |   animation-iteration-count: 1; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @keyframes light-animation { | ||||||
|  |   0% { | ||||||
|  |     opacity: 1; | ||||||
|  |   } | ||||||
|  |   3% { | ||||||
|  |     opacity: 0; | ||||||
|  |   } | ||||||
|  |   6% { | ||||||
|  |     opacity: 1; | ||||||
|  |   } | ||||||
|  |   9% { | ||||||
|  |     opacity: 0; | ||||||
|  |   } | ||||||
|  |   30% { | ||||||
|  |     opacity: 1; | ||||||
|  |   } | ||||||
|  |   33% { | ||||||
|  |     opacity: 0; | ||||||
|  |   } | ||||||
|  |   36% { | ||||||
|  |     opacity: 1; | ||||||
|  |   } | ||||||
|  |   39% { | ||||||
|  |     opacity: 0; | ||||||
|  |   } | ||||||
|  |   60% { | ||||||
|  |     opacity: 1; | ||||||
|  |   } | ||||||
|  |   63% { | ||||||
|  |     opacity: 0; | ||||||
|  |   } | ||||||
|  |   66% { | ||||||
|  |     opacity: 1; | ||||||
|  |   } | ||||||
|  |   69% { | ||||||
|  |     opacity: 0; | ||||||
|  |   } | ||||||
|  |   100% { | ||||||
|  |     opacity: 1; | ||||||
|  |   } | ||||||
|  | } | ||||||
					Loading…
					
					
				
		Reference in new issue