nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/JavaScript

인터렉티브 강의에서 배운 내용을 응용한 예제! (야호) See the Pen Text transform with the mousemove event by NY KIM (@nykim_) on CodePen. 그라데이션으로 빛 효과를 만들고 background-position을 움직여 반사되는 느낌을 내봤다. 이때 그라데이션이 깔끔하게 잘리려면 background-clip:text 처리를 해야하는데, 그러기 위해서는 잘라낼 기준이 될 텍스트가 필요했다.... 그래서 어쩔 수 없이 data-text를 넣는 걸로 처리해부려따. (더 좋은 방법을 발견하면 알려줘 미래의 나!!!!) ++ 이건 이미지 때문에 코드펜에 올리지는 못했지만, 이런 식으로 그림자를 처리할 수도 있겠더라! 그림자가 될 회색의 블러처리 된 이..

2019. 9. 4.

Blog/JavaScript

기초편에 이어 중급편입니다. 공식 예제 중 ADVANCED에 해당하는 내용을 살펴보겠습니다 :-9 히어뤼고! 1. 섹션 와이프 (매뉴얼) 기초편에서는 단순히 아래에서 위로 올라와 고정되는 와이프였다면, 이번에는 상하좌우에서 슝 날아와 고정되는(?) 섹션 와이프를 구현해봅니다. 구현원리는 간단합니다. 너비높이 100%의 풀페이지 컨테이너를 만든 다음, 얘를 setPin으로 고정시킵니다. 그리고 그 안에 들어갈 여러 개의 섹션을 만들고 absolute 시킵니다. 그 다음에는 섹션의 위치를 -100%로 두었다가, 스크롤 되면 0% 위치로 움직이게 합니다. 여기에 GSAP을 쓰면 짱 편하니까 그렇게 작성합시다ㅋㅋㅋㅋㅋ 우선 마크업을 합니다. ONE TWO THREE FOUR CSS도 작성한 다음... #cont..

2019. 8. 27.

Blog/JavaScript

전부터 계속 써보고 싶었던 ScrollMagic 라이브러리!!! 를 드디어 공부해봅니다 (꺅) 참고한 글은 아래와 같습니다. - Building Interactive Scrolling Websites with ScrollMagic.js [링크] 1. 초기 설정 우선 아묻따 ScrollMagic을 도입해줍니다. CDN은 아래와 같습니다. 저 debug로 시작되는 파일은 화면에 인디케이터를 표시해주는데, 덕분에 좀 더 수월하게 작업이 가능합니다. 이 라이브러리는 jQuery도 지원해주는 거 같던데 여기선 그냥 바닐라로 작성하겠습니다ㅎㅎ 그리고 수려한 애니메이션 제작을 도와줄 GSAP도 도입합니다. GSAP 이외에 Velocity도 지원하고 있지만, 이 글에 따르면 GSAP이 좀 더 크로스브라우징이 잘 되어 ..

2019. 8. 26.

Blog/CSS

+ 이 글의 내용은 인프런의 [인터랙티브 웹 개발 제대로 시작하기] 강좌의 '종합예제' 부분 내용을 담고 있습니다. + 앞부분의 내용은 [CSS 3D] 인터랙티브 웹 효과 구현하기 (1) 에 있어요! 1. 스크롤에 맞춰 캐릭터 움직이기 지금은 캐릭터가 가만히 있어도 허우적거리고 있는데, 이유는 .running 클래스를 붙인 상태로 만들었기 때문입니다. 이 클래스가 스크롤에 맞춰 유동적으로 붙도록 하면서, 방향 설정도 함께 하겠습니다. 스크롤을 내리면 캐릭터가 벽쪽을 향하는 거고, 스크롤을 올리면 캐릭터가 내쪽을 바라보는 거죠. 우선 Character() 생성자 함수 부분에서 .char에 붙어있던 .running 클래스를 제거해주세요. 자! 캐릭터의 움직임은 메서드로 만들어 제어할 건데요. 생성자 객체로 ..

2019. 8. 12.

Blog/CSS

+ 이 글의 내용은 인프런의 [인터랙티브 웹 개발 제대로 시작하기] 강좌의 '종합예제' 부분 내용을 담고 있습니다. 1. 3D 공간 작성하기 가장 먼저 3D 공간을 작성합니다. 양옆에는 벽이 있고, 정면에 벽이 세 개 있는 구조입니다. 마크업은 world > stage > house 구조로 이루어져있습니다. Hello! Bonjour! Namaste! 안녕하세요! 다음은 CSS 차례입니다. 일단 윈도 화면을 다 덮을 거니까 html에게 height:100%를 줍니다. html { height: 100%; } body { margin: 0; padding: 0; min-height: 100%; background: #49b293; -webkit-overflow-scrolling: touch; } 그리고 3..

2019. 8. 5.

Blog/CSS

1. node.js 설치 (npm은 자동 설치된다) 2. 글로벌로 node-sass 설치 $ npm install -g node-sass $ node-sass -v (오류발생 시, npm rebuild node-sass를 쳐보자) 3. 명령어는 아래와 같다. $ node-sass [옵션] $ node-sass -w scss/style.scss css/style.css --output-style compressed node-sass를 전역으로 설치하면 이렇게나 편하게 쓸 수 있었다!!!! 이렇게 Compass와 작별했다 ^0^)/~ 앞으로 간단한 컴파일에는 node-sass를 쓰면 될 듯! 얼른 Gulp도 갈아타야할 텐데...ㅋㅋㅋㅋㅋ

2019. 8. 1.

Blog/CSS

1. Perspective (투영점) 1) perspective property 보고 있는 사람의 위치를 추정하여 투영점을 명시하면 3D 환경을 만들 수 있습니다. 말하자면 멀리 떨어진 사물은 작게, 가까이 있는 사물은 크게 만들어서 원근감을 주는 거죠. .scene--blue { /* perspective property */ perspective: 400px; } .panel--blue { transform: rotateY(45deg); } See the Pen Perspective property by Dave DeSandro (@desandro) on CodePen. 파란색 박스의 부모에게 perspective 속성을 주고, 박스에게는 transform을 시킨 모습입니다. 여기에서의 400px은 ..

2019. 7. 1.