Bing's

[js] var idx = idx2 = 0; function shutterMotion(){ var shutterCount = $(".shutter").length; idx2 = (idx + 1) % shutterCount; $("shutter").hide(); $("shutter:eq("+idx2+")").show(); idx = idx2; $(".top").finish().animate({"top":"0"}).animate({"top":"-50vh"}); $(".btm").finish().animate({"bottom":"0"}).animate({"bottom":"-50vh"}); } See the Pen shutter motion slider by seobin (@lullu-lalla) on Code..

jquery test 2018. 8. 2. 10:30

[출처]http://goni9071.tistory.com/entry/%ED%81%AC%EB%A1%AC-%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-ajax-%ED%85%8C%EC%8A%A4%ED%8A%B8%ED%95%98%EA%B8%B0 Mac을 사용하시는 분들은 터미널에서,open -a Google\ Chrome --args --disable-web-security위와 같이 입력하여 실행하시면 된다고 합니다.[출처]http://jag212.github.io/ChromeCrossDomain/

jquery test 2018. 6. 4. 13:59

[ download before / after HTML file ] 현재 업로드한 파일은 우리가 흔히 볼 수 있는 트리구조의 차트이다. 부서/그룹을 선택하고 그에 속해있는 팀들을 확인하고 싶을 때 사용할 수 있는 파일인데 이 곳에 event.stopPropagation()을 적용시켜보았다. 결과>> before : checkbox를 클릭하면 닫혀있던 구조가 열리기도 하고, 닫히기도 하면서 부모요소인 .item에 영향을 끼친다 after : checkbox를 클릭하면 구조가 닫혀있던 열려있던 상관없이 check를 넣었다뺐다 할 수 있다. [before]자식요소 checkbox를 클릭할때마다 부모요소 .item에 영향을 끼친다. See the Pen RMmpJN by seobin (@lullu-lalla) ..

jquery test 2018. 4. 13. 14:24

https://www.w3schools.com/jquery/event_stoppropagation.asp에서 [정의와 사용법]에는 event.stopPropagation () 메서드는 부모 요소에 이벤트 버블링을 중지하여 부모 이벤트 핸들러가 실행되지 않도록합니다. 라고 나와있다 ** 버블링 : 자식 요소로부터 부모 요소로 올라오며 실행되는 것을 이벤트 버블링(Event Bubbling)이라고 한다. 바로 아래를 따라해보면서어떤건지 간단하게 느껴보자면 div 태그 클릭 p태그 클릭 span태그 클릭 이렇게 html를 구성한 후에 클릭한 영역의 텍스트가 나오도록 할 것이다 (기본적인 마크업? 이지 않을까, 부모요소 안에 자식요소들이 생기는 것) 여기서 미리 생각해 볼 수 있는 것은 div를 클릭하면 "di..

jquery test 2018. 4. 13. 10:07

See the Pen fullpage.js + skrollr.js by seobin (@lullu-lalla) on CodePen.

jquery test 2018. 1. 19. 16:05

See the Pen skroll : data-anchor-target test by seobin (@lullu-lalla) on CodePen. data-anchor-target 테스트 : 퍼포먼스를 줄 element를 skrollr-body 밖에 위치시키고 skrollr-body 안에 특정 section에서 그 element를 작동시키려는 테스트! 특정 section안에 element를 작동시키려면 그 section에 id값을 주어, element에 data-anchor-target="그 섹션의 id값"을 이어주면 된다. [ HTML ] motion01 motion02 motion03 1 2 3 4 HTML구성 자체를모션이 들어갈 element들을 skrollr-body 바깥으로 빼고그 element..

jquery test 2018. 1. 19. 15:18

[ skrollr | 스크롤 기반 애니메이션 ] 원본 : https://github.com/Prinzhorn/skrollr 플러그인 참고-----### Official * [skrollr-menu](https://github.com/Prinzhorn/skrollr-menu) - Hash navigation* [skrollr-ie](https://github.com/Prinzhorn/skrollr-ie) - IE < 9 CSS fixes* [skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets) - Keyframes inside CSS files ### Third party * [skrollr-colors](https://github...

jquery test 2018. 1. 17. 16:02

[ Html skrollr data-attributes ] Absolute vs relative modeabsolute mode (or document mode) data- [offset] - [anchor]입니다. #여기서 offset은 정수 (0은 기본값) data-0 = data-start = data-0-start : 스크롤 상단이 0 일 때.data-100 = data-100-start : 스크롤 상단이 100 일 때.data--100 = data--100-start : 스크롤 상단이 -100 일 때 (써넣은 offset값이 지점에 따라 상대적일 수 있다는 점을 명심!!)data-end = data-0-end : 오프셋이 0이지만 맨 위가 아닌 문서의 맨 아래부터 세는 경우. 즉, 페이지 하단에..

jquery test 2018. 1. 17. 16:01