본문 바로가기

WEB/내맘대로 코딩

(16)
Bounce Effect Bounce css3 Animation 공튀기는 모션을 배너에 넣어주세요. 얼마나 걸릴까요? 2일걸린다하면 좀 오바같아서 정직하게 하루 걸립니다. 라고 했더니, 하루나 걸려요? 라고 오히려 반문하는 윗분.. 얼마나 튀어오르는지 그런 오차범위 컨펌해주시는 시간 감안해서 그 정도 걸릴거 같다고 했더니, 그런거 없을거라고 해서 그럼 반나절이요. 라고 했더니 그래도 반나절 걸려요? 두시간도 많다고 느끼는 윗분.. 그냥 뚝딱하면 만들어지는 줄 아는 윗분.. ㅋㅋㅋㅋ 마치 인공지능이 코딩하는 것마냥 단순하게 생각하는 윗분.. 최대한 빨리 처리해드리겠다고 하니 그제야 잘 부탁드린다고 당부하시는 윗분.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 요즘 윗분의 눈높이가 높아지다보니 요구사항도 한단계 업되는 추세다. 카카오나 네이버에서 서비스..
최악의 슬라이드 플러그인 기능구현 OwlCarousel2 슬라이드 중에서 가장 후진 것으로 평가받는 플러그인 bxslider, swiperjs 보다도 후진 것으로 평가받는 최악의 슬라이드 플러그인이나 현 프로젝트에서 사용중이라 어쩔수 없이 정리한다. owlcarousel2 에서 커스텀가능한 기능구현 마지막 슬라이드에서 더보기 기능 추가 슬라이드 마지막에서 링크나 버튼이 동적으로 붙게하는 경우 슬라이드 1 슬라이드 2 슬라이드 3 재생/정지 기능 정지버튼을 눌러도 모바일에서 스와이프하면 재생이 되는데, 이를 정지시킬 필요가 있는경우 접근성 처리를 할때 좌우 버튼을 누르거나 정지버튼을 누른후 재생을 멈춰야하는데 owl은 스와이프시 재생이 다시 진행되는 버그가 있다. 정지나 재생을 구분짓는 클래스를 두고 해당 클래스가 붙었을때 컨트롤하면 이를..
드래그로 정렬가능한 컴포넌트 sortable 위젯 기능을 구현할 수 있는 가장 손쉬운 방법은 jquery-ui sortable 사용하는 것! 그런데 문제가 있다, 드래그만으로는 접근성에 위배된다. 장애인을 배려하지않는 ui/ux 구조! 손이 없거나 입으로 도구를 사용하는 장애인들에겐 드래그나 스와이프 행위가 쥐약이기 때문이다. 그래서 반드시 모바일에서는 터치할 수 있는 버튼이 존재해야 한다. 간혹, 없는 경우가 있는데 그건 접근성 통과후 제외시켰거나 접근성업체와의 물밑거래 후 권장사항으로 돌렸기 때문이다. 구글링을 하다보니, jquery-ui에 버튼 이동되는 컴포넌트를 발견했는데 angular로 구현되어 있었다. 참고 url : https://codepen.io/thgreasi/pen/Gqpiu jquery만을 사용하여 똑같이 구현..
셀렉트박스 url 이동 셀렉트박스 url 이동 팀원들과 공유할 작업목록이나 라우터 효과를 모방한 셀렉트 url 이동기능 class="title_brand">박보영 class="title_sub">사진전 class="selectbox"> class="heading">광고영상 //select option에 추가될 객체 var $href = { '웃을때': 'smile', '귀여울때': 'cutty', '광고영상': 'ad', '브이로그': 'vlog', '뮤직비디오': 'mv' }; function nav(){ this.init(); this.addEvent(); } nav.prototype.init = function(){ for(var i in $href){ $('', { value: $href[i] +'.html', 'dat..
일반스크롤 vs 아이스크롤 일반스크롤과 아이스크롤의 차이점이 뭘까? 리소스의 부담이 덜하고 접근성 측면에서 무난한 일반스크롤이 좋은 건가, 일반스크롤을 흉내낸 아이스크롤이 좋은 건가? 브라우저별 제약이 많았던 과거에 비해 현재는 차이가 거의 없어져서, 아이스크롤의 장점이 퇴색해버렸지만, 그래도 아이스크롤이 좀더 부드럽게 동작되는 것 같고 플러그인이라서 지원되는 api도 많아 응용이 가능한 점에 비추어볼때 장점이 많은것도 같고 진정한 승자는? 오늘 구현할 내용은 특히 탭 영역에 자주 출몰하고(?), 내용이 길어질 경우 스크롤이 생겨 스크롤시 더 내용이 있다는 걸 암시하도록 양쪽에 그라데이션 처리나 버튼을 두는 경향이 있는데 일반스크롤과 아이스크롤 두 버전으로 만들어본다. 출처는 codepen.io 타이틀에 적어두었다. 왼쪽으로 스크..
깜박임 효과 새로 등록된 아이템이 있는 경우, new 아이콘이 깜빡일 때 사용한다. 함수로 호출하는 형태이고, 매개변수를 대입하여 만들어보았다. 무한 반복은 별도의 로직이 필요하지만, 만들어두지 않았다. 각자 만들어보자. count 값으로 1억을 대입하면 되지않을까 싶다. 한 화면에 그 시간만큼 머무르지 않을테니까ㅋ new $(document).ready(function(){ /* count: 반복횟수 delayTime: 초기 지연시간 speed: 속도 */ fn_repeat(3,500,250); function fn_repeat(count,delayTime,speed){ var timer = null; var initNum = 0; while( initNum < count ){ _repeat(); initNum++..
배열메서드 - 필터링[2] forEach() 다른 예제, 여전히 익숙지가 않다. 책에서 참고한 예제다. 무슨 책이냐고? 안알려줌 케케케... ^,^@ 영원한 삼춘 맘 속 여신 박보영으로 예제를 만들어보았다! See the Pen BaoJdjK by rainydaymusickr (@rainydaymusickr) on CodePen. (function() { var imgItems = $('.grid .grid-item'); var imgs = $('.grid .grid-item img'); var buttons = $('#buttons'); var concept = {}; $(window).load(function() { imgs.each(function() { var nowImg = this; if ($(this).data('co..
배열메서드 - 필터링[1] 배열 필터링에 관여하는 메서드를 꼽으라면 forEach()와 filter()를 들 수 있다. forEach()와 filter()의 사용법을 우선 간단히 비교해본다. var singer = []; var girls = [{name:'아이린',age:29},{name:'슬기',age:26},{name:'웬디',age:26},{name:'조이',age:23},{name:'예리',age:21}]; /* forEach()는 객체나 배열 모두 루프 실행가능하며, 지정된 범위내 값인지 조건검사하여 새로운 배열에 추가함. */ girls.forEach(function(elem){ if( elem.age >= 23 && elem.age =23 && elem.age = value ){ row.element.show(); ..