toggle hover 간단하게 만들어보자.

See the Pen jQuery hover toggle by Oskar Radon (@oskarradon) on CodePen.

hover란 간단하게 위의 것을 의미한다.

특정 엘리먼트에 마우스를 올리면, 작동하고, 아니면 말고.

toggle과 구분된다.

토글은 버튼을 누르는 행위로 그 구분을 지으니 말이다.

 

그런데 이 토글기능과 호버를 섞을 수는 없을까?

그니까, 위 처럼 강제로 누를 필요 없이, 위에 슥 얹기만 해도 작동하고, 나중에 다시 올릴 때 해제하는 그런느낌?

 

 

백문이 불여 일견!

이렇게 박쥐를 위를 마우스가 슥 지나가면, 랜덤태그클라우드가 작동 되고, 다시 슥 마우스를 스치면,

사라지는 간단한 기능이다.

 

본디 테트리스 기능이나 넣을려고 했지만, 이게 눈에 띄어 넣어봤다.

랜덤 태그 클라우드로 여기서 작품을 골라 봐도 되고,

아니면, 2022.09.15 - [각 종 it/티스토리 등 프로그래밍] - 구글 브로거 랜덤게시글 버튼을 만들어볼까... 어? 적용이 안 되???

구글 브로거 랜덤게시글 버튼을 만들어볼까... 어? 적용이 안 되???

박쥐를 눌러 랜덤 게시글을 즐기면 된다.

 

웹투니 (tistory.com)

웹투니

이 곳은 구현 한 사이트이고,

 

코드는

<script>

var tag_on_off='on';

const bg = document.getElementsByClassName('tags-cloud');

$(function(){

  $('#ran').hover(function() {

    if(tag_on_off=='on'){

    main();

    bg[0].style.visibility = 'visible';

    tag_on_off='off';  

    }else if(tag_on_off=='off'){

    tag_on_off='on';  

    }

  }, function() {

    if(tag_on_off=='on'){

    bg[0].style.visibility = 'hidden';

    }

  })

})

</script>

 

이거다. 맨 위 코드펜 코드에다 if 구절만 넣었다.

태그클라우드가 생각보다 소스를 많이 잡아먹어, 일부러 박쥐를 터치 할 때 메인스레드가 작동하도록 하였고, display로 none을 설정하니, 레이아웃도 사라져 재탕 할 수 없어, visibility를 사용하였다.

 

사실, 요즘은 이렇게 구현 하는 사람은 필자밖에 없을지라.

모두를 스크롤 트리거를 사용 해서 전체적인 애니 효과를 주는지라...

하면 되는데, 귀찮다.

 

지금은 태그만 클라우드 처리했지만, 마음만 먹으면, 댓글도 가능하니... 조만간 함 적용을...