아라의 WWW

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3,4,5번과 다르게 자바스크립트만 적습니다. HTML Javascript slider Effect06 슬라이드 이펙트06 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next jo0132@naver.com : 헤더 요소로 제목과 설명을 포함하고 있습니다. : 제목을 나타내는 제목 요소입니다. : 설명을 나타내는 단락 요소입니다. : 순서 없는 목록 요소로, 다른 페이지로 이동할 수 있는 링크들을 포함하고 있습니다. : 각각의 목록 항목을 나타내는 리스트 요소입니다. : 링크를 나타내는 앵커 요소입니다. : 메인 컨텐츠를 감싸는 메인 요소입니다. : 슬..

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3,4,5번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 모두 올리니 차이점을 확인해 보시길 바랍니다 HTML Javascript slider Effect06 슬라이드 이펙트06 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next jo0132@naver.com 헤더 부분에는 제목과 설명이 포함된 h1, p, 그리고 ul 태그가 있습니다. ul 태그 안에는 이미지 슬라이드의 다른 페이지로 연결되는 링크가 포함되어 있습니다. 메인 부분에는 이미지 슬라이드가 표시되는 영역이 구성되어 있습니다. slider__img와 sli..

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 모두 올리니 차이점을 확인해 보시길 바랍니다 HTML Javascript slider Effect05 슬라이드 이펙트05 : 아래에서 위로로 움직이기(연속적으로) 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { wi..

이미지를 여러개 배치하여 움직이게 하며 연속으로 옆으로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 모두 올리니 차이점을 확인해 보시길 바랍니다 HTML Javascript slider Effect04 슬라이드 이펙트04 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { width: 100%..

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다. HTML Javascript slider Effect02 슬라이드 이펙트02 : 좌로 움직이기 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 ..

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다. HTML Javascript slider Effect02 슬라이드 이펙트02 : 좌로 움직이기 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 ..

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다. HTML Javascript slider Effect01 슬라이드 이펙트01 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 이미지를 단독으로 사용하지 않고 .slider의 div를 사용하여 효과를 부여합니다. CSS .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; ..