javascript 썸네일형 리스트형 javascript - wheel_scroll 요즘 이론 공부하느냐고 만들시간이 없었지만 한달전에 만들어둔거가 기억나서 올리려한다. 스터디분이 이런거 해보면 어떠냐고해서 만들기 시작한건데 스크롤값을 정해두고 해당스크롤로 이동하는게 아니고 동일한 id,class를 추가한 블럭만큼 움직이게하는건데 이게 생각보다 편하고 버그도 없다. 링크:http://creatijin.dothome.co.kr/scroll/class_scroll/scroll.html 내가 개발했다고는 말은 못하고 다른사람이 한걸 토대로 좀 더 기능을 추가해보았다. 마우스 휠에 따라 위 아래로 이동하고 위에 상단 버튼을 클릭하면 그 해당하는 section으로 이동하게끔 추가를 했고 위에 메뉴바도 따라다니게 만들어놨다. 처음 포폴만들떄는 해당 스크롤값을 수작업으로 입력했는데 이제는 그럴필요없.. 더보기 javascript - parallax-bg 요즘 parallax를 좀 관심을 가지고있는데뭐 종류가 워낙 많아서 ㅋㅋ 다 해볼순 없지만 링크:http://creatijin.dothome.co.kr/project/parallax/bg/bg-parallax.html12345678910111213141516171819202122$(document).ready(function(){ $(window).scroll(function() { scollView(); }); function scollView() { var scolled = $(window).scrollTop(); $(".section1").css("backgroundPosition", 50+"%"+" "+"-"+scolled/12+"px"); $(".section2").css("backgroundP.. 더보기 javascript - e.page 간만에 좋은 이벤트를 봐서 따라만들어봤다. 토요타:http://www.toyota.co.kr/2016prius/ 상당히 잘 만든 페이지인데 여러기능이 들어가있다. step1에서는 마치 동영상처럼 이미지넘버를 계속넘겨서 영상처럼 표현한게 대단하게 느껴진다. step2에서는 마우스 움직임에 따른 박스크기조절이다. 더 밑에 내려가면 더 다양한게 있지만 난 2번째껄 만들어보았다. 링크:http://creatijin.dothome.co.kr/project/page/TOYOTA/toyota.html 옛날에 만들어 봤던 마우스 움직임을 계산하는 자바스크립트를 짜봐서 만들 수 있었던거 같다. 더보기 javascript - tiles-slide 직접 생각한건 아니고 나를 웹쪽으로 인도해주신분이 만든 슬라이드를 한번 따라해보았다. 물론 비슷만하지 잘 안된거 같아서 아직도 부족함을 느낀다. 링크:http://creatijin.dothome.co.kr/project/slider/tiles/tiles.html 아직까진 익스에서는 작동을 안하는데 이유를 잘 모르겠다. 당분간은 이 문제를 해결해야겠다. 크롬에서는 작동을 하지만 버튼을 연속해서 누르면 오작동이 이뤄진다. 더보기 javascript - auto-slide 링크:http://creatijin.dothome.co.kr/project/slider/auto/swipe-slide/auto.html 저번에 해결한 auto문제로 간단하게 슬라이드 제작해보았다. 생각한 이벤트가 정상작동하니 기분은 좋다. 좀 더 멋있는 다양한 컨텐츠를 만들어보고싶은데 플러그인도 좋지만 내가 직접만든다는게 뿌듯하다~ 다음에는 좀더 멋진걸로 만들어보자 더보기 javascript - setInterval 계속 해결이 안되던 auto-slide를 해결해서 속이 후련하다. 항상 index에 해당하는 버튼을 눌러도 멈추지않고 계속 작동했는데여럿의 도움을 받아서 드디어 해결했다. 이게 이번에 해결한 방법이다.물론 내가 해결했다기보다 도움을 많이 받았다.도움을 주신분한테 정말 감사의 인사를드리고싶다.setInterval로 변경을 하면서 가능하게 되었는데setInterval이 잘 이해가 안되지만 앞으로 이거에 대해서 공부를 좀 해줘야 겠다.이제 해결도 했겠다. 제대로 만들어봐야겠다. 더보기 Slider - double slide 지난 3일 동안의 결과물이다... 신난다~ 우연히 커뮤니티를 돌다가 2015년 인기있는 웹페이지?들을 모아둔걸 봤는데 참신한 슬라이드가 있었다. 링크 : http://codepen.io/suez/pen/JoWKKX 이걸보고 아 이거 괜찬다 해서 따라해봐야지 생각하고 만들어보기 시작했는데... css부터 새로운것도 많이보이고 SCSS으로 만들어진거라 이해하는데 상당히 오래걸렸다. 완벽하게 따라해보진 못했지만 비슷하게라도 나와서 기쁘다. 링크 : http://creatijin.dothome.co.kr/project/slider/double/double.html (모바일은 제대로 이벤트가 안나옵니다.) 저기서 배운 css는 앞으로 정리해놔야겠다. :before , :after content will-chang.. 더보기 javascript - 구구단 만들기 2탄 음 골머리좀 썩었다. 출력하는게 만만치 않았는데 계속해보니깐 되긴되더라... 12345678910cs 123456789101112131415161718192021222324252627 function timestabls1() { var result = ""; var start = ""; var end = ""; for (var i = 2; i 더보기 이전 1 2 3 4 5 6 다음
