패럴랙스7 패럴랙스 이펙트07 패럴랙스 이펙트 7 이번 패럴랙스 효과는 스크롤을 내리면 가림막이 먼저 나타났다가 사라지며 글씨와 이미지가 나타나는 효과입니다. 이런 효과를 리빌효과라고 합니다. HTML 코드 이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였으며, scrollTop 정보를 볼 수 있는 info를 추가해주었습니다. 이전 유형과 구조는 완전히 같습니다. HTML 보기 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. . . . scrollTop : 0px CSS 코드 이번 패럴랙스는 가림막 애니메이션 효과를 주기 위해, 다양한 css애니메이션을 적용하였습니다. CSS 보기 /* option */ .reveal > div, .reveal > span { opacity: 0; } .reveal.show >.. 2022. 10. 20. 패럴랙스 이펙트06 패럴랙스 이펙트 6 이번 패럴랙스 효과는 스크롤을 내리면 글씨가 하나씩 쭈루룩 나타나는 효과입니다. 한번 알아볼까요? HTML 코드 이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였으며, scrollTop 정보를 볼 수 있는 info를 추가해주었습니다. HTML 보기 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. . . . scrollTop : 0px CSS 코드 이번 패럴랙스는 이전 유형과 css가 거의 동일합니다. 달라진 부분의 css를 보면, 하나씩 쪼개 저장한 span에 속성을 적용한 것을 알 수 있습니다. span에 show 클래스가 붙으면 나타나게 됩니다. CSS 보기 /* option */ .split span { display: inline-block; opacit.. 2022. 9. 29. 패럴랙스 이펙트05 패럴랙스 이펙트 5 이번 패럴랙스 효과는 스크롤이 내려가면 사진과 텍스트가 스크롤과 달리 움직이며 이질감을 주는 효과입니다. 이질감을 주는 방법을 알아볼까요? HTML 코드 이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였으며, scrollTop 정보를 볼 수 있는 info를 추가해주었습니다. HTML 보기 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. . . . scrollTop : 0px CSS 코드 이번 패럴랙스는 gsap를 활용하여 애니메이션을 주었기 때문에, 트랜지션 속성은 주석처리 해주었습니다. CSS 보기 /* parallax__cont */ #parallax__cont { max-width: 1600px; width: 98%; margin: 0 auto; /* ba.. 2022. 9. 20. 패럴랙스 이펙트04 패럴랙스 이펙트 4 이번 패럴랙스 효과는 스크롤이 내려가면 콘텐츠가 애니메이션과 함께 나타납니다. 애니메이션을 어뗗게 주느냐에 따라 느낌이 달라지니, 잘 알아두었다가 활용해 봅시다! HTML 코드 이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였습니다. HTML 보기 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. . . . CSS 코드 이번 패럴랙스는 회전이나 위치 이동을 통해 나타나는 애니메이션을 주었습니다. CSS 보기 /* 한번에 나타나기 */ /* #contents > section { opacity: 0; transition: all 1s; } #contents > section.show { opacity: 1; } */ /* 개별적으로 나타나기 */ #contents .. 2022. 9. 18. 패럴랙스 이펙트03 패럴랙스 이펙트 3 이번 패럴랙스 이펙트는 스크롤이 내려감에 따라, 사이드 메뉴의 점 모양에 변화가 생기는 효과입니다. 화면이 섹션에 들어가게 되면, 해당 섹션의 점이 활성상태가 됩니다. 또한, 점을 클릭하면 해당하는 섹션으로 스크롤을 이동할 수 있습니다. HTML 코드 이번 패럴랙스 이펙트의 핵심이 되는 HTML의 부분입니다. 메뉴는 패럴랙스 01번 유형과 같지만, 스크롤 값이 맨 아래에 다다르면 Top버튼이 나타나도록 하기 위해, #parallax__top을 만들어 주었습니다. HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 스크립트 요약 1. 메뉴를 클릭했을 때 해당 섹션으로 이동합니다. 2. 스크롤을 내릴 때엔 메뉴가 사라지고, 스크롤을 올리면 메뉴가 나타납니.. 2022. 9. 10. 패럴랙스 이펙트02 패럴랙스 이펙트 2 이번 패럴랙스 이펙트는 스크롤이 내려감에 따라, 사이드 메뉴의 점 모양에 변화가 생기는 효과입니다. 화면이 섹션에 들어가게 되면, 해당 섹션의 점이 활성상태가 됩니다. 또한, 점을 클릭하면 해당하는 섹션으로 스크롤을 이동할 수 있습니다. HTML 코드 이번 패럴랙스 이펙트의 핵심이 되는 HTML의 부분입니다. 메뉴 글씨는 안보이게 처리하고, 점으로 표현하기 위해, 글씨는 span 태그로 감싸주었습니다. HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 스크립트 요약 1. 메뉴를 클릭했을 때 해당 섹션으로 이동하기 위해 기본 클릭 이벤트 효과를 없애주고, 스크롤 이동 스크립트를 작성합니다. 2. 스크롤 이벤트를 발생시키고 현재의 스크롤 값을 불러옵니다. 3... 2022. 9. 10. 패럴랙스 이펙트01 패럴랙스 이펙트 패럴랙스 이펙트는 페이지에서 스크롤을 내림에따라 이미지가 보여지거나 애니메이션이 실행되는 등, 스크롤 값을 이용한 효과입니다. HTML 코드 패럴랙스 이펙트와 관련된 HTML 부분입니다. HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. 02 section2 지혜는 듣는 데서 오고 후회는 말하는 데서 온다. 03 section3 모든 날 중 가장 완전히 잃어버린 날은 웃지 않는 날이다. 04 section4 열의 없이 성취 된 위업이란 아직 하나도 없다. 05 section5 절제는 모든 진주 고리를 이어주는 비단의 실이다. 06 section6 기회는 새와 같은 것 날아가기 전에 꼭 .. 2022. 9. 6. 이전 1 다음 728x90
