반응형 IT/script_ex21 [script] 옆에서 나오는 menu script 메뉴버튼에 있는 하얀화살표는 코드어썸을 사용해서 아이콘은 가져와 봤다. 폰트어썸 처음 써봤는데 div, class만 가져오면 바로 사용할수 있어서 좋은것 같다. font-size, color 를 이용해서 css로 크기,색 까지 변경해서 사용할수 있어서 편리함. 위에 링크는 폰트어썸 사이트에서 가져와서 연결하면 된다. $(document).ready(function(){ $("#quick_bar span").click(function(){ $("#quick_bar").toggleClass('on'); }); }); #quick_bar{position:fixed; right:-255px; top:0; width:255px; height:100%; background:black; transition:0.5s .. 2020. 5. 23. [script] 이미지 돋보기 효과 스크립트(magnifier) 보통 쇼핑몰에 상품 이미지에 마우스 올렸을때 확대되서 돋보기처럼 보이게 하는 효과를 codepen 에서 찾아서 해봤다. 예전에 꾸며놨던 티스토리 배경인데 이미지가 있어서 아주 유용하게 잘쓰고 있다 ㅋㅋㅋ 사진 크기 비율을 맞게 하지않아서 세로로 찌그러진 느낌이 있긴한데 사이즈가 맞는 이미지 잘 구해서 쓰면 괜찮다. $(document).ready(function () { var nativeWidth = 0; var nativeHeight = 0; $(".content_left").mousemove(function (e) { if (!nativeWidth && !nativeHeight) { var imgObject = new Image(); imgObject.src = $(".smallImg").attr(.. 2020. 5. 23. [slick] slick 슬라이드 (breakpoint , 딤드+유튜브) slick 슬라이드 반응형. 전체 width 값에 따라 breakpoint 옵션을 사용해서 슬라이드 3 -> 2 -> 1 개씩 보이게 한다. +) 추가 img 클릭 했을때 레이어 팝업이 어둡게 뜨면서 유튜브화면 뜨는 스크립트 추가!! head안에 아래 링크 연결 해줘야 한다. slick + 유툽팝업이 연결되는 링크인데 이것도 역시 codepen에 올라와있던것 참고해서 사용함. script를 head영역에 넣은게 아니고 body에 넣어서html 아래에 있다. .slick-slide{ margin:0 25px; border:1px solid red;} .slick-slide span{display:block; } .slick-slide img{width:600px; height:600px; width:100.. 2020. 5. 21. [script] dot_움직이는 배경화면 (codepen) codepen 돌아다니다가 스크립트를 이용해 연결되는 점들이?? 움직이는 특이한 배경화면이 있어서 정리해 봤다. 스크립트를 이렇게 다 써야하는지는 모르겠지만... 다 써있길래 고대로 가져와서 사용해봄.. ;(function (window, document) { "use strict"; var pluginName = 'particleground'; function extend(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { var obj = arguments[i]; if (!obj) continue; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] .. 2020. 5. 17. [script] top_btn 탑버튼 animation 스크롤을 150이상 내렸을 때 탑버튼이 보임. 탑 버튼 클릭 했을 때 제일 윗페이지로 이동하는 애니메이션. 스크롤 이동해도 오른쪽 하단에 계속 있어야하기때문에 position:fixed로 고정시킴. $(window).scroll(function(){ if ($(window).scrollTop() > 150){ $("#top_btn").addClass("on"); } else { $("#top_btn").removeClass("on"); } }); $("#top_btn").click(function(){ $("body,html").animate({scrollTop:0},500); }); TOP #top_btn{position:fixed; right:50px; bottom:-50%; width:55px; h.. 2020. 5. 15. [script] gnb menu slide toggle2 gnb 영역에 마우스 hover 했을때 아래 sub_gnb 리스트 + 하얀색 배경이 같이 내려와야한다. 오른쪽 메뉴버튼 클릭했을때 마찬가지로 서브메뉴와 뒷배경이 같이 보여져야 함. 스크립트도 hover 했을 때와 click 했을 때 두가지로 써야함. 추가되는 class는 on으로 통일해서 css 한번만 써도 될수 있게 했다. $(document).ready(function(){ $(".gnb").hover(function(){ $("#header").toggleClass('on'); $(".gnb_bar").stop().slideToggle(); $(".bg").stop().slideToggle(); }); $('.gnb_btn').click(function(){ $('#header').toggleCla.. 2020. 5. 12. [script] slick 슬라이드 visual 영역(arrow, dots) slick 슬라이드를 이용한 visual 영역 이미지 scale 축소되는 애니메이션효과. slick 슬라이드 next prev 버튼 - 옵션 arrows page 버튼 - 옵션 dots slick script 효과는 코드펜에서 찾아서 적용해봤습니다! $(document).ready(function(){ var $slick_carousel = $(".slide_wrap"); $slick_carousel.on('init', function(event, slick) { $(".slide_li").eq(0).addClass("active"); }); $slick_carousel.on('afterChange', function(event, slick, currentSlide){ $(".slide_li").remo.. 2020. 5. 9. [script] 리스트 영역 클릭했을 때 넓어지는 효과 해당 영역 클릭 했을 때 영역 배경이 밝아지면서 width값 넓어지고, 하단 border, sub_txt 가 보여지는 효과. $(document).ready(function(){ $('.s1_slide > li').click(function(){ $(this).addClass('on'); $('.s1_slide > li').not(this).removeClass('on'); }); }); carina 티스토리 블로그 carina 클릭했을때 아래 아래 화살표 사라짐~~ carina border 왼 -> 오~~ carina 클릭했을때 가로 넓어지면서 배경색 opacity 조절해서 밝아짐~~ .s1_slide{width:100%; height:410px; box-sizing:border-box; } .s1_s.. 2020. 5. 7. [script] 언어 선택 - 아래로 내려오는 리스트_toggle select 태그처럼 아래로 내려오게 하는 script 언어 선택 및 여러가지 리스트 스타일이 아래로 내려오는 fadeToggle 제이쿼리. 클릭했을때 배경 및 화살표 이미지가 바뀌면서 하위 리스트들이 보여짐. $(document).ready(function(){ $('.lang').click(function(){ $(this).toggleClass('on'); $(this).find('.sub_lang').fadeToggle(300); }); }); LANGUAGE KOR ENG JAP .lang{position:absolute; right:92px; top:30px; display:inline-block; width:140px; height:40px; border:1px solid #dfdfdf; b.. 2020. 5. 4. 이전 1 2 3 다음 반응형
