Front-end/Design (3) 썸네일형 리스트형 히어로 등장 애니메이션 히어로 소개 페이지에 사용할 이미지에 배경과 히어로 이미지를 겹치게 두어 히어로가 등장하는 효과를 주고 싶었다. css로 애니메이션 적용 시 페이지가 로드되었을 때 애니메이션이 실행되므로 js로 현재 스크롤 위치와 이미지 컨테이너의 scrollY값을 받아 스크롤이 근처에 왔을 때 애니메이션이 실행되도록 하였다. 🧑💻 구현 const heroContainers = document.querySelectorAll(".hero-info-container"); const heroImages = document.querySelectorAll(".hero-image"); const hasAnimationPlayed = new Array(heroContainers.length); hasAnimationPlayed.f.. Hero select 디자인 구현 Marvel 프로젝트의 index의 히어로 선택 박스에 어떤 애니메이션을 넣을까 고민하다 고전 게임에서 자주 보았던 캐릭터 선택 효과를 이용하기로 했다. 💡 구현 방법 이미지 캐릭터와 로고 모두 배경이 투명인 png를 사용하였다. 또한 포토샵의 선택영역 색칠 기능을 이용해 그림자 레이어 이미지를 제작하였다. 코드 1. HTML 모바일과 데스크탑 버전에 다른 애니메이션 효과를 주어야했기 때문에 미디어 쿼리를 이용해서 필요에 mobile과 desktop을 클래스를 가진 컨테이너를 숨겼다. 아이템은 그림자 이미지를 넣을 히어로 박스와 히어로 이미지를 넣을 슬라이드박스로 나누었다. 2. CSS 그림자 박스에 relative, 슬라이드 박스에 absoulte를 준 후 진행 방향에 따라 left, right, to.. Bouncing Logo Screen Saver 만들기 화면 모서리에 부딪히면 bounce하는 png 이미지를 js로 구현해 페이지에 디자인 요소를 추가하고 싶었다. 기술 포스팅에 적절하진 않은 같지만 KPT 회고 방법론을 사용해 볼 것이다. 💡 KEEP 1. 구글링 키워드를 잘 이용했다. (Bouncing, screen saver, js) 2. 잘 정리된 설명을 바탕으로 원하는 애니메이션을 구현할 수 있었다. https://dev.to/s1mpson/creating-bouncing-logo-with-javascript-4ekg Creating a Bouncing Logo with JavaScript ⛹🏽♀️ So, recently I've seen a YouTube video about DVD bouncing logo and thought, why not.. 이전 1 다음
