반응형

Animate 2

[css] 슬라이딩 텍스트 캐러셀(css only)

사이트를 개발하는데 있어 생뚱 맞은 게 왔다. 무려 keyframe을 통한 애니메이션 구동... 이게 내가 만드려고 해보니 너무 어려웠다. 왜냐하면 x축 이동만 있는 게 아니라 y축도 이동시키면서 이동시 모습은 해당 부분이 보이지 않아야 하므로 그래서 기본 코드에서 기존 3개에서 4개로 밀어넣는 부분을 고쳤고, 해당 넓이를 찾기위해서 message 태그 위치에서 개발자 도구로 top, width를 넣어가며 해당 태그의 길이와 위치를 일일히 찾아야만 했다. 그리고 overflow hidden, animation css를 꺼둔 상태로. 해야 이동되지 않음. code epen에서 위치랑 실제 구동 되는 위치가 달라서 원본 소스코드로는 -3, -6, -9, -12.5em으로 잡야한다. 좀 많이 어려웠지만 ani..

취업/UI 디자인 2022.10.14

[CI4]HTML 특정 태그 위치로 스크롤 이동하기.

여기로 이동됩니다. 이걸 클릭하면요 내용은 정말 간단하다. function scrollEvent(_params, speed) { let anchor_id = $(_params).attr('data-anchor'); if( !speed ) var speed = 'slow'; var a_tag = $("#"+anchor_id); if(a_tag.length > 0){ $('html, body').animate({ scrollTop: a_tag.offset().top }, speed); } } 원형 코드와 다르게, 나에게 맞게 수정을 진행하였다. 원형 코드 https://web.webmini.net/anchor_tab_scroll 버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) - 웹미니 : 웹속의 작..

취업/CodeIgniter 2022.07.11
728x90