자바스크립트 애니메이션13 슬라이드 이펙트 7 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이) 이번 슬라이드 효과는 이전의 유형에 자동 플레이 기능을 추가하였으며,자동 플레이를 정지하거나 플레이 할 수 있는 버튼을 추가하고, 마우스 커서가 올라가면 자동 플레이가 멈추고, 커서가 빠져나가면 자동 플레이가 시작되는 기능을 추가하였습니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길.. 2022. 10. 20. 슬라이드 이펙트 6 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴, 무한) 이번 슬라이드 효과는 버튼을 누르면 이전이미지, 다음 이미지로 넘어가도록 스크립트를 작성하였습니다. 또한 이전 유형처럼 닷메뉴를 추가했으며, 이미지가 무한으로 넘어가는 기능도 추가하였습니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__img 클래스의 형제 요소로 slider__btn .. 2022. 10. 20. 슬라이드 이펙트 5 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴) 이번 슬라이드 효과는 버튼을 통해 이미지 슬라이드를 넘길 수 있으며, 아래쪽에 슬라이드 갯수 만큼의 닷메뉴를 만들어 현재 활성화된 슬라이드의 순서에 맞게 표시되도록 하였습니다. 또한, 닷메뉴를 클릭하면 해당 슬라이드로 이동하는 기능도 있습니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__im.. 2022. 10. 20. 마우스 이펙트 6 마우스 효과 만들기 6 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 텍스트 효과 텍스트가 움직이며 왼쪽에서는 오렌지색, 오른쪽에서는 흰색으로 나타납니다. HTML 코드 이미지와 텍스트를 .mouse__img와 .mouse__text로 구분하고 왼쪽 글씨는 .left에, 오른쪽 글씨는 .right에 작성하였습니다. Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. CSS 코드 mouse__cursor는 기존의 마우스 커서를 따라다녀야 하기 때문에, position: absolute;를 사용하여 위치를 .. 2022. 9. 29. 마우스 이펙트 5 마우스 효과 만들기 5 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 기울기 효과 글씨 반전 효과 마우스를 올리면 이미지가 기울며 움직입니다. 그리고 마우스를 올리면 글씨나 색상이 반전되어 나타나는 효과입니다. HTML 코드 이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. 또한, 마우스 커서의 위치나 정보를 알기 위해, .mouse__info 부분을 만들어주었습니다. Life is either a daring adventure or nothing at all. 생활은 과감한 모험이거나 아니면 아무것도 아니다. mousePageX : 0 p.. 2022. 9. 28. 마우스 이펙트 4 마우스 효과 만들기 4 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 이미지 효과 마우스를 올리면 이미지가 조금씩 움직이고, 커지며 이질감을 주는 효과입니다. 저번에 패럴랙스에서 이질감을 주었던 효과와 비슷하다고 생각하시면 됩니다! HTML 코드 이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. 그리고 p태그에 명언을 적어주는 것까지는 저번 유형과 비슷하나, 이번에는 이미지를 넣었기 때문에 figure태그를 사용하였으며 커서의 위치값을 확인할 수 있도록 .mouse__info를 추가하였습니다. The most difficult thing i.. 2022. 9. 22. 마우스 이펙트 3 마우스 효과 만들기 3 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 조명 효과 이번 효과는 어두운 배경 이미지가 있고, 마우스 커서가 가리키는 곳은 밝은 것처럼 보이는 효과입니다. 실제로 밝아지는 것은 아니고, 그렇게 보이도록 착시를 일으키는 효과입니다. 어떻게 하는건지 알아볼까요? HTML 코드 이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. mouse__wrap 안에는 p태그로 명언을 적었습니다. Learn as if you will live forever, live like you will tomorrow. 영원히 살 것처럼 배우고.. 2022. 9. 22. 마우스 이펙트 2 마우스 효과 만들기 2 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 마우스 따라다니기(GSAP) 이번 효과는 저번 유형과 비슷하지만 GSAP를 이용해 작성하여, 커서의 움직임이 더 부드러운 효과입니다. HTML 코드 이번에는 기본 마우스 커서를 대신할 요소에 각 mouse__cursor, mouse__cursor2 클래스를 주어 두개 만들어 줍니다. mouse__wrap 안에는 p태그로 명언을 적고, span태그로 특정 단어를 감싸 강조해 주었습니다. The future depends on what We do in present. 미래는 현재 우리가 무엇을 하는가에 달려있다. .. 2022. 9. 18. 마우스 이펙트 1 마우스 효과 만들기 1 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 마우스 따라다니기 이번 효과는 마우스를 따라다니는 원이 마우스 커서를 대신하며, 노란색 텍스트 위에 커서를 올리면 원의 모양이 변하거나 색이 변하는 효과입니다. HTML 코드 기본 마우스 커서를 대신할 요소는 mouse__cursor 클래스를 주었습니다. mouse__wrap 안에는 p태그로 명언을 적고, span태그로 특정 단어를 감싸 강조해 주었습니다. mouse__info는 커서의 위치에 대한 정보를 나타낼 예정입니다. Resolve to perform what your ought, perform with.. 2022. 9. 18. 슬라이드 이펙트 4 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼) 이번 슬라이드 효과는 버튼을 누르면 이전이미지, 다음 이미지로 넘어가도록 스크립트를 작성하였습니다. 많이 사용되는 효과이므로 잘 알아두엇다가 활용하도록 합시다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__img 클래스의 형제 요소로 slider__btn 클래스의 div박스를 만들어 각각의 클래스가 p.. 2022. 9. 18. 슬라이드 이펙트 3 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 좌로 움직이기(연속적으로) 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. 이번 슬라이드 효과는 이미지가 좌우로 연속적으로 넘어가며 보여집니다. 이전에 배운 방법보다 더욱 자연스러운 느낌이 나는 효과입니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. CSS 코드 1번 이미지가 복사되어 맨 뒤에 하나 생성되는 구조이기 때문에, .slider:nth-child(6.. 2022. 9. 1. 슬라이드 이펙트 2 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 좌로 움직이기 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. 이번 슬라이드 효과는 이미지가 좌우로 넘어가며 보여집니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. CSS 코드 각 이미지에 바로 위 부모요소를 기준으로 포지션을 주어, 위치를 이동시킬 수 있도록 하였습니다. 또한 이미지가 순서대로 위치할 수 있도록 z-index로 z축 상의 위치를 조정해주었습니.. 2022. 8. 29. 슬라이드 이펙트 1 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 트랜지션 효과 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__img와 또 한번 감싼 slider__wrap을 만들었습니다. CSS 코드 각 이미지에 바로 위 부모요소를 기준으로 포지션을 주어, 위치를 이동시킬 수 있도록 하였습니다. 또한 이미지가 순서대로 위치할 수 있도록 z-index로 z축 상의 위치를 조정해주었습니다. .slider__wrap { width: 100%; height: 100vh; displa.. 2022. 8. 29. 이전 1 다음 728x90
