우당탕탕 코딩생활

이번 포스팅은 스크롤과 좌표를 이용해서 패럴랙스 효과를 줘보도록 하겠습니다! 다시 한 번 복습하는 개념으로 패럴럭스에 대해 알아보자면, ParallaxEffect란? 패럴랙스 효과(Parallax Effect)란, 물체의 거리 차이에 따라 시차를 느끼게 하는 시각적인 효과를 말합니다. 웹 디자인에서는 패럴랙스 효과를 사용하여 웹페이지의 다양한 요소들이 서로 다른 속도로 움직이도록 하여 깊이감을 부여하는 효과를 줄 수 있습니다. 이를 통해 사용자에게 더욱 생생한 경험을 제공할 수 있습니다. 예를 들어, 스크롤을 내리면서 배경 이미지와 전경의 텍스트가 서로 다른 속도로 움직이면서 깊이감 있는 느낌을 줄 수 있습니다. 이 포스팅에서는 언스플래쉬와 스크롤라이브러리를 사용합니다! 이미지와 텍스트를 사용하기 위해 ..

parallax effect - pageYoffset || scrollY || scrollTop HTML 1 Javascript Parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 신은 용기있는자를 결코 버리지 않는다. 02 Section2 피할수 없으면 즐겨라. 03 Section3 자신감 있는 표정을 지으면 자신감이 생긴다. 04 Section4 계단을 밟아야 계단 위에 올라설수 있다. 05 Section5 고통이 남기고 간 뒤를 보라! 고난이 지나면 반드시 기쁨이 스며든다. 06 Section6 마음만을 가지고 있어서는 안된다. 반드시 실천하여야 한다. 07 Section7 꿈을..

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가 의미하는 것은 각 슬라이드에 대한 쌓임 순서입니다. 이 이펙트에서는 이미지를 겹쳐놓는 것이 포인트입니다! 이 값이 높을 수록 슬라이드는 상위에 표시되게 되며 슬라이드가 순서대로 보이도록 조정하는데..

기능 추가 마무리를 위한 기능 추가 입니다! 수험자 이름 입력과 정답 체크 기능입니다. 코드 분석을 해보겠습니다! const nameInput = document.querySelector(".cbt__view input"); const cbtResult = document.querySelector(".cbt__result"); let great = 0; const startQuiz = () => { cbtStart.classList.add("hide"); questionTime = setInterval(reduceTime, 1000); let youName = nameInput.value; cbtName.innerHTML = youName; } const answerQuiz = () => { let sc..