백그라운드 영상과 swiper 연계
const video = document.querySelector('.video-background')const swiperText = new Swiper('.swiper', { speed: 1600, loop:true, mousewheel: { }, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }})swiperText.on('slideChange', function() { gsap.to(video, 1.6, { currentTime: (video.duration / (this.slides.len..
2024. 7. 9.
horizon parallax, particle
new Swiper(".slider", { //direction:"vertical", speed:2000, mousewheel: { enabled:true, sensitivity:2.4, }, spaceBetween: 18, parallax:true, //freeMode:true}):root{ --transition:1.5s cubic-bezier(0.2, 0.6, 0, 1) ;}.slider {height: 100%;}.slider__layer{position: absolute; /* transition: var(--transition) !important; */ inset:0; background-size: cove..
2024. 7. 6.
swiper bind
document.querySelectorAll(".slider").forEach((n, i) => { window[`slider${i+1}`] = new Swiper(n, { freeMode:true, centeredSlides:true, direction:"vertical", mousewheel:true, slidesPerView:1.75, slidesOffsetBefore: -125, })})bindSwipers(slider1, slider2, slider3, slider4); ..
2024. 7. 6.
gsap+smoothScroll
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);if(ScrollTrigger.isTouch !==1){ ScrollSmoother.create({ wrapper:".wrapper", content:'.content', smooth:1.5, effects:true })}//topgsap.fromTo(".hero-section", { opacity:1}, { opacity: 0, scrollTrigger: { trigger: ".hero-section", start: "center", end: "820", scrub: true }})/..
2024. 7. 6.
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.
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.
