분류 전체보기 (37) 썸네일형 리스트형 히어로 등장 애니메이션 히어로 소개 페이지에 사용할 이미지에 배경과 히어로 이미지를 겹치게 두어 히어로가 등장하는 효과를 주고 싶었다. 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.. getBoundingClientRect element.getBoundingClientRect()로 사용 element의 size와 element와 viewport 사이의 상대적 거리에 대한 값을 저장하고 있는 DOMRect 오브젝트를 반환한다. HTML 삽입 미리보기할 수 없는 소스 - width는 기본적으로 padding과 border-width에 content의 너비를 더한 값이 된다. - box-sizing을 border-box로 하면 content의 자체 너비 (border-box로 계산된 너비)가 된다. 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.. HTML 특수문자표 http://ieo.kr/?mode=utils&exec=specialchar HTML 특수문자표 - 토쳐라이딩 HTML 특수문자표 ieo.kr this 사용법 eventListner의 callback 함수 안에서 this를 사용하면 this는 eventListner가 부착된 element를 가리킨다. 하지만 callback 함수 안의 event인자를 사용해 event.target은 event를 trigger시킨 element를 가리키므로 둘은 다를 수 있다. /* Delete Button */ const div = document.createElement("div"); const span = document.createElement("span"); span.innerText = "✕"; div.appendChild(span); div.setAttribute("id", "delete-btn"); td2.appendChild(div); td2.style.displ.. append, appenChild와 remove, removeChild append vs appendChild append는 node object나 text에도 사용할 수 있고 여러 개 한번에 추가가 가능하다. appendchild는 node object에만 사용할 수 있고 한번에 한 개만 추가가 가능하다. 그리고 추가한 node를 반환한다. remove vs removeChild remove는 node.remove()로 사용하고 해당 노드를 메모리 상에서 삭제한다. removeChild는 parentNode.removeChild(node)로 사용하고 두 노드의 관계을 끊은 후 node를 반환한다. 이미 push된 파일을 .gitignore에 등록했을 때 git rm -r --cached [.gitignore에 추가한 파일] 후에 커밋하면 된다. 이전 1 2 3 4 5 다음
