# interactive

15개의 포스트

Horizontal Scrolling of web page

수평 스크롤 효과를 구현하고 있으며, 사용자가 일반적으로 수직으로 스크롤을 해도 페이지가 수평으로 스크롤 된다.주의해야 할 사항은, 사용자가 어떤 화면을 사용할지 알 수 없기 때문에 픽셀을 사용한 고정적인 사이즈 대신에 vw vh 라는 상대 단위를 사용한다.!codep

2022년 4월 3일
·
0개의 댓글
post-thumbnail

[JavaScript] 마우스 wheel 이벤트를 조작하여, Zoom 기능 구현

마우스 스크롤 휠 이벤트를 이용하여, DOM 이벤트 조작 & CSS 변환으로 작업 영역을 확대 / 축소 할 수 있는 기능을 만들어 보자.!codepenchriscoyier/embed/oNzLRza?default-tab=html%2Cresult

2022년 3월 21일
·
0개의 댓글
post-thumbnail

[CSS] Raise the Curtains

스크롤의 배경이 dark 에서 light 으로 바뀌고, 위에 있는 내용도 sticky position 일 때, light 에서 dark으로 바뀌는 효과를 말한다.오직, HTML 과 CSS로만 구현을 해볼 것이다.css 변수를 만들어 , 나중에 필요에 따라 쉽게 변경할

2022년 3월 21일
·
0개의 댓글
post-thumbnail

스크롤 상태 표시 바 (@support)

article을 보다보면 스크롤을 내리는 일이 많아서 스크롤에 맞게 header에 진행 상황을 표시해주는 것을 종종 보곤 했는데, 평소에 그 기능을 어떻게 구현할 수 있을까 라는 의문점을 가지고 있었다. 외국의 문서들을 살펴보다가 좋은 글을 발견하여, 추후에 내가 그

2022년 3월 20일
·
0개의 댓글
post-thumbnail

Water Wave Text

text에 멋진 효과들을 넣으려면 대부분이 겹치기(?)를 활용하는 것 같아 보인다. 겹치기를 활용하면 유저에겐 하나의 텍스트처럼 보이지만 이 점을 활용해 눈에 보이는 하나의 텍스트에 겹쳐진 텍스트들로 효과를 주면 된다.text에 물결이 흐르는 애니메이션을 구현하기 위해

2021년 7월 27일
·
0개의 댓글
post-thumbnail

3D Foldable Card

이번에는 3D로 접을 수 있는 카드를 만들어 봤습니다. 따라해볼 수 있는 영상 링크 같이 달아둘게요.3D로 접는 모션을 구현하기 위해 그에 맞는 속성을 알아야만 했습니다. 그 속성들은 아래와 같습니다.transform-style: preserve-3d;이 속성을 가진

2021년 7월 22일
·
0개의 댓글
post-thumbnail

3D Responsive Touch Slider (Swiper.js)

Swiper.js에는 3D Effect Coverflow라는 UI/UX가 있다. 이를 사용해보자.여기서는 HTML, CSS보다는 Swiper.js의 api를 어떻게 활용하는지가 관건이므로 그 부분 코드를 살펴보자.

2021년 7월 16일
·
0개의 댓글
post-thumbnail

Skew Card

transform: skew 속성은 원래 알고 있었지만 ::after와 ::before 엘리먼트를 겹쳐서 이런 시각적인 효과를 주는 발상을 할 수 있다는 것에 감탄했다.추가로, filter라는 속성에 대해 간략하게나마 알 수 있었다. 위의 이미지에서 blur효과를 볼

2021년 7월 6일
·
0개의 댓글
post-thumbnail

Curved Active Tab

online tutorial 유튜브를 보고 굉장히 맘에 드는 UI/UX를 발견해서 후딱 따라 만들어봤습니다.이 UI/UX에서의 키 포인트는 active된 li의 오른쪽 border에 radius를 주는 것이 포인트입니다.after와 before 엘리먼트를 추가해서 이를

2021년 7월 5일
·
0개의 댓글
post-thumbnail

Javascript-17 (HTML position and size)

특히 인터랙티브한 이미지 구현을 원하는 분들이라면 꼭 봐야하는 것이 스크롤을 다루는 것이라고 생각한다.사실 매번 찾아봐도 나쁠건 없지만 작업속도 등을 고려하면 기본적인 것은 미리 익혀두는 것이 좋을 것 같다.읽기 전용 메소드요소의 border, scrollbar, ma

2021년 4월 29일
·
0개의 댓글
post-thumbnail

React 쇼핑몰 클론코딩 : 3. 옵션 선택 시 인터랙티브 반응, 로컬스토리지 장바구니 저장

사용자가 상품 옵션을 선택하면 선택한 옵션의 내용과 수량 조절이 가능한 박스가 추가되는 반응을 구현하였다. 장바구니 담기를 선택한 정보를 로컬스토리지에 저장하고 장바구니 화면에서 한 번에 확인할 수 있게 한다.

2021년 4월 10일
·
0개의 댓글
post-thumbnail

인터랙티브 웹 개발 공부 시작!

나는 애플 제품을 하나도 사용하고 있지 않지만 애플에 좋은 개발자들이 많이 있다는 것을 알고 있다. 포트폴리오를 만들려고 생각하던 중 어떤 글을 읽었는데 애플 홈페이지를 들어가서 참고를 많이 해보라고 했다. 그래서 들어가보니 정말 디자인적으로도 깔끔하고, 효과도 넘

2021년 3월 12일
·
0개의 댓글
post-thumbnail

Interactive Web Study 1

Interactive Web ( feat. 1분코딩 )

2020년 12월 31일
·
0개의 댓글
post-thumbnail

Button Hover Animation

오늘은 버튼 hover시에 유저에게 멋진 애니메이션을 보여주도록 만들어봤습니다.online tutorial 유튜브 강의를 참고했습니다.이 인터페이스를 만들기 위한 키 포인트는 다음과 같습니다.애니메이션이 일어나는 4개의 border를 자식 span 4개로 구현한다.ho

2020년 11월 15일
·
0개의 댓글
post-thumbnail

JavaScript는 왜 쓰고 뭐가 다른가.

정적인 HTML에서 동적인 효과를 구현하고자 사용한다.보통 인터렉티브(interactive)한 페이지 구현이라 한다.인터프리터소스코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말함.소스코드를 목적코드로 옮기는 컴파일과 대비된다.인터프리터는 소스코드를 한줄 한줄 읽어

2020년 5월 3일
·
0개의 댓글