Js58 scrolla plugin https://maximzhurkin.github.io/jquery-scrolla/ Scrolla - jQuery plugin for reveal animations when scrollingInclude animate.css Include jQuery and jquery-scrolla Add html Initialize plugin $(document).ready(function(){ $('.animate').scrolla(); }); Custom settings $('.animate').scrolla({ // default mobile: false, // disable animation on mobiles once: false, // onmaximzhurkin.github.io card111.. 2024. 7. 5. gsap toArray, forEach gsap 배열 반복 gsap.utils.toArray(".s2ul li").forEach(function(card){ }).s2 ul{display: flex; gap: 30px;flex-direction: column; }.s2 ul li{position: relative; display: flex; align-items: center; justify-content: center; background-image: url(img/1.jpg); margin-bottom: 50px; width:300px; height: 350px; overflow: hidden; }.s2 ul li::before{content: '';width: 100%; height: 100%; background-col.. 2024. 7. 5. gsap2 .s4 .round{position: absolute; top: 40%; left:50%; transform: translateX(-50%); display: block; width: 1500px; height: 1500px; border-radius: 50%; background-color: chocolate; z-index: 1;}$(function(){ gsap.registerPlugin(ScrollTrigger); gsap.timeline({ scrollTrigger:{ trigger: '.s4', start: "top 50%", end : "30% 0%", scrub:1, .. 2024. 7. 5. gsap 1 $(function(){ gsap.registerPlugin(ScrollTrigger); gsap.timeline({ scrollTrigger:{ trigger: ".s2ul", //대상 start: "top 90%", //대상의 탑과 브라우저의 90%가 만날때 end: "50% 100%" , scrub: 1, //빠르기 markers:true, } }) // to :0% ~ 100% 진행, from은 -100% - 0% 진행, fromto -100% ~ 100% 전체, set 순식간에 .to('.s2ul li:nth-child(1)', {y:"-300.. 2024. 7. 5. scroll let lastScrollTop = 0;gnb = document.getElementById('gnb');window.addEventListener("scroll", function(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop; if(scrollTop > lastScrollTop){ gnb.classList.add('active'); } else { gnb.classList.remove('active'); } lastScrollTop = scrollTop;}) 2024. 7. 4. scroll, clip-path Scroll animationlet s1 = document.getElementById('s1');let s2 = document.getElementById('s2');window.addEventListener("scroll", function(){ s1.style.left = window.scrollY +'px'; s2.style.left = - window.scrollY + 'px';}).wrap{position: fixed;top: 0; left: 0; width: 100%; height: 100vh; z-index: 100;}.wrap .sbox{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:.. 2024. 7. 4. sort, filter var products = [ { id: 0, price: 5800, title: "학교종이 땡땡" }, { id: 1, price: 3000, title: "동해물과" }, { id: 2, price: 5500, title: "전국노래자랑" },];//가격정렬$(".lowprice").on("click", function () { products.sort(function (a, b) { return a.price - b.price; }); console.log(products); $(".row").html(""); products.forEach(function (a, i) { prodlist(a, i); });});//상품명 역순.. 2024. 7. 1. ajax var products = [ {id:0, price:5800, title: '학교종이 땡땡'}, {id:1, price:3000, title: '동해물과'}, {id:2, price:5500, title: '전국노래자랑'},]function prodlist(a, i){ var prodbox2 = ` ${a.title} 가격 : ${a.price} `; $('.row').append(prodbox2);}products.forEach(function(a, i){ prodlist(a, i);})var btncount = 0;$('.more').on('click', function(){ btncount += 1; if(btncount == 1){ $.get('https.. 2024. 7. 1. select, append, forEach select 상품선택 모자 셔츠 95 100 $('.form-select').eq(0).on('input', function(){ var value = $('.form-select').eq(0).val(); // 셀렉트 선택값 if(value == '셔츠'){ $('.form-select').eq(1).removeClass('form-hide'); }})// 축약 $('.form-select').eq(0).on('input', function(e){ var value = e.currentTarget.value; // var value = this.value 와 같음 if(value == '셔츠'){ $('.form-select').eq(1).removeClass('f.. 2024. 7. 1. array var car = ['소나타', 50000, 'white'];var car2 = { name: '아반떼', price: 3000 };var car3 = { name: '아반떼', price: [2500, 2000, 1000] };$('.name').html(car2.name);$('.price').html(car2['price']);$('.color').html(car[2]);$('.price2').html(car3.price[0]); //할인된 가격 car.sort(); //정렬car.slice(1,3) //1번째부터 3번째 전까지 var products = [ { id : 0, price : 70000, title : 'Blossom Dress' }, { id : 1, price : 50.. 2024. 7. 1. bubble e.target; //유저가 실제로 누른거e.currentTarget; //이벤트리스너 달린 곳e.preventDefault(); //기본동작막기e.stopPropagation(); //body같은 상위요소 버블링 막기 function tapshow(i) { $(".tab-button").removeClass("orange"); $(".tab-button").eq(i).addClass("orange"); $(".tab-content").removeClass("show"); $(".tab-content").eq(i).addClass("show");}$(".list").click(function (e) { tapshow(e.target.dataset.id);}); Pr.. 2024. 7. 1. 정규표현식 //정규표현식 regular expression 'abc'.includes('a'); // a가 들어있니 /a/.test('abc'); // a 들어있니 /[a-z]/.test('asdf asdf'); //영문소문자있니/[a-zA-Z]/.test('asAdf asdf'); //영문있니/[ㄱ-ㅎ가-힣]/.test('asAdf asdf');//한국어있니 /[0-9]/.test('asAdf asdf'); // 숫자있니 /\s/.test('asAdf asdf'); //아무문자하나 들어있니, 특수기호포함, 복수는 +붙임/^a/.test('asAdf asdf'); //a로 시작하니/a$/.test('asAdf asdf'); //a로 끝나니/a|b/.test('asAdf asdf'); //a 또는 b가 있니/.. 2024. 7. 1. setTimeout, setInterval, 이전 다음 슬라이드 setTimeoutsetTimeout(function(){ }, 1000) //1초후에 실행 setInterval(function(){ }, 1000) //1초마다 실행var count = 5;var settime = setInterval(function(){ count -= 1; if (count > 0) { document.querySelector('.atext').innerHTML = count; } else { document.querySelector('#albox').style.display = 'none'; clearTimeout(settime); }}, 1000);setInterval 슬라이드var slides = $('.slides li'), slideCou.. 2024. 7. 1. addClass, 아코디언, tab, attr, each, hasClass $(".navbar-brand").html("logo");$(".navbar-brand2").css({ color: "red" });$(".navbar-brand").addClass("show");$(".navbar-brand").removeClass("show");$(".navbar-brand").toggleClass("show");$(".btn1").on("click", function () { $("#al").show();});$(".btn-close").on("click", function () { $("#al").hide(); // or slideUp()});//아코디언 $('.title').click(function(){ $(this).next().slideToggle().siblin.. 2024. 7. 1. addEventListener document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){ document.getElementsByClassName('list-group')[0].classList.add('show'); document.getElementsByClassName('list-group')[0].classList.toggle('show'); document.querySelectorAll('.list-group')[0].classList.toggle('show'); document.querySelector('.list-group').classList.toggle('show');})document.getElementBy.. 2024. 7. 1. scroll, resize, offset().top 1$(window).resize(function(){ if($(window).width() > 768){ $(".gnb").show(); }else{ $(".gnb").hide(); }});$(window).scroll(function(){ if($(this).scrollTop() > 0){ $header.addClass("sticky"); var $infoTh = $infos.offset().top - 300; var $infoEx = false; if(!$infoEx){ if($(this).scrollTop() > $infoTh){ $infos.addClass.. 2024. 6. 30. 다크모드 로컬 저장 const body = document.querySelector("body"), cMode = document.querySelector(".c-mode");let getMode = localStorage.getItem("mode");if (getMode && getMode == "dark") { cMode.classList.add("dark"); body.classList.add("dark");}cMode.addEventListener("click", () => { cMode.classList.toggle("dark"); body.classList.toggle("dark"); if (!body.classList.contains("dark")) { return localStorage.set.. 2024. 6. 30. 플러그인없이 이미지 슬라이드 var sCount = 3;var sCurrent = 0;var imgw = $(".slide").width();var timer;//하얀점넣고 클릭시for (let i = 0; i ${i}`; $(".slide-dot").append(dots); $(".slide-dot a") .eq(i) .on("click", function (e, i) { e.preventDefault; if ($(e.currentTarget).hasClass("active")) { return; } sNext = $(e.currentTarget).index(); goto.. 2024. 6. 30. masonry 메이슨리 레이아웃 https://masonry.desandro.com/ MasonryInstall Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower: bower install masonry --save Install with npm: npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works omasonry.desandro.com head Home All .. 2024. 6. 30. rect() 를 이용한 마스크 효과 원리 : clip: rect(0px,60px,200px,0px);https://www.w3schools.com/cssref/tryit.php?filename=trycss_clip $(function () { function initScene () { var $container = $('#scene-3'), // 컨테이너 $masks = $container.find('.mask'), // 마스크 $lines = $masks.find('.l.. 2024. 6. 30. 플러그인 없이 패럴렉스 효과 1-5 1-1 1-3 1-6 2-1 2-2 2-3 2-4 $(function(){ var section = $('#contents > .parallax > div'); var sectionInfo = []; var objectInfo = []; section.each(function(i){ var tg = $(this); sectionInfo.push(tg.offset().top); objectInfo.push([]); var child = tg.children(); child.each(function(j){ var t = $(this); objectInfo[i][j] = t.position().top; }); }); section.c.. 2024. 6. 29. offset().top 메뉴 스크롤하기 paper works email $(function(){ var menu = $('#top_menu > ul > li'); var contents = $('#contents > div'); menu.click(function(e){ e.preventDefault(); $(this).addClass('on').siblings().removeClass('on'); var tg = $(this); var i = tg.index(); var section = contents.eq(i); var tt = section.offset().top; $('html, body').stop().a.. 2024. 6. 29. 썸네일이 있는 갤러리 생략 생략 $(function(){ var current = 1; var thumbListSize = 6; var thumbnail = $('#thumbnail'); var prev = thumbnail.find('> .left'); var next = thumbnail.find('> .right'); var container = thumbnail.find('> .container > ul'); var containWidth = thumbnail.find('> .container').width(); var thumb = container.find('.. 2024. 6. 29. 연속된 이미지들 스크롤이나 슬라이더로 조절하기 이미지를 120장 뿌려놓고 스크롤이나 슬라이더로 조절하기 Scroll 이미지 120장 생략 Scroll $(document).ready(function(){ var imageList = $('#slideList > p'); $('#slider').slider({ slide:function(event, ui){ var max = $('#slider').slider( "option", "max" ); var min = $('#slider').slider( "option", "min" ); var start = 0; var end = imageList.size() - 1; var imgI.. 2024. 6. 29. 웹디자인기능사 실기 제이쿼리 부분 $(function(){ //slide var count = 0; function slide(){ if(countul>li").mouseenter(function(){ $(this).find(".sub").stop().slideDown(); }) $("nav>ul>li").mouseleave(function(){ $(".sub").stop().slideUp(); }) //menu tab key $("nav>ul>li>a").focusin(function(){ $(this).next().slideDown(); $(this).parent().addClass("on"); }) $(".sub li.. 2024. 6. 29. toggle menu, 햄버거 토글 document.body.classList.add('js');var toggle = document.querySelector('#toggle-navigation');var menu = document.querySelector('#menu');var menuItems = document.querySelectorAll('#menu li a');toggle.addEventListener('click', function(){ if (menu.classList.contains('is-active')) { this.setAttribute('aria-expanded', 'false'); menu.classList.remove('is-active'); } else { menu.clas.. 2024. 6. 28. input radio 라디오버튼 값으로 특정 css 변경 라디오 버튼을 텝 대용으로 사용할때 표 그래프 $("input[name='viewDmd']").on("click", function () { var selec = $("input[name='viewDmd']:checked").val(); if(selec == 1){ $('.tableSection').removeClass('disable'); $('.grpSection').addClass('disable'); }else if(selec == 2){ $('.grpSection').removeClass('disable'); $('.tableSection').ad.. 2024. 5. 13. 팝업 popup 팝업 열기 content 닫기 $(document).ready(function(){ var $openBtn = $('.open-btn'), $closeBtn = $('.close-btn'), $modal = $('.modal-container'); $openBtn.click(function () { modalShow(); }); $closeBtn.click(function () { modalHide(); }); function modalShow() { $modal.addClass('active'); $dimLayer.show(); console.log('show button c.. 2024. 5. 5. 이전 1 2 3 다음
