본문 바로가기

Effect28

gameEffect - 뮤직플레이어 만들기 뮤지플레이어를 만들어 보도록 합시다~(뮤직플레이어 새롭게 디자인 중입니다.....) 원본 소스 보기 Script //선택자 const musicWrap = document.querySelector(".music__wrap"); const musicView = musicWrap.querySelector(".music__view .img img"); const musicName = musicWrap.querySelector(".music__view .title h3"); const musicArtist = musicWrap.querySelector(".music__view .title p"); const musicAudio = musicWrap.querySelector("#main-audio"); const.. 2022. 10. 23.
searchEffect - 07 스크립트를 이용한 서치효과 만들기 07 검색 게임을 만들어 봅시다~! 원본 소스 보기 Script const searchTime = document.querySelector(".time span"); const searchList = document.querySelector(".search__list"); const searchAnwers = document.querySelector(".search__answers"); const searchMissAnwers = document.querySelector(".search__missAnswers"); const searchStart = document.querySelector(".search__box .start"); const searchInput = d.. 2022. 10. 21.
searchEffect - 06 스크립트를 이용한 서치효과 만들기 06 스크립트를 이용하여 CSS 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script const cssList = document.querySelector(".search__list .line"); let cssProp = []; //데이터 출력하기 const updateList = () => { let listCSS = ""; cssProperty.forEach((data, index) => { listCSS += ` ${data.num}. ${data.name} : ${data.desc} `; cssProp.push(`${data.num}. ${data.name} : ${data.desc}`); }); cssList.innerHTML = listCS.. 2022. 10. 20.
sliderEffect - 05 스크립트를 이용한 슬라이드 효과 만들기 05 버튼과 닷메뉴를 이용한 슬라이드를 만들어 봅시다~ 원본 소스 보기 CSS .slider__dot { position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; } .slider__dot .dot { width: 20px; height: 20px; background: rgba(0,0,0,0.4); display: inline-block; border-radius: 50%; text-indent: -9999px; transition: all 0.3s; margin: 2px; } .slider__dot .dot.active { background: rgba(255,255,255,0.9); }.. 2022. 10. 20.
searchEffect - 04 스크립트를 이용한 서치효과 만들기 04 스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script const cssProperty = [ { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." }, { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." }, { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." }, ⁝ ]; //선택자 const searchList = document.querySelector(".search__list"); //속성 리스트 const searchNum = document.que.. 2022. 9. 29.
mouseEffect - 05 스크립트를 이용한 마우스효과 만들기 05 기울기 효과와 글씨 반전 효과되는 효과를 만들어 봅시다. 원본 소스 보기 Javascript const mouseMove = (e) => { //마우스 좌표값 let mousePageX = e.pageX; //마우스 좌표값 설정 let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerWidth / 2 - mousePageX; //전체화면에서 반을 나누어 마우스의 좌표 값을 빼주면 마우스 좌표값이 가운데로 초기화 let centerPageY = window.innerHeight / 2 - mousePageY; //최소값 = -150, 최대값 = 150 let maxPageX = Ma.. 2022. 9. 29.
mouseEffect - 04 스크립트를 이용한 마우스효과 만들기 04 이번에는 마우스를 올렸을때 이미지가 움직이는 효과를 만들어 보도록 합시다~ 원본 소스 보기 Javascript const cursor = document.querySelector(".mouse__cursor"); const cursorRect = cursor.getBoundingClientRect(); document.querySelector(".mouse__wrap figure").addEventListener("mousemove", (e) => { // 커서 gsap.to(cursor, { duration: .4, left : e.pageX - cursorRect.width/2, top : e.pageY - cursorRect.height/2 }); //마우스.. 2022. 9. 22.
mouseEffect - 03 스크립트를 이용한 마우스효과 만들기 03 오늘은 마우스를 이용해 조명을 준듯한 효과를 만들어 보겠습니다🔎 원본 소스 보기 Javascript const cursor = document.querySelector(".mouse__cursor"); // const circleW = document.offsetWidth; //200 // const circleH = document.offsetHeigth; //200 // const circle2 = document.clientWidth; //190 : 보더값 제외 const circle = cursor.getBoundingClientRect(); // console.log(circle); // const DOMRect = { // bottom : 200, //.. 2022. 9. 22.
parallax Effect - 05 스크립트를 이용한 패럴랙스효과 만들기 05 GSAP를 이용하여 텍스트와 이미지, 타이틀에 이질감을 주는 효과를 만들어 봅시다✏️ 원본 소스 보기 scrollTop scrollTop값이 필요하니 변수에 값을 저장해 줍니다. 🔊브라우저마다 호환성 문제가 있으니 여러개의 값을 적어주는 것이 좋겠네요. let scrollTop = window.pageYOffset || document.documentElement.scrollTop; 스크롤 값 스크롤을 할 때마다 현재 스크롤 값을 보여 줍니다. Math.ceil()를 이용하여 소수점 자리값을 올림 해줍니다. document.querySelector("#parallax__info span").textContent = Math.ceil(scrollTop); 스크립트.. 2022. 9. 20.
parallax Effect - 04 스크립트를 이용한 패럴랙스효과 만들기 04 스크롤이 내려가면 콘텐츠 영역이 애니메이션과 함께 나타나는 효과를 만들어 봅시다. 원본 소스 보기 애니메이션 주기 개별적으로 애니메이션을 나타내기 위해서 CSS를 작성해 줍니다. /* 개별적으로 나타나기 */ #contents > section .content__item__num { opacity: 0; transform: translateY(200px); transition: all 1s 0.1s cubic-bezier(0, 0.27, 0.58, 1); } #contents > section .content__item__title { opacity: 0; transform: translateX(-100px); transition: all 1s 0.3s cubi.. 2022. 9. 20.
parallax Effect - 03 스크립트를 이용한 패럴랙스효과 만들기 03 스크롤을 위로 올리면 메뉴바가 나오는 효과와 스크롤이 마지막에 위치 했을 때, 탑 버튼이 생겨나게 만들어 봅시다✏️ 원본 소스 보기 숨김 메뉴 / 탑 버튼 가장먼저 탑 버튼을 만들어야 되겠죠😏 탑 버튼을 간단하게 만들어 줍시다~ 탑 버튼은 .show가 붙었을 때 나타나게끔 bottom은 -220px로 만들고, .show가 붙었을 때는 bottom: 20px으로 css로 만들어 줍니다. Top #parallax__Top { position: fixed; left: 50%; bottom: -220px; transform: translateX(-50%); z-index: 100000; width: 40px; height: 40px; background: rgba(0,.. 2022. 9. 20.
SliderEffect - 04 스크립트를 이용한 슬라이드 효과 만들기 04 버튼을 이용하여 이미지 슬라이드가 넘어가는 효과를 만들어 봅시다. 원본 소스 보기 HTML html에서 버튼을 추가 해주었습니다. prev next JavaScript const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //각각 이미지 const sliderBtn =.. 2022. 9. 19.
mouseEffect 02 스크립트를 이용한 마우스효과 만들기 02 마우스 이펙트02에서는 GSAP를 이용하여 애니메이션 효과를 부드럽게 나타내는 것 까지 함께 해 보도록 합시다. 원본 소스 보기 선택자 만들기 const cursor = document.querySelector(".mouse__cursor"); const cursor2 = document.querySelector(".mouse__cursor2"); const span = document.querySelectorAll(".mouse__wrap span"); const btn = document.querySelector("#footer .modal__btn"); const header = document.querySelector("#header"); Javascrip.. 2022. 9. 19.
mouseEffect 01 스크립트를 이용한 마우스효과 만들기 01 자바스크립트를 이용하여 마우스 효과를 나타내어 봅시다🖌️ 원본 소스 보기 Script 먼저 선택자를 만들어 줍니다. window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").textContent = event.clientX; document.querySelector(".clientY").textContent = event.clientY; document.querySelector(".offsetX").textContent = event.offsetX; document.querySelector(".offsetY").textContent = event.offsetY; docu.. 2022. 9. 19.
parallax Effect - 02 스크립트를 이용한 패럴랙스효과 만들기 02 이번에는 메뉴바가 사이드에 있는 형식의 이펙트를 만들어 봅시다✏️ 메뉴의 모양은 닷 모양이랍니다~ 원본 소스 보기 사이드 메뉴 닷으로 만들기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 닷 메뉴 CSS #parallax__dot { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 100000; background-color: rgba(0,0,0,0.4); padding: 20px 10px; border-radius: 30px; } #parallax__dot li { width: 20px; height: 20px; border-radius: 50%; ma.. 2022. 9. 13.
parallax Effect - 01 스크립트를 이용한 패럴랙스효과 만들기 01 패럴랙스는 시차라는 뜻을 가지고 있으며, 스크롤링을 했을 때 발생하는 시간차에 따라 변화함으로써 보다 입체감이 있는 구현을 할 수 있습니다. offsetTop()을 이용해서 Y의 값을 구해보도록 합시다✏️ 원본 소스 보기 Script //scrollTop // let scrollTop = window.pageYOffset; // let scrollTop = window.scrollY; // let scrollTop = document.documentElement.scrollTop; let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; 스크롤 값을 구하기.. 2022. 9. 6.
SliderEffect - 03 스크립트를 이용한 슬라이드 효과 만들기 03 이미지 슬라이드가 자연스럽게 이어지는 효과를 만들 수 있습니다. 원본 소스 보기 JavaScript const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //각각 이미지 let currentIndex = 0; //현재 보이는 이미지 let sliderCount = sl.. 2022. 9. 2.
SliderEffect - 02 스크립트를 이용한 슬라이드 효과 만들기 02 이미지가 좌로 움직이는 이미지 효과를 만들 수 있습니다. 또한 JS, GSAP, jQuery를 사용하여 이미지에 애니메이션을 줄 수 있습니다. 원본 소스 보기 JavaScript const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //이미지 let currentInd.. 2022. 8. 29.
SliderEffect - 01 스크립트를 이용한 슬라이드 효과 만들기 01 스크립트를 이용하여 이미지가 슬라이드 되는 효과를 만들 수 있습니다. 원본 소스 보기 Script const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderWrap.querySelectorAll(".slider"); let currentIndex = 0; //현재 보이는 이미지 let sliderCount = slider.length //이미지 갯수 setInterval(() => { let nextIndex = (currentIndex + 1) % sliderCoun.. 2022. 8. 29.
QuizEffect - 06 스크립트를 이용한 퀴즈 만들기 06(객관식 - 여러문제) : 슬라이드 형식 스크립트를 통해서 슬라이드 형식의 문제를 만들 수 있습니다. 원본 소스 보기 사이트보기 선택자 각요소의 선택자를 먼저 선언해 줍니다✏️ 결과보기 const quizQuestion = document.querySelector(".quiz__question"); //문제 번호, 질문 const quizSelects = document.querySelector(".quiz__selects"); //객관식 보기 const quizType = document.querySelector(".quiz__type"); //퀴즈 타입 const quizResult = document.querySelector(".quiz__answer .result.. 2022. 8. 24.
SearchEffect03 스크립트를 이용한 서치효과 만들기 03 스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script const searchKeyword = document.querySelectorAll(".search__info .keyword span"); //알파벳 const searchList = document.querySelectorAll(".search__list ul li") //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //속성 갯수 설정하기 searchInfo.textContent = searchList.length; searchKeyword.forEach(el => { el.add.. 2022. 8. 22.
SearchEffect02 스크립트를 이용한 서치효과 만들기 02 스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li") //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //속성 갯수 설정하기 searchInfo.textContent = searchList.length; // searchBox.addEventListener("keyup", () =>.. 2022. 8. 17.
SearchEffect01 스크립트를 이용한 서치효과 만들기 01 스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li") //목록 리스트 searchBox.addEventListener("keyup", () => { const searchWord = searchBox.value; //사용자가 입력한 키워드 searchList.forEach(el => { const cssName = el.dataset.name; if(cssName.. 2022. 8. 16.
QuizEffect - 05 스크립트를 이용한 퀴즈 만들기 05(객관식 - 여러문제) 스크립트를 이용하여 객관식에 관한 문제를 만들 수 있으며, 이때 label태그를 활용 합니다. 원본 소스 보기 사이트보기 Script //문제정보 const quizInfo = [ { answerType: "웹디자인기능사 2010년 05회", answerNum: "1", answerAsk: "먼셀의 색상에서 이 표준 빨강이면 1R은?", answerChoice: { 1: "연지", 2: "다홍", 3: "주황", 4: "보라", }, answerResult: "1", answerEx: "먼셀의 색상에 이 표준이 빨강이면 여기서 R은 빨강을 뜻하므로 1명도의 빨강인 연지가 답입니다." }, { answerType: "웹디자인기능사 2010년 05회".. 2022. 8. 15.
QuizEffect - 04 스크립트를 이용한 퀴즈 만들기 04(객관식) 스크립트를 이용하여 객관식에 관한 문제를 만들 수 있으며, 이때 label태그를 활용 합니다. 원본 소스 보기 Script //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 , 4개가 있으므로 All로 변경 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__answer .confir.. 2022. 8. 8.
QuizEffect - 03 스크립트를 이용한 퀴즈 만들기 03(주관식 - 여러개) 스크립트를 이용하여 쉽게 퀴즈의 문제를 만들 수 있으며, for( )과 forEach( )를 이용하여 여러개의 퀴즈를 간단하게 만들 수 있습니다. 원본 소스 보기 Script //선택자, 다중선택이므로 querySelectorAll로 바꿔야 함! const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 , 4개가 있으므로 All로 변경 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll(".quiz__question .as.. 2022. 8. 5.
QuizEffect - 02 스크립트를 이용한 퀴즈 만들기 02(주관식) 스크립트를 이용하여 쉽게 웹디자이너기능사 시험에 관한 퀴즈를 만들 수 있으며, 주관식 유형으로 정답을 맞췄는지 틀렸는지도 알 수있게 할 수 있습니다. 원본 소스 보기 Script //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__an.. 2022. 8. 4.
QuizEffect - 01 스크립트를 이용한 퀴즈 만들기 01 스크립트를 이용하여 쉽게 웹디자이너기능사 시험에 관한 퀴즈를 만들 수 있습니다. 원본 소스 보기 Script //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__answer .confirm"); //정답 확인 버튼 const quizResult.. 2022. 8. 4.
자바스크립트

Javascript

자세히 보기
html

HTML

태그 보기
css

CSS

속성 보기
광고 준비중입니다.
<

티스토리툴바