WEBSTORYBOY

본문 바로가기

CSS HTML JAVASCRIPT

튜토리얼

자연스럽게 변하는 배경색 변경 효과 만들어보기 Tutorial/Portfolio 자연스럽게 변하는 배경색 변경 효과 만들어보기 by @webs 2022. 12. 26. Tutorial 배경 색 + 글씨 색 변경하기 + 스므스 효과 주기 난이도 중간 소스 다운로드 완성 화면 보기 완성 코드 보기 소개 안녕하세요🤭 이번에 변경색으로 자연스럽게 변경하는 효과를 만들어 보겠습니다. 섹션이 넘어갈 때 배경색을 스므스하게 변경해주면 고급스러운 느낌을 줄 수 있습니다. 당연히 이번에도 GSAP1는 당연히 사용하게 되구요! 스므스 효과는 Lenis2를 사용하겠습니다. 아~~ 참고로 이미지는 unsplash3에서 가져왔습니다. 01. 기본 코딩 기본 구조부터 셋팅을 합시다. 🥳 6개의 섹션이 있다고 가정하고 구조화하겠습니다. 그럼 CSS도 셋팅해주겠습니다. 기본 설.. 댓글 0 2023.01.05
가로 모드 스므스 효과 만들기 Tutorial/Portfolio 가로 모드 스므스 효과 만들기 by @webs 2022. 12. 26. Tutorial 가로 모드 스므스 효과 만들기 난이도 중간 소스 다운로드 완성 화면 보기 완성 코드 보기 소개 안녕하세요🤭 이번에는 가로모드를 만들어 보겠습니다. GSAP1를 이용하여 가로모드를 구성하고, Lenis2를 이용하여 스므스 효과를 줄 것입니다. 생각보다 어렵지 않으니, 잘 따라해주시면, 퀄리티 있는 포트폴리오를 만들 수 있습니다. 그럼 시작해보겠습니다.🥲 01. 기본 코딩 우선 구조는 header, main, footer로 설정하겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } a { te.. 댓글 0 2022.12.27
GSAP를 이용한 눈 내리는 메인 효과 만들기 Tutorial/Portfolio GSAP를 이용한 눈 내리는 효과 만들기 by @webs 2022. 12. 19. Tutorial 눈 내리는 효과 만들기 난이도 중간 소스 다운로드 완성 화면 보기 완성 코드 보기 소개 안녕하세요🤭 오늘은 눈 내리는 효과를 만들어보겠습니다. 눈내리는 효과는 검색을 해보면 많이 나오는 효과 중에 하나입니다. 하지만 우리는 특별하게 GSAP1를 이용하여 작업하겠습니다. 생각보다 어렵지 않으니, 하나씩 따라 해보세요! 그럼 시작해보겠습니다. 01. 기본 코딩 main과 section 태그를 만들고, 텍스트를 만들어 주겠습니다. 텍스트는 나중에 애니메이션 효과를 주기 위해서 div 태그로 감싸줬습니다. 코딩과 함께 한 모든 순간이 눈부셨다. 우선 웹 폰트를 설정하겠습니다. 웹 .. 댓글 0 2022.12.22
GSAP, THREE.JS를 이용한 포트폴리오 메인페이지 만들기 Tutorial/Portfolio 포트폴리오 메인 페이지 만들기 - GSAP, THREE.JS by @webs 2022. 12. 15. Tutorial 포폴 메인페이지 만들기 난이도 중간 소스 다운로드 완성 화면 보기 완성 코드 보기 소개 안녕하세요! 오늘은 포트폴리오 메인페이지를 만들어 보겠습니다. 배경에 THREE.JS1 효과와 메인 로딩애니메이션은 GSAP2를 사용할 것입니다. 사이트는 studyhall3 사이트를 참고하였으며, 폰트는 pangrampangram4에서 무료 버전과 구글폰트를 사용하였습니다. 그럼 시작해보겠습니다. 01. 기본 코딩 기본 골격부터 작업하겠습니다. 헤더, 메인, 푸터 영역을 설정하겠습니다. 마지막으로 애니메이션과 위치 등을 설정하면, 메인 페이지가 완성됩니다. 포트폴리오.. 댓글 0 2022.12.16

모든글

more

HTML

more

CSS

more

JAVASCRIPT

more

뉴스

티스토리툴바