클릭 반응형 웹페이지, 클릭하면 고양이가 사라진다?!

새로운 것을 만드는 것은 귀찮다.

만드는 것 자체는 귀찮지 않지만, 다른 사람에게 설명을 해야 한다는 것이 귀찮다.

물론 필자 같은 경우 '지식의 저주'를 너무 신경 쓰는 나머지 너무 자세히 설명하려다 오히려 어렵게 설명하는 경우가 이지만, 그렇다고 너무 지식의 저주를 생각하지 않고 설명 해 버리면 못 알아듣는 분들이 있어 가끔 딜레마에 빠진다.

특히나 필자 같이 머리 회전이 빠른 사람은 말하는 중간에도 여러가지 생각을 할 수 있어 대화 간 내용이 지루하면 가끔 말하다가도 다른 생각을 해 버리는 습관이 있어 가끔 곤란하기도 하다.

설명이나 대화 다음으로 어려운 것은 작명이다.

현재 게시글 제목을 '클릭 반응형 웹페이지, 클릭하면 고양이가 사라진다?!'라고 정하기는 했지만, 호기심만 자극했지 지금부터 쓰는 글에 대해 전부 설명 하지 못한다.

 

글의 가독성을 위해 화면 좀 넓혀 볼까?

필자의 홈페이지에는 양 사이드에 뭔가 많이 붙어있다.

어떤 님은 광고라고 생각하지만 나름 디자인이라고 생각한다.

2020/11/24 - [각 종 it/티스토리 등 프로그래밍] - 2560*1440은 QHD! 반응형 웹페이지 어쩔~

2560*1440은 QHD! 반응형 웹페이지 어쩔~

특히나 해상도가 높은 화면에서는 심심한 양 공백을 채우는 역할을 한다.

스마트폰에서도 마찬가지다.

최신폰들 화면의 특징은 길다는 것이다. 그로 인해 필자가 오른쪽 하단에 이렇게 고양이를 배치 해 놓아도 가독성을 해치지는 않지만, 그 이전들의 폰들의 화면 비율이나 해상도에서는 가독성이 좋지 않을 수도 있다.

본디 처음에는 최신폰을 사용하는 분들에게만 역점을 두기는 뒀지만... 어느 날 웹툰을 보다가 화면을 누르면 잡다한 장식품들이 없어지는 것들을 보며, 재미 있을 것 같아 함 만들어 보았다.

 

이미 클릭하면 고양이 발자국을 남기는 코드는 구현하고 있었고... fade도 구현하고 있었네.

그럼 끝났네.

컴퓨터 마우스 커서 흔적 남기는 애니메이션 효과 (tistory.com)

컴퓨터 마우스 커서 흔적 남기는 애니메이션 효과

위의 것이 고양이 발자국 남기는 코드고,

fade는 플로팅 광고(배너) 함 달아보자. (tistory.com)

플로팅 광고(배너) 함 달아보자.

이것을 보면 되는거고.

 

그래서?

이것이 결과물이다.

화면을 클릭하면 고양이가 사라지고 다시 클릭하면, 고양이가 나타나고.

 

pc에서도 적용 해 놓았다.

클릭하면 사라지고,

다시 클릭하면 나타나고,

 

pc에서는 큰 티가 안 나지만, 모바일에서는 어느정도 가독성을 확보 할 수 있게 되었다.

발자국을 남기고 사라지는 고양이.

다시 발자국과 함께 나타나는 고양이.

슈뢰딩거의 고양이? 갑자기 또 양자학이 땡기네...

 

if절은 설명 할 필요없지??

어차피 클릭마다 스위치 역할을 하는 자바 구문만 만들면 되니까... 그리 어렵지는 않을 것이다.