CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브 Tutorial/GSAP15 15. GSAP Parallax Effect : 스무스 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 스무스 효과 by @webs 2023. 06. 01. 15 GSAP Parallax Effect : 스무스 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 GSAP 효과를 조금 더 퀄리티 있게 만들 수 있는 효과입니다. 잘 만들어진 사이트의 대부분은 이 효과를 적용하지 않은 사이트들이 거의 없습니다. 바로 부드럽게 움직임을 주는 스무스 효과입니다. 스무스 효과를 적용하는 방법은 여러가지가 있습니다. 직접 짤 수도 있도, 플러그인을 이용하는 방법들이 있습니다. 여러가지를 다 써본 결과 지금 쓸려고 하는 lenis 효과가 가장 좋습니다. 사용법도 간단하고 버그도 가장 적습니다. 그래서 이것을 써보.. 2023. 6. 20. 14. GSAP Parallax Effect : 가로/세로 나타나기 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 가로/세로 나타나기 효과 by @webs 2023. 06. 01. 14 GSAP Parallax Effect : 가로/세로 나타나기 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 가로/세로 응용편입니다. 멋있게 가로 세로를 구현했는데, 애니메이션 효과를 주지 않는다면 별로겠죠! 세로 모드는 일반적인 효과이기 때문에 상관은 없지만, 가로 모드는 일반적인 효과로는 구현이 힘들기 때문에 따로 조치를 해주어야 합니다. 그렇다고 어렵지 않으니 잘 따라하시면 됩니다. 그럼 시작하겠습니다. 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. .. 2023. 6. 20. 13. GSAP Parallax Effect : 가로/세로 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 가로/세로 효과 by @webs 2023. 06. 01. 13 GSAP Parallax Effect : 가로/세로 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 가로 효과를 무사히 작업하였다면, 이제는 가로 세로 효과를 작업해보겠습니다. 가로와 세로가 결합된 형태이기 때문에 가로 효과보다는 조금 더 어려울 수 있습니다. 처음부터 가로 효과가 아닌 원하는 섹션만 가로 효과로 만들어야 하기 때문에 그 부분만 가로로 CSS 셋팅이 먼저 되어 있어야 합니다. 그럼 한번 만들어볼까요? 🙀 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코.. 2023. 6. 20. 12. GSAP Parallax Effect : 가로 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 가로 효과 by @webs 2023. 06. 01. 12 GSAP Parallax Effect : 가로 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 패럴랠스의 하이라이트 가로 효과입니다. 저도 이 효과 때문에 GSAP를 사용했는데요! GSAP를 이용하면 쉽고 간편하게 효과를 줄 수 있습니다. 물론 처음에는 이해하는 과정이 필요합니다. 필수 속성 값을 알고 있어야, 내가 원하는 장소에서 스크롤 효과를 제대로 줄 수 있습니다. 보통은 스크롤 이팩트가 세로로 작동하지만, 가로로 작동하는 사이트들도 많이 볼 수 있기 때문에 이번에는 가로로 한번 작업해 보겠습니다. 그럼 시작해볼까요? 🤭 1. 기본 구조 만.. 2023. 6. 20. 11. GSAP Parallax Effect : 메뉴 숨기기 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 메뉴 숨기기 효과 by @webs 2023. 06. 01. 11 GSAP Parallax Effect : 메뉴 숨기기 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메뉴를 숨기는 효과를 만들어보겠습니다. 스크롤을 내리면 메뉴는 위로 올라가고, 스크롤을 올리면 메뉴는 다시 나타나는 형태입니다. GSAP를 이용하니 퀄리티 애니메이션을 구현할 수 있는 점이 좋네요! 소스로 새로운 속성들이 나오기는 하나 그렇게 어렵지는 않으니 같이 잘 따라 해봅시다. 그럼 시작해볼께요! 💩 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은.. 2023. 6. 20. 10. GSAP Parallax Effect : 메뉴 축소 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 메뉴 축소 효과 by @webs 2023. 06. 01. 10 GSAP Parallax Effect : 메뉴 축소 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 메뉴 클릭에 있어 메뉴 확대 축소 효과를 완성해보겠습니다. 일반적으로 메뉴가 있다가 스크롤을 내리면 축소되거나 모바일 메뉴로 바꾸는 형태로 많이 사용합니다. 다시 처음으로 돌아오면 크게 확대되는 효과입니다. 스크립트와 CSS를 같이 사용하는 효과입니다. 비교적 사용빈도가 높고 쉽게 때문에 쉽게 따라할 수 있습니다. 그럼 바로 시작해보겠습니다. 🤪 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은.. 2023. 6. 20. 09. GSAP Parallax Effect : 메뉴 이동 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 메뉴 이동 효과 by @webs 2023. 06. 01. 09 GSAP Parallax Effect : 메뉴 이동 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메뉴를 클릭하면 이동하는 스크립트를 작성하겠습니다. 예전 자바스크립트 패럴랙스에서도 작업한 적이 있는데요! GSAP 용은 스타일이 많이 틀린긴 합니다. 그래도 패럴랙스 사이트에서 없어서는 안되는 효과이기 때문에 열심히 작업해보겠습니다. 그럼 시작해볼까요? 😏 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 G.. 2023. 6. 20. 08. GSAP Parallax Effect : 진행바 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 진행바 효과 by @webs 2023. 06. 01. 08 GSAP Parallax Effect : 진행바 효과 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 진행바 스크립트를 작업해보겠습니다. 사이트 전체의 길이 값을 진행바에 표현하는 애니메이션입니다. GSAP를 이용하면 아주 간단하게 작업할 수 있습니다. 너무 빨리 끝난다고 아쉬어 하지 마세요^^ 😁 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서 필요한 파일을 미리 셋팅해 놓겠습니다. GSAP는 자주 업데이트가 .. 2023. 6. 19. 07. GSAP Parallax Effect : 배경색 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 배경색 효과 by @webs 2023. 06. 01. 07 GSAP Parallax Effect : 배경색 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번시간에는 배경색을 자연스럽게 변경하는 애니메이션을 만들어보겠습니다. 방법은 두가지로 설정할 수 있습니다. 자연스럽게 전체 배경에 색을 넣는 과정과, 해당 섹션의 data값을 이용해 섹션마다 변경하는 방법입니다. 어떤 방법이든 자연스럽게 배경색을 변경할 수 있습니다. 그럼 시작해볼까요? 😘 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹.. 2023. 6. 19. 06. GSAP Parallax Effect : 텍스트 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 텍스트 효과 by @webs 2023. 06. 01. 06 GSAP Parallax Effect : 텍스트 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 텍스트 애니메이션을 작업해보겠습니다. 스크롤을 내리면 한 줄씩 또는 한 글자씩 나오는 효과입니다. GSAP에서도 텍스트 효과를 사용할 수 있지만 유로 플러그인을 사용해야 합니다. 그래서 텍스트를 분리하는 작업은 자바스크립트로 작업하거나 글씨만 분리해주는 플러그인을 사용할 것입니다. 글씨를 하나씩 분리한 상태에서 GSAP를 작업하게 됩니다. 조금 복잡할 수도 있고, 쉬울 수도 있습니다. 그럼 같이 한번 해볼까요? 1. 기본 구조 만들기 1-1. 준비하.. 2023. 6. 19. 05. GSAP Parallax Effect : 나타나기 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 나타나기 효과 by @webs 2023. 06. 01. 05 GSAP Parallax Effect : 나타나기 효과 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 스크롤을 내리면 하나씩 나타나는 효과를 만들어 보겠습니다. 나타나기 효과는 이미지에 줄 수도 있고, 텍스트에 줄 수도 있습니다. 해당 요소에 이름에 각각 스크립트를 설정하면 조금 번거롭기 때문에 클래스 이름으로 설정할 수도 있습니다. 내가 원하는 효과의 이름을 작성하면, 그거에 맞추어 스크립트를 작성하면 됩니다. 기존과는 약간 다를 수 있지만 기본 원리는 동일하기 때문에 어렵지는 않습니다. 그럼 시작해 볼까요? 😇 1. 기본 구조 만들기.. 2023. 6. 19. 04. GSAP Parallax Effect : 이질감 효과 주기 Tutorial/webd GSAP 패럴랙스 이펙트 : 이질감 효과 주기 by @webs 2023. 06. 01. 04 GSAP Parallax Effect : 이질감 효과 주기 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 패럴랙스 이펙트의 가장 대표적인 효과라고 할 수 있는 이질감 효과를 주겠습니다. 이질감은 요소가 겹쳤을 때 확인할 수 있습니다. 스크롤 내리거나 올릴 때마다 위치 이동을 시켜줘서, 보통의 요소보다 빠르게 또는 느리게 해주는 효과입니다. 여기에 스무스 효과를 같이 주면 퀄리티 있는 사이트를 만들 수 있습니다. 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해.. 2023. 6. 19. 03. GSAP Parallax Effect : 배경 고정하기 Tutorial/webd GSAP 패럴랙스 이펙트 : 배경 고정하기 by @webs 2023. 06. 01. 03 GSAP Parallax Effect : 배경 고정하기 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. pin 속성을 이용하여 배경을 고정하는 효과를 배워보겠습니다. 스크롤을 내리면 배경이 고정되어 있고, 다음 섹션이 올라오는 형태의 애니메이션입니다. 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서 필요한 파일을 미리 셋팅해 놓겠습니다. GSAP는 자주 업데이트가 되기 때문에 제일 최선 버전을 사용하는게 좋습니.. 2023. 6. 19. 02. GSAP Parallax Effect : Pin 애니메이션 Tutorial/webd GSAP 패럴랙스 이펙트 by @webs 2023. 06. 01. 02 GSAP Parallax Effect : Pin 애니메이션 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. GSAP Parallax Effect Pin 애니메이션에 대해서 배워보겠습니다. scrollTrigger 속성 중에 pin 애니메이션 기억하시죠? 무엇인가를 고정시킬 때 사용하는 Pin 속성을 이용해서 다양한 애니메이션 작업할 수 있습니다. 그럼 시작해보겠습니다. 렛츠기릿 🥳 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서.. 2023. 6. 19. 01. GSAP Parallax Effect : 기본 애니메이션 Tutorial/webd GSAP 패럴랙스 이펙트 by @webs 2023. 06. 01. 01 GSAP Parallax Effect : 기본 애니메이션 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 포트폴리오 스킬을 올릴 수 있는 방법에 대해서 공부해보겠습니다. 현재 오픈되어 있는 사이트들은 패럴랙스 형태의 사이트가 많습니다. 즉 스크롤을 내리면 무엇인가 움직이는 효과들이 많습니다. 이런 효과를 패럴랙스 효과라고 합니다. 패럴랙스 파트는 자바스크립트 파트와 GSAP 파트로 나눌 수 있습니다. 기본적인 사항은 자바스크립트를 통해 익히고, 퀄리티 있는 효과들을 GSAP를 통해서 작업할 것입니다. GSAP의 scrollTrigger를 이용하면, 퀄리티 .. 2023. 6. 19. 이전 1 다음
