[JavaScript] 패스워드 보이기 / Swiper / AOS

[패스워드 보이기]

• 이번에는 jQuery를 사용하여 패드워드 창에서 특정 버튼을 통해 패스워드가 텍스트로 보이고 다시 가려줄 수 있는 기능을 구현해봅시다.
• 기본적으로 패스워드를 입력하는 태그는 input 태그이고, type을 반드시 password로 지정해야한다.
• jQuery를 사용해야되기 때문에 반드시 html에 script 태그를 통해 작성해줘야 한다.

See the Pen 비밀번호 보이기 by psm817 (@psm817) on CodePen.

• CSS에서는 .box_1에 position: relative를 적용하고 그 아래 특정 버튼 역할을 할 .mode에 position: absolute를 적용한다.
• 또한 .mode에는 top: 0과 right: 0을 통해 아이콘들이 박스 안으로 들어오도록 하고 오른쪽으로 정렬되도록 해준다. 추가 작성된 user-select: none은 텍스트영역이 클릭 및 드래그로 선택되지 않도록 설정한 것이다.
•  기본적으로 input 태그는 패스워드가 가려져있기 때문에 해당 기능을 하는 아이콘은 last-child를 통해 display를 none으로 화면에서 보이지 않도록 하고, text라는 클래스가 있을 경우에만 display를 block으로 하여 보이게 해준다.
• HTML에서는 실제로 text 클래스가 붙은 태그가 존재하지 않기 때문에 이제 jQuery를 통해서 해당 클래스의 추가 및 삭제 기능을 구현해야한다.
• JS에서는 .mode 클래스를 가진 span 태그를 클릭하였을 때 함수를 실행하도록 하며, 이 때 $box1과 $input 변수를 만들어주고 만약 box_1에 text라는 클래스가 있다면 text라는 클래스를 삭제하고 input 태그의 type을 password로 변경한다.
• 반대로 box_1에 text라는 클래스가 없다면 text라는 클래스를 생성하고 input 태그의 type을 text로 변경한다.

 

[Swiper]

• 이번에는 swiper 라이브러리를 이용하여 슬라이드 효과를 적용해봅시다.
• swiperjs의 홈페이지를 통해서 여러가지 종류의 슬라이드를 볼 수 있고, 해당 코드를 가져와서 사용할 수 있고 커스텀도 가능하다.
• 홈페이지 URL : https://swiperjs.com/demos
• 여러가지 종류 중에 하나를 선택하여 아래와 같이 적용해보고 색상 등과 같이 몇 가지 커스텀을 해봅시다.

See the Pen 240705(스와이퍼 슬라이드) by psm817 (@psm817) on CodePen.

• Swiper를 사용하기 위해서는 HTML에서 반드시 swiper css와 js를 script 태그를 통해 불러와야한다.
• 글쓴이가 커스텀한 부분은 swiper의 양쪽 이동하는 버튼의 색상과 pagination의 색상, 자동으로 시간을 걸어 슬라이드가 이동할 수 있도록 하였다.
• 버튼의 색상을 바꾸는 부분은 CSS에서 .swiper-button-prev와 swiper-button-next 클래스를 선택하여 color: pink를 지정하였다.
• pagination의 색상을 바꾸는 부분은 CSS에서 .mySwiper-1 클래스를 선택하여 --swiper-theme-color: red를 지정하였다.
• 다른 pagination의 색상은 CSS에서 mySwiper-2 클래스를 선택하여 background-color: orange를 지정하였다.
• 마지막으로 자동으로 슬라이드가 움직이도록 시간을 건 부분은 JS에서 autoplay를 통해 delay를 500으로 지정하였다.

 

[AOS]

• AOS는 Animate On Scroll Library의 약어로 스크롤 바를 통해 화면을 위 아래로 움직였을 때 화면에 표현되는 애니매이션을 나타내는 라이브러리이다.
• 이번에는 AOS 라이브러리를 이용하여 여러가지 태그가 나타나는 방법과 같은 효과를 적용해봅시다.
• AOS의 홈페이지를 통해서 여러가지 종류의 효과를 볼 수 있고 해당 코드를 가져와서 사용할 수 있고 커스텀도 가능하다.
• 홈페이지 URL: https://michalsnik.github.io/aos/
• 여러가지 종류 중에 하나를 선택하여 아래와 같이 적용해보고 몇 가지 커스텀을 해봅시다.

See the Pen AOS by psm817 (@psm817) on CodePen.

• AOS를 사용하기 위해서는 HTML에서 반드시 AOS css와 js를 script 태그를 통해 불러와야한다.
• AOS를 적용하고자 하는 태그 안에는 data-aos를 작성해줘야 하고, 해당 애니매이션이 동작하기 위해선 반드시 JS에 AOS.init()를 작성해야한다.
• CSS에서는 .box_1.aos-animate > span 선택자를 통해 적용할 애니매이션 이름인 animation-name: ani-1와 애니매이션이 지속할 시간인 animation-duration: 1s와 애니매이션의 반복 횟수인 animation-iteration-count: 1를 지정한다.
• @Keyframes를 통해 위에서 정의한 애니매이션의 이름인 ani-1에 대한 구체적인 애니매이션 속성을 지정한다.
• 여기서 총 5가지의 %를 나눈건 텍스트를 5구간으로 나눠서 사이즈가 작아졌다 커졌다하기 위함이다.