뚱땅뚱땅 (5) 썸네일형 리스트형 [CSS3] pure CSS로 parallax scrolling 구현하기 안녕하세요, 김선진입니다. 이번에 회사에서 기능 소개 랜딩 페이지를 만들면서, 디자이너 분께 parallax scrolling으로 해줬으면 한다는 부탁을 받았는데요! 솔직히 처음 들어본 이름이라 생소했는데, (14년도 쯤에는 유행이었다고 합니다.) 애플의 제품소개 페이지에서 사용된 기능을 parallax라고 칭한다는 걸 알았습니다. 어쨌든, 이번에는 이 parallax scrolling을 pure css로 구현하는 방법에 대해 써보겠습니다. (opacity가 변경되는 trigger 형식의 애니메이션 같은 경우는... 따로 구현했습니다) 0. 서론 먼저, Parallax란? 직역하면 '시차'다. 천문학에서 가까이 있으면 빠르게 움직이고 멀리있으면 느리게 움직인다고 하는 그 개념이다. 시차 (Parallax.. [HTML5/JavaScript] 직소퍼즐 만들기 4(完) : 퍼즐 게임으로 만들기 dog-foooot.tistory.com/22 [HTML5/Javascript] 직소퍼즐 만들기 3: 퍼즐 조각 무작위로 섞기 dog-foooot.tistory.com/21 [HTML5/JavaScript] 직소퍼즐 만들기 - 2: 드래그드롭으로 퍼즐넣기 dog-foooot.tistory.com/20 [HTML5/JavaScript] 직소퍼즐 만들기 - 1 : 파일 입력 안녕하세요, 김선진입니다. 주말.. dog-foooot.tistory.com 안녕하세요, 김선진입니다. 직소 퍼즐 마지막 시리즈입니다. 직소 퍼즐을 게임으로 만들자! 1. 퍼즐 조각이 맞춰졌을 때 성공 여부 검사 2. 퍼즐 맞추기 타이머 생성 3. CSS (알아서 하시길) 기존 코드에 이어서 작업합니다. 1. 퍼즐 성공 여부 검사 1-1.. [HTML5/Javascript] 직소퍼즐 만들기 3: 퍼즐 조각 무작위로 섞기 dog-foooot.tistory.com/21 [HTML5/JavaScript] 직소퍼즐 만들기 - 2: 드래그드롭으로 퍼즐넣기 dog-foooot.tistory.com/20 [HTML5/JavaScript] 직소퍼즐 만들기 - 1 : 파일 입력 안녕하세요, 김선진입니다. 주말에 블로그 글을 3개나 써야 해서(업보...) 시리즈물로 쓰려고 직소퍼즐 만들기를 기획했는데요, dog-foooot.tistory.com 안녕하세요, 김선진입니다. 저번 시리즈에 이어 이번에는 아래 3가지 기능을 퍼즐에 추가해봅시다. 1. 퍼즐 조각을 랜덤하게 셔플 2. 퍼즐 다시 시작 기존 코드에 이어서 작업합니다. 1. Suffle 알고리즘 1-1. O(N log N) 간단하게 접근해보면 각각의 퍼즐 조각에 난수를 할당하고 난수.. [HTML5/JavaScript] 직소퍼즐 만들기 - 2: 드래그드롭으로 퍼즐넣기 dog-foooot.tistory.com/20 [HTML5/JavaScript] 직소퍼즐 만들기 - 1 : 파일 입력 안녕하세요, 김선진입니다. 주말에 블로그 글을 3개나 써야 해서(업보...) 시리즈물로 쓰려고 직소퍼즐 만들기를 기획했는데요, 코딩하는 동안 스크린샷찍는 걸 까먹어서... 1탄에서는 input과 canva dog-foooot.tistory.com const numColsToCut = 4; const numRowsToCut = 4; function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preven.. [HTML5/JavaScript] 직소퍼즐 만들기 - 1 : 파일 입력 안녕하세요, 김선진입니다. 주말에 블로그 글을 3개나 써야 해서(업보...) 시리즈물로 쓰려고 직소퍼즐 만들기를 기획했는데요, 코딩하는 동안 스크린샷찍는 걸 까먹어서... 1탄에서는 input과 canvas를 이용해서 입력받은 이미지를 4*4로 쪼개서 퍼즐 박스에 넣는 것입니다. const numColsToCut = 4; const numRowsToCut = 4; function allowDrop(ev) { ev.preventDefault(); } function updateImageDisplay() { const preview = document.querySelector('.preview'); const input = document.querySelector('input'); while(preview... 이전 1 다음
