시차 스크롤링 웹 사이트를 만드는 방법

현대 웹사이트의 시차 스크롤 추세는 멈출 기미가 보이지 않습니다. 기술로 게임 디자이너 및 기타 아티스트가 수년 동안 사용했으며 웹 개발자가 자신의 기술을 과시하고 창의력을 발휘할 수 있는 인기 있는 방법으로 떠오른 것은 지난 2년뿐입니다.

정확히 무엇입니까? 간단히 말해서, 시차 스크롤은 서로 다른 속도로 두 개 이상의 개체를 동시에 이동하여 2D 환경에서 깊이의 환상을 만듭니다. 블로거가 스크롤 트리거 애니메이션을 '시차'로 레이블을 지정하면 때때로 혼동이 발생하지만 유사한 경험을 제공할 수 있지만 기술적으로 동일하지는 않습니다.

시차 스크롤을 사용하는 훌륭한 사이트가 많이 있습니다. 커피 콩이 위에서 떨어지는 것처럼 보이게 하는 효과를 사용하는 Madwell과 같은 디지털 대행사에서 시차 스크롤을 사용하여 방문자에게 역사에 대한 통찰력을 제공하는 의류 회사 Von Dutch에 이르기까지. 시차 스크롤은 복잡성과 스타일이 다양한 웹 사이트에 콘텐츠를 표시하는 흥미로운 방법이 되었습니다.

시차 효과를 만드는 방법에 대한 비디오 자습서

또한 웹에서 시차 스크롤 효과를 만드는 방법에 대한 많은 비디오 자습서 및 웹 디자인 과정을 찾을 수 있습니다. 예를 들어 Skillfeed.com은 수많은 새로운 기술을 배우는 데 도움이 되는 전문 교육 비디오를 제공합니다. 그들의 "시차 웹사이트 구축 방법" 과정은 시차 설계에 대한 멋진 단계별 매뉴얼입니다.

또한 "초보자를 위한 웹 모션: 시차 효과 만들기"라는 멋진 비디오 자습서를 Lynda.com에서 사용할 수 있습니다.

뉴스레터를 구독하고 멋진 eBook "초보자 HTML 가이드"를 무료로 받으십시오. 2주에 한 번 유용한 게시물과 공짜 물건만 보내드립니다.

시차 스크롤 효과가 있는 웹 디자인:

B.co Joomla 템플릿

인테리어 및 가구 반응형 웹사이트 템플릿

헤더 그랜트 - 재정 고문 Joomla 템플릿

Advisto - 재정 고문 WordPress 테마

편안한 방문 페이지 템플릿

더 많은 템플릿:
• 멋진 영웅 헤더가 있는 15가지 템플릿
• 동기 부여 스포츠 WordPress 테마 50개
• 웹 디자인 라이브러리의 머티리얼 스타일 웹 템플릿

쉬운 길

처음부터 자신만의 시차 효과를 만드는 방법을 배우고 싶다면 계속 읽으십시오. 그러나 시간이 없거나 기분이 좋지 않다면 다음 라이브러리에서 많은 작업을 수행할 수 있습니다.

• parallax.js
• 스텔라.js

시작하기 전에 고려해야 할 사항

시차 효과의 구현은 미묘한 것에서 복잡한 것까지 다양할 수 있으며 이러한 효과를 만드는 데 필요한 기술적 기술은 각각 간단한 것에서 어려운 것까지 다양합니다. 시간 비용뿐만 아니라 높은 복잡성의 또 다른 결과는 성능 저하일 수 있습니다.

시차 기능을 계획할 때 이러한 점을 염두에 두고 사용성과 성능이 저하되지 않도록 하십시오. 이 작업을 정확히 수행하는 방법은 프로젝트에 따라 크게 다릅니다. 예를 들어 인터랙티브 인포그래픽과 뉴스 웹사이트를 비교해보세요.

효과 만들기

이제 재미있는 부분! 시차 효과를 만드는 한 가지 방법을 보여 드리겠습니다. 이 기본 예제에는 페이지 스크롤과 함께 두 개의 배경 이미지 위치에 애니메이션 효과를 주는 작업이 포함됩니다. 저는 배경 이미지를 예로 사용하고 있지만 기술 이론을 다른 종류의 요소에 적용할 수 있습니다.

HTML

먼저 두 개의 컨테이너를 생성해 보겠습니다. JavaScript에서 독점적으로 사용하는 클래스에는 'js-'를 접두사로 붙였습니다. 이렇게 하면 사이트의 스크립트에서 사용하는 클래스를 쉽게 식별할 수 있습니다. Javascript 관련 식별자에 ID를 사용하는 경우에도 이 작업을 수행하는 것이 좋습니다.

 <div class="js-background-1 container"> <h2>The first box!</h2> </div> <div class="js-background-2 container"> <h2>The second box!</h2> </div>

핵심 HTML5 캔버스: 그래픽, 애니메이션 및 게임 개발

CSS

여기서 우리는 컨테이너에 약간의 넉넉한 패딩을 적용하여 효과를 명확하게 시연할 수 있을 만큼 충분히 크게 만듭니다. 또한 각각에 고유한 배경 이미지를 할당하고 있습니다.

 .container { padding: 400px 200px; /* This gives our headings a bit of breathing room */ } .js-background-1 { background: transparent url(background1.png) center 0 no-repeat; } .js-background-2 { background: transparent url(background2.png) center 0 no-repeat; }

HTML, CSS, JavaScript 및 웹 그래픽에 대한 초보자 가이드

JS(실행하려면 jQuery 필요)

이것은 얻을 수있는 기본적인 것입니다. 몇 가지 변수를 설정하는 것으로 시작합니다. $창 및 속도. Velocity는 페이지가 위에서 스크롤한 거리를 기준으로 배경 이미지의 ypos 속성을 곱하는 데 사용됩니다.

 var $window = $(window); var velocity = 0.4; function update(){ var pos = $window.scrollTop(); $('.container').each(function() { var $element = $(this); var height = $element.height(); $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px'); }); }; $window.bind('scroll', update);

HTML, CSS 및 JavaScript의 애니메이션

약간의 운이 있으면 이제 작동하는 시차 효과가 나타납니다!

작동하지 않으면 브라우저의 검사기에서 콘솔을 확인하여 JS 오류가 있는지 확인하십시오.

더 크고 멋지게 만드십시오.

해당 스크립트를 강화하려는 경우 컨테이너가 뷰포트 외부에 있을 때 감지하여 배경 위치 계산 및 조정을 중지할 수 있습니다. 이렇게 하면 화면 밖의 콘텐츠에 대한 불필요한 계산이 중지되어 코드 성능이 향상됩니다.

그 이상으로 나는 당신이 실험하도록 권장합니다. 효과가 더 복잡하고 동시에 애니메이션을 적용하는 요소가 많을수록 JS가 더 효율적이어야 한다는 점을 기억하십시오.

모으다

위에서 배운 내용을 요약하자면 다음과 같습니다.

• 시간이 부족한 경우 리소스 라이브러리 사용을 고려하십시오. parallax.js와 stellar.js가 좋은 예입니다.
• 신중하게 계획하십시오. 효과가 복잡할수록 성능과 사용성을 고려할 때 더 주의해야 합니다.
• JavaScript를 최대한 빠르고 메모리 효율적으로 만드십시오. 이렇게 하면 성능을 개선하고 프레임 드롭 가능성을 줄이는 데 도움이 됩니다.
• 문제가 발생하면 브라우저의 콘솔을 사용하여 오류를 디버그하십시오.

가장 중요한 것은 재미와 실험을 하는 것입니다!

시차 스크롤 효과 자습서 JavaScript 애니메이션 프로그래밍(비디오)

이 기사가 재미있었다면 Web Design Library에서 더 많은 관련 게시물 을 확인하십시오.

• 웹 사이트에 시차 스크롤을 현명하게 사용하는 방법에 대한 팁
• 웹 디자인의 시차 스크롤: 20개의 멋진 시차 웹사이트
• 시차 갤러리
• 웹 디자인의 시차 스크롤에 대한 상위 5가지 예
• Cool Parallax Scrolling 웹 사이트 모음