jQuery 및 HTML5를 사용한 18가지 시차 스크롤링 자습서 – 2022
게시 됨: 2022-03-17시차는 1940년대 후반부터 사용되어 왔으며 최근에는 게임과 같은 산업에서 모두에게 독특한 게임 경험을 제공하기 위해 활용되고 있습니다. 진지하게, 시차는 디자이너에게 새로운 것으로 들릴 수 있습니다. 그럼에도 불구하고 이 개념은 디자이너들이 이제서야 이 스크롤링 효과를 따라잡고 추세를 확립하는 동안 우리와 함께했습니다. 시차에 대한 설명을 최대한 좁히기 위해 개별 웹 페이지 구성 요소가 다양한 시간 간격으로 사용자와 함께 스크롤할 수 있도록 하는 웹 디자인의 고유한 기술입니다. 이는 컨테이너/그리드/컨텍스트 뒤에서 움직이는 배경 효과를 만드는 데 도움이 됩니다.
Colorlib에서는 각 기사에서 고유한 접근 방식의 일관성을 유지하면서 시차에 최대한 주의를 기울이기 위해 최선을 다했습니다.
이제 jQuery, JavaScript, HTML5 및 CSS3과 같은 기술을 사용하는 것과 관련된 최고의 시차 스크롤 튜토리얼을 소개하고자 합니다. 우리는 웹 디자인의 초심자에게 친숙한 튜토리얼과 시차의 기초와 작동 방식을 설명하는 일부 중간 부분에 중점을 두었습니다.
튜토리얼과 그 모든 것을 다루기 전에 더 자세히 살펴봐야 할 두 가지 측면이 있습니다. 시차 스크롤이 검색 엔진 최적화에 미치는 영향입니다. 확실히 다이내믹한 디자인 기능을 사용하면 검색 엔진이 웹사이트를 처리하는 방식에 영향을 미치며, 유기적 트래픽에 나쁜 영향을 줄 수 있는 기능에 만족하고 싶지 않습니다. Moz의 Carla Dawson이 이 주제에 대해 자세히 설명했습니다. 그녀의 게시물에서 주요 내용은 시차 디자인을 SEO 친화적으로 만들기 위해 적용할 수 있는 3가지 고유한 기술을 나열하는 것입니다. 디자인에 기능적 시차 효과를 적용하기 전에 먼저 시작됩니다. 먼저 SEO 방법론을 구현한 다음 콘텐츠 생성에 집중하세요. 이렇게 하면 검색 엔진이 웹사이트 작동 방식을 이해할 수 있는 여지를 남기고 로봇도 허용할 수 있습니다. 콘텐츠를 처리합니다.
두 번째 측면은 시차 설계의 사용자 경험, 모든 설계에 적합한지, 어떤 문제를 일으킬 수 있는지입니다. 이것은 시차 디자인이 사용자 경험에 미치는 영향에 대한 심층 연구이므로 이 문서를 완전히 처리하고 이해하는 데 시간이 걸릴 것입니다. 이 연구에는 두 그룹의 사람들이 참여했으며, 둘 다 탐색할 샘플 웹사이트가 주어졌습니다: 시차 및 표준 스크롤. 최종 결과는 놀라운 일이 아니며 사용자는 시차 스크롤을 더 좋아하지만 이는 혼란을 초래하고 관심이 가는 한 일반적인 사용성에 대한 우려를 낳습니다. 웹사이트 디자인에 멋진 추가 기능보다 항상 사용자를 우선시해야 합니다. 만약 이것이 당신을 분석하기 위해 전문적인 전문 디자이너를 고용하는 것을 의미한다면, 특히 대규모 비즈니스 운영을 운영하는 경우 그 아이디어를 계속 진행해야 합니다. 우리 자신의 경험에 따르면 소규모 웹 사이트는 일반적으로 시차 스크롤을 사용할 수 있으며 사용자 경험이나 일반적인 사용성에 큰 영향을 미치지 않습니다.
이제 이 두 가지 주제를 다루었으므로 시차 스크롤을 구현하고 시차 스크롤 효과를 만드는 방법에 대한 몇 가지 기술과 방법을 배울 수 있습니다. 첫 번째 튜토리얼은 수년 동안 프론트 엔드 작업을 해왔고 이 분야에서 확고한 전문가인 Petr Tichy가 제공합니다. 시차의 초기 설정 단계, 시차 통합된 애니메이션 효과를 추가하는 방법, 각 애니메이션에 적절한 타이밍을 할당하는 방법을 배우게 됩니다. 이 튜토리얼은 어떤 면에서는 약간 복잡하므로 이전 JavaScript 지식이 있는 중급 개발자를 대상으로 합니다. 같은 튜토리얼에서 훨씬 더 초보자에게 친숙한 시차에 대한 Petr의 이전 튜토리얼 중 하나에 대한 링크를 찾을 수 있습니다.
Ian Yates는 올해 초에 이 튜토리얼을 작성했으며 이것은 이 시차 튜토리얼 모음에서 다룰 이 주제에 대한 가장 신선한 튜토리얼 중 하나일 것입니다. Ian은 훌륭한 시차 효과 조합을 사용하는 다른 웹 사이트에서 영감을 얻는 접근 방식을 취하고 직접 재현하려고 합니다. 유일한 것은 시차 기능이 있는 주요 디자인에 대해 주로 이야기하고 JS 및 CSS를 사용하여 독특한 배경 효과를 만드는 방법에 대한 작은 스니펫을 언급한다는 것입니다.
클라이언트는 디자인 표준에 대한 지식이 많지 않고 트렌드와 웹사이트를 매우 멋지게 보이게 하고 경쟁이라고 할 수 있는 모든 것에 완전히 고유하게 만드는 것과 같은 것들에만 관심을 갖는 경향이 있습니다. 그러한 클라이언트와 함께 작업하는 경우 디자인에 고유한 스크롤 효과를 만드는 방법에 대한 간결한 자습서가 필수적일 것입니다. 여기에서 작업을 완료할 수 있는 방법이 있다고 생각하십시오. CSS3로 스타일을 지정한 다음 jQuery를 사용하여 시차 효과에 내장된 HTML5 코드를 구조화하는 방법을 배우게 됩니다.
Script Tutorials의 튜토리얼은 이미 17,000명 이상의 디자이너와 개발자에게 도달했습니다. 이 숫자는 튜토리얼이 실제로 작동해야 하고 부드러운 시차 모션 경험을 제공해야 함을 의미하기 때문에 우리의 흥미를 끌었습니다. 일부 로컬 테스트 후 실제로 그런 것 같습니다. HTML과 CSS의 일반적인 시차 접근 방식을 사용하며 실제로 해야 할 일은 두 코드를 복사하여 디자인에 붙여넣는 것뿐입니다. 하지만 사용자 정의 디자인을 위해 구현해야 하는 상황에서는 이것이 조금 더 어렵다고 상상할 수 있으므로 아마도 이를 도울 수 있는 전체 자습서를 계속 찾아야 할 것입니다.
Andy Shora가 그런 점에서 우리를 도울 수 있습니다. 그의 주요 목표는 웹사이트 성능을 손상시키지 않는 시차 효과를 만드는 것입니다. 이는 스크롤 이벤트에 대한 DOM 상호 작용의 양을 최소화하고 모바일 장치의 성능을 높이기 위해 하드웨어 가속을 사용하여 달성됩니다. 실제로 이것은 모바일 장치가 시차와 상호 작용하는 방식과 품질이나 디자인 매력을 잃지 않으면서 최대 성능을 끌어내기 위해 무엇을 할 수 있는지에 대해 배우기 위한 또 다른 가이드입니다. 모든 웹사이트 디자인에서 최적의 성능 시차 효과를 만드는 데 사용되는 두 가지 jQuery 조각을 살펴봅니다.
시차는 매우 새로운 기술이기 때문에(지금은 몇 년이 지났지만 여전히) 구형 웹 브라우저에 시차를 구현하려는 개발자에게 많은 도전 과제를 안겨주고 있습니다. 오래된 브라우저가 새로운 웹 기능과 함께 작동하는 방식에 대한 약간의 이해. 튜토리얼은 시차 웹사이트 간의 좋은 예와 나쁜 예를 보여주고 분석 과정에서 배울 수 있는 내용을 보여줍니다. 수직 및 수평과 같은 다양한 시차 각도에 대해서도 설명합니다. 현대 웹 디자인의 가능성은 실제로 새로운 수준으로 진화했습니다. 시차와 관련된 가장 유용한 JavaScript 라이브러리에 대해 배우게 될 것이며 각 라이브러리에는 온라인에서 사용할 수 있는 설명서와 개별 자습서가 있습니다. 이러한 라이브러리를 직접 공유하고 싶었지만 양이 많지 않았기 때문에 다음에 대해 배울 것입니다. 이 튜토리얼에서 모두. 이것은 모든 시차, 특히 상호 작용 및 동적 스크롤 효과를 달성하는 다양한 방법에 대한 정말 훌륭한 리소스입니다.
간단한 시차 효과를 만드는 방법
Sara Vieira는 훌륭한 개발자이지만 시차와 같은 주제에 관해서는 복잡한 코드나 용어를 사용하지 않습니다. 그녀는 원하는 결과를 얻기 위한 간단한 기술을 만드는 것을 선호하며 자신이 공유한 코드를 원하는 속도로 실험할 수 있습니다. JS, HTML, CSS의 세 가지를 실험하게 될 것입니다. 실험하는 가장 좋은 방법은 로컬 웹 서버 또는 라이브 서버의 별도 폴더에 있는 것이며 이러한 방법으로 어떤 종류의 결과를 얻을 수 있는지 확인합니다.
jQuery를 사용한 시차 효과
이 튜토리얼의 좋은 점은 보고 있는 페이지에 이미 구현되어 있으므로 실제로 서면 텍스트로 설명할 필요가 별로 없고 라이브 코드 형식으로 예제를 제공한다는 것입니다. HTML/CSS 스니펫을 가져와 jQuery 스니펫과 결합하여 보고 있는 페이지와 동일한 시차 효과를 얻을 수 있습니다. 각 코드 조각의 오른쪽에 약간의 설명(주석) 조각이 있습니다.
궁극적으로 가능한 한 CSS에 의존하고 싶습니다. CSS는 훨씬 더 나은 성능과 jQuery와 같은 동적 언어를 다루는 번거로움이 적다는 것을 의미합니다. 여기에 있는 것은 훌륭한 성능 벤치마크를 통해 콘텐츠 컨테이너를 시차로 만들고 콘텐츠 경험을 훨씬 더 풍부하게 만드는 간단한 CSS 스니펫입니다.
Stellar.js는 웹사이트에 시차 효과를 빠르게 추가하는 데 도움이 되도록 만든 합리적으로 인기 있는 JavaScript 라이브러리입니다. 라이브러리는 작년에 많은 발전을 보지 못했지만 여전히 커뮤니티 전체의 개발자와 디자이너가 적극적으로 활용하고 있습니다. 특정 요소에 시차 효과가 부여되도록 스텔라를 디자인에 통합하는 방법을 탐구하게 됩니다. 라이브러리는 필요한 경우 기본 개발 워크플로에서 쉽게 분리할 수 있기 때문에 이러한 동적 기능을 연결할 때 확실히 안전한 선택입니다.
시차를 사용하여 WordPress 사이트 팝업 만들기
Parallax는 매우 다양한 상황에서 사용되므로 사용자가 이 흥미로운 기능을 계속 사용하게 된 이유가 무엇인지 궁금합니다. 그 멋진 흐르는 움직임으로 이야기의 한 부분에서 다른 부분으로 독자. WordPress 블로그는 어떻습니까? 기능을 지원하는 고유한 테마를 사용하지 않고 WordPress에 시차를 어떻게 추가합니까? 그것이 진정으로 불타는 질문이라면 다음 튜토리얼에서 모든 답을 찾을 수 있습니다. 이것이 WordPress 블로그의 시차에 대한 가장 포괄적인 자습서라고 생각하며 곧 이러한 훌륭한 효과를 자신의 블로그에 추가할 수 있기를 바랍니다. 시차가 무엇을 하는지 이미 알고 있다면 소개를 건너뛰세요. 가이드의 상당 부분은 시차를 자세히 설명하는 데 전념하므로 이미 알고 있는 것처럼 느껴지는 것은 피하세요.
Wix는 무엇입니까? 그것은 웹에서 최고의 무료 웹사이트 구축 플랫폼이며 이 사람들은 영원히 사업을 하고 있습니다! 이것은 튜토리얼이 아니라 Wix와 같은 플랫폼을 사용하여 웹사이트를 호스팅하고 구축하는 것을 선호하는 클라이언트와 작업하는 개발자를 위한 것입니다. 이제 Wix 사용자는 시차 효과도 즐길 수 있으며 사용자를 끌어들이기 위해 보여줄 좋은 데모가 많이 있습니다. 물론 농담입니다. Wix를 사용하면 독특한 디자인을 구축하는 데 드는 많은 시간을 절약할 수 있고 놀랍게도 웹사이트에 대한 수요는 줄어들지 않았습니다. 클라이언트가 웹사이트를 호스팅하는 데 사용하는 플랫폼에 대해 배우는 데 약간의 추가 시간만 들인다면 이러한 훌륭한 디자인을 스스로 달성할 수 있을지라도 말입니다. 신규 고객에게 Wix 또는 기타 웹사이트 구축 플랫폼으로 웹사이트를 호스팅할 수 있는 기회를 제공하는 것을 두려워하지 마세요. 웹 사이트 유지 관리가 진행되는 한 올바른 방향으로 나아가는 단계입니다. 성능도.
CSS를 사용한 가로 시차
시차 디자인에 대한 많은 선택이 있으므로 디자이너 및 프론트 엔드 개발자로서 하고 있는 일을 알고 있는 한 모든 시차 효과를 만들 수 있으며 약간의 CSS 및 jQuery만 사용하여 풍경을 복제할 수도 있습니다. 마법! Dave Chenell이 시차로 조경 디자인 효과를 만드는 데 필요한 단계를 안내합니다.
CSS 및 Javascript로 다층 시차 일러스트레이션을 만드는 방법
레이어 시차 효과는 특정 시각적 시나리오를 펼치기 위해 서로 위에 두 개의 이미지를 사용하는 것으로 구성됩니다. 이것은 귀하의 사용자가 귀하의 디자인/웹사이트와 함께 갖게 될 시각적 경험을 더욱 향상시킬 것이며, 손으로 그린 예술과 웹사이트 디자인 내 통합 가능성을 탐색할 수 있는 좋은 기회이기도 합니다. 데모 미리보기에서 볼 수 있듯이 서로 겹쳐지고 완전히 이해될 수 있습니다.
순수 CSS 시차 웹사이트
기본 CSS만 사용하여 시차를 사용하여 견고한 스크롤 효과를 만드는 방법에 대한 멋진 소개 자습서입니다.
Firewatch 시차 효과 재현
Parallax는 많은 이름으로 불려왔고, 확실히 시차 트렌드를 절대적으로 싫어하는 충성스러운 디자이너/개발자 그룹이 있습니다. 이 효과를 실시간으로 가능하게 하는 방법. 여기에 있는 튜토리얼은 Firewatch 웹 사이트의 특정 효과를 다시 만들어 콘텐츠를 추가로 펼칠 수 있도록 떨어지는 요소와 결합된 일종의 풍경 효과를 만드는 것입니다. 처음에는 까다롭게 들리지만 Hamish(튜토리얼 작성자)는 모든 것을 단계별로 잘 설명합니다.
귀하의 요구 사항이 무엇이든, 우리는 우리가 나열한 튜토리얼이 이 떠오르는 웹 디자인 트렌드와 관련된 모든 측면을 완전히 다룰 것이라고 생각합니다. 단순한 효과부터 성능 최적화 효과, 몇 분 이상 기억에 남을 콘텐츠 경험을 제공하기 위한 고유한 접근 방식까지. 웹 디자인에서 진행되는 대부분의 작업은 영감과 디자인 숙련도를 통해 달성한 고유한 변형으로 사용자와 독자에게 영감을 주는 방법으로 귀결됩니다.