우당탕탕 코딩생활

CSS 추가된 부분은 썸네일의 slider tuhmb과 active입니다. 썸네일 이미지를 의미하며 클릭했을 시 활성화 및 동작을 위한 active부분입니다. script 이번 스크립트에서는 선택자를 일일히 만들어주는 것이 아니라, 함수안에 객체 형식으로 넣어보겠습니다. 먼저 images라는 변수안에 각각의 이미지를 넣어줍니다. let images = [ "img/sliderEffect03.jpg", "img/sliderEffect04.jpg", "img/sliderEffect02.jpg", "img/sliderEffect01.jpg", "img/sliderEffect06.jpg" ]; // 선택자 만들기, 함수안에 객체 형식, 선택자를 변수화 function imageSlider(parent, imag..

슬라이드 이펙트 여섯번 째! 버튼으로 이동하는 슬라이드와 닷 버튼을 눌렀을 때 해당 이미지로 이동하는 슬라이드 이펙트입니다. CSS /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역이기 때문에 와이드 값을 이미지만큼 설정 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 부모 : 움직이는 영역 / 이미지의 사이즈가 450이고 다섯장이기 때문..

CSS HTML slider__inne부분에서 이미지를 각각 나눠주고 마지막 사진에서 다시 1번으로 돌아오기 위해 class 명에 s1,s2...를 붙여 주었습니다. script 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = sliderWrap.querySelectorAll(".slider"); //개별이미지 let currentIndex = 0; //현재 ..

css HTML script let sliderInterval = 3000; function sliderEffect(){ currentIndex++; sliderInner.style.transition = "all 0.6s"; sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex + "px)";

이번 포스팅은 지난 시간에 했던 소스 코드에서 일부분만 바꾸면 간단히 적용시킬 수 있습니다. Javascript //javascript sliderInner.style.transform = translateX("0px"); // -800 * 0 sliderInner.style.transform = translateX("-800px"); // 이미지의 위드값 // -800 * 1 sliderInner.style.transform = translateX("-1600px"); // -800 * 2 sliderInner.style.transform = translateX("-2400px"); // -800 * 3 sliderInner.style.transform = translateX("-3200px"); //..

좌로 슬라이드 효과 CSS와 HTML은 지난시간과 동일합니다. 바로 스크립트 두개재~ 👉 //javascript sliderInner.style.transform = translateX("0px"); // -800 * 0 sliderInner.style.transform = translateX("-800px"); // 이미지의 위드값 // -800 * 1 sliderInner.style.transform = translateX("-1600px"); // -800 * 2 sliderInner.style.transform = translateX("-2400px"); // -800 * 3 sliderInner.style.transform = translateX("-3200px"); // -800 * 4 sli..

트랜지션 효과 웹 페이지에서 자주 쓰이는 효과입니다 ☺️ reset 부분은 기존에 했던 마우스 효과와 동일합니다. 자, 그럼 두개재~ CSS .slider:nth-child()는 해당 슬라이드를 선택하게 합니다. before는 해당 요소 앞에 가상 요소를 생성하고, 내용을 추가해줍니다. content 속성을 사용하여 각 슬라이드에 대한 캡션을 지정합니다. content CSS 속성 중 하나로 요소의 콘텐츠를 정의하는데 사용 됩니다. 일반적으로 before와 after의 가상 요소에서 사용합니다! z-index가 의미하는 것은 각 슬라이드에 대한 쌓임 순서입니다. 이 이펙트에서는 이미지를 겹쳐놓는 것이 포인트입니다! 이 값이 높을 수록 슬라이드는 상위에 표시되게 되며 슬라이드가 순서대로 보이도록 조정하는데..