WordPress에서 시차 효과의 정의 및 추가 방법
게시 됨: 2021-12-12WordPress 테마를 찾아보거나 테마와 함께 제공되는 다양한 기능을 탐색한 사람은 아마도 상위 테마 기능 중 시차 스크롤 이라는 것을 발견했을 것입니다. 모든 사람이 시차 스크롤이 실제로 무엇인지에 대해 잘 알고 있는 것은 아니며 웹사이트에서 시차 스크롤을 볼 때 인식할 수 있는 사람들조차도 그것에 대해 많이 알지 못할 것입니다. 그래서 우리는 이 인기 있는 기술 에 대해 조금 더 이야기 하고 플러그인을 사용하거나 시차 WP 테마를 선택하여 웹사이트 에 이 기술 을 사용할 수 있는 방법을 보여 주는 것이 좋다고 생각 했습니다 . 시차 스크롤 기능 이 있는 웹사이트 가 인기 있는 데는 그만한 이유가 있습니다. 온라인 세계의 최신 트렌드를 따라잡고 싶다면 관련 정보를 모두 알고 있으면 됩니다.
웹사이트에 시차 효과를 추가하는 것이 확실하지 않은 경우 올바른 결정을 내릴 수 있도록 도와드리겠습니다.
- 시차 스크롤이란 무엇입니까?
- 플러그인을 사용하여 시차 효과를 추가하는 방법
- 최고의 WordPress 시차 테마 및 템플릿
짧은 역사
시차 라는 단어는 실제로 천문학에서 유래했습니다. 그것은 두 개의 다른 유리한 지점에서 볼 때 물체의 방향에서 명백한 변위 또는 부조화를 설명합니다. 우주의 물체 중 하나가 당신에게 더 가깝기 때문에 때때로 다른 속도로 움직이는 것처럼 보이는 것을 알고 있습니까? 전경 물체의 역동성은 항상 배경 물체의 역동성보다 더 빠르고 더 활기찬 것처럼 보입니다. "실생활"에서는 실생활이 3차원이기 때문에 이것이 의미가 있습니다. 그러나 디자인은 어떻습니까? 글쎄, 우리는 그것을 실생활처럼 보이게 할 수 있으며, 이것은 실제로 디자이너 가 시차 로 달성하고자 하는 주요 효과 중 하나입니다 .
우리가 알고 있는 Parallax는 비디오 게임 디자인의 황금기, 보다 정확하게는 횡스크롤 아케이드 게임과 함께 처음 도입되었습니다. 그 목적은 게임에 깊이와 역동성 을 더하고 스토리텔링을 개선 하는 것이었습니다. 이 모든 것은 게이머에게 더 매력적이고 몰입도 높은 경험을 제공하기 위함이었습니다.
1980년대 초반의 일입니다. 2010년대 초반으로 빠르게 이동하고 웹 디자인에 적용된 시차 스크롤링에 대한 첫 번째 시도가 있습니다. 몇 년이 지난 오늘날, WordPress 시차 스크롤링이 어떤 형태로든 발생하지 않은 사람은 전 세계에 거의 없습니다.
작동 원리
복잡하게 들릴 수 있지만 사이트에 시차 효과를 추가하는 것은 매우 간단합니다. 시차 스크롤은 실제로 매우 단순한 디자인 개념을 따릅니다. 배경과 전경을 가져와 애니메이션을 사용하여 서로 다른 속도로 움직이게 합니다. 사용자가 페이지를 아래로 스크롤하면 이미지, 갤러리, 비디오, 텍스트 또는 기타 콘텐츠가 포함될 수 있는 전경의 개체보다 배경이 느리게 나타납니다. 그 결과 모든 것이 배경에 고정되어 있는 것이 아니라 공간에 떠 있는 것처럼 보입니다.
WordPress 시차 스크롤링 디자인은 하나의 보편적인 기술이 아닙니다. 오늘날 다양한 시차 디자인 스타일이 사용되지만 대부분은 다중 레이어 사용을 기반으로 합니다 . 각 레이어에는 스크롤 기능과 지정된 속도가 할당됩니다. 그런 다음 다른 브라우저와 뷰어에 적절한 CSS 또는 HTML 수정이 적용되어 이러한 리소스의 최신 버전에 대한 올바른 구문을 사용해야 합니다. 그렇지 않으면 전체가 제대로 작동하지 않습니다.
좋은 이유
시차 스크롤링은 요즘 엄청나게 대중화되어 문자 그대로 어떤 방식, 모양 또는 형태로든 그것을 사용하지 않는 웹사이트가 세상에 없는 것 같습니다. 이것은 물론 사실이 아니지만 문제의 사실은 여전히 남아 있습니다. 이 기술은 특히 WordPress 사이트에서 널리 사용됩니다 . 그렇다면 웹 디자이너에게 매력적인 시차 스크롤이란 무엇일까요?
답은 사용자 경험에 있습니다 . 시차 스크롤 은 웹사이트에서 콘텐츠를 인식하는 역동적이고 흥미로운 방식을 만듭니다 . 그것은 깊이와 움직임 의 환상을 만들어 우리를 끌어들입니다. Parallax는 또한 다양한 콘텐츠 요소를 통해 사용자를 유도하기 때문에 훌륭한 스토리텔링 도구 입니다. 물론 제대로 사용한다면 말이다. 시차 사용의 나쁜 예는 많이 있습니다. 때로는 디자이너가 방법을 알고 있기 때문에 실제로 그것에 대해 아무 말도 할 수 없기 때문에 디자이너가 그것을 거기에 넣는 것처럼 느껴집니다.
사용자는 엔터테인먼트를 좋아합니다. WordPress 비디오 배경 플러그인을 사용하여 쉽게 추가할 수 있는 비디오 배경과 같은 입증된 레시피 외에도 시차 스크롤도 이를 수행하는 좋은 방법입니다. 또한 기업이 말 그대로 시청자를 웹사이트의 원하는 부분으로 끌어들이는 좋은 방법입니다. 예를 들어, 제품 또는 서비스 페이지.
어쨌든 스크롤 동작은 확실히 놀라운 요소를 수반합니다. 제대로 하면 사용자를 기쁘게 하고 웹사이트에 항상 좋은 일입니다.
초보자와 중급 사용자의 경우 시차를 추가하는 가장 좋은 방법은 플러그인을 사용하는 것입니다. 시장에는 훌륭한 시차 플러그인 이 너무 많이 있으며 대부분이 WordPress 웹 사이트에 시차를 추가하는 데 도움이 되는 훌륭한 작업을 수행합니다. 이 기사의 목적을 위해 고급 WordPress 배경 플러그인 을 사용할 것입니다.
주로 시차 효과를 추가하기 위해 만들어졌지만 이 도구는 다른 많은 흥미로운 기능을 다룹니다. 예를 들어 텍스트 뒤에 정적 배경을 추가하는 데 사용할 수 있습니다 . 또한 특정 행에 배경을 추가하는 데도 도움이 됩니다. 배경을 추가하여 한 단락에 색상을 지정하려는 경우 이 플러그인을 사용하면 클릭 한 번으로 이 작업을 수행할 수 있습니다.
플러그인 설치
먼저 일반적인 방법으로 플러그인 을 설치하고 활성화 해야 합니다. 가장 먼저 할 일은 백엔드로 이동하여 플러그인을 찾는 것입니다. 플러그인을 클릭한 다음 새로 추가 를 클릭합니다 . 검색 필드에 고급 WordPress 배경 을 입력하고 찾으면 설치를 클릭 합니다 . 설치 프로세스가 완료되면 활성화 를 클릭 합니다 . 이제 새 플러그인이 플러그인 메뉴에 나열되어야 합니다.
플러그인을 사용하여 클래식 편집기로 시차 추가
실제로 시차를 추가하려면 추가하려는 페이지나 게시물로 이동하세요. 편집기에 새 버튼이 표시 됩니다. 그것을 가리키면 Advanced WordPress Backgrounds 라고 표시됩니다. 그것을 클릭하고 다른 값을 설정하고 시차 효과에 대한 설정을 변경할 팝업을 표시합니다.
먼저 배경 유형을 선택합니다. 이 예에서는 이미지를 사용할 것입니다.
다음으로 할 일은 사용할 이미지를 선택하는 것입니다. 전체 너비 이미지의 경우 Stretch 확인란을 선택합니다.
그런 다음 시차 효과를 선택합니다. Scroll 로 이동합니다. 여기에서 원하는 스크롤 속도도 설정할 수 있습니다.
시차 외에도 언급할 가치가 있는 마우스 효과 가 있습니다. 덕분에 마우스 커서 아래에 있는 이미지에 슬로우 모션 효과를 만들 수 있습니다 . 가장 좋은 점은 동일한 이미지에 시차와 마우스 효과를 결합할 수 있다는 것입니다. 특정 요구 사항과 목표에 따라 요구 사항에 더 잘 맞는 것을 선택하십시오.
시차 이미지의 크기와 높이는 스타일 탭에서 설정할 수 있습니다.
마지막으로 삽입 버튼을 클릭합니다.
이제 편집기에 다음 단축 코드가 나타납니다.
[nk_awb awb_type=”이미지” awb_stretch=”true” awb_image=”22″ awb_image_size=”전체” awb_parallax=”scroll” _mouse_parallax_speed=”0.5″0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_mouse_ 여기에 귀하의 콘텐츠 [/nk_awb]
" 여기에 귀하의 콘텐츠 "라는 단어를 실제 콘텐츠(텍스트, 이미지, 비디오...)로 바꿔야 합니다. 저장 을 클릭하는 것을 잊지 마십시오.
웹사이트로 이동하여 방금 시차를 추가한 게시물이나 페이지를 확인하여 모든 것이 제대로 작동하는지 확인합니다.
플러그인을 사용하여 Gutenberg Editor로 시차 추가
이 플러그인도 구텐베르크 친화적입니다. 이를 사용하려면 시차 효과 추가를 시작하기 위해 배경(AWB) 블록을 클릭합니다.
다른 모든 블록과 마찬가지로 배경(AWB) 블록 에는 클래식 편집기의 옵션과 거의 동일한 자체 옵션이 있습니다 .
가장 큰 부분은 시차 효과가 있는 섹션에 색상, 이미지 또는 비디오를 추가할 수 있다는 것입니다. 또한 패딩, 속도 또는 시차 유형을 추가하여 시차의 크기를 설정할 수 있습니다. 마지막으로 Gutenberg는 이전에 언급한 마우스 효과를 지원합니다.
시차 스크롤은 실제로 보이는 것보다 제대로 하기가 더 어렵습니다. 특히 WordPress 초보자인 경우 시차 효과를 추가하는 것이 너무 복잡해 보일 수 있습니다. 그렇기 때문에 지금 시장에서 구할 수 있는 최고의 시차 WordPress 테마의 짧은 목록을 던지면 도움이 될 것이라고 생각한 것입니다.
- 바자 – 현대적이고 날카로운 전자 상거래 테마
- PlayerX – 게임 및 e스포츠를 위한 고성능 테마
- 진달래 – 패션 사진 테마
- 보스턴 – 기업 시차 WordPress 테마
- Hypnos – OnePage Parallax WordPress 테마
패션 테마, 특히 온라인 상점은 시차 스크롤의 혜택을 가장 많이 받는 테마입니다. 사실, 패션 및 의류 웹사이트, 상점 또는 블로그가 없는 것은 상상하기 어렵습니다. 바자회 는 이것을 제대로 이해한 것 같은 테마 중 하나입니다. 이 멋진 테마는 아름답게 제작된 룩북을 포함하여 멋진 페이지와 함께 제공됩니다 . 비대칭 쇼핑 페이지는 방문자가 쇼핑을 즐길 수 있도록 제품을 진열하는 데 이상적 입니다.
Bazaar는 강력한 Select Core 플러그인, 사용자 정의 제품 단축 코드, 비디오 배경 섹션, 소셜 위젯 및 사용자 정의 가능한 Google 지도와 함께 제공됩니다. 물론 테마는 완전히 반응하며 강력한 WPBakery 페이지 빌더를 포함합니다 .
Bazaar를 최고의 시차 WordPress 테마로 만드는 기능:
- 부드러운 스크롤
- SEO 최적화
- 번역 준비 완료
- 무료 슬라이더 혁명 플러그인
- 1-클릭 데모 콘텐츠 가져오기
게임, 게이머, eSports 및 스튜디오에 대한 모든 것에 대한 이 흥미진진한 테마 는 시차 스크롤이 올바르게 수행 된 훌륭한 예입니다 . 게임 산업의 특성상 PlayerX 가 테이블에 제공하는 일종의 다이내믹하고 흥미진진한 사용자 경험이 필요 합니다.
멋진 시차 스크롤 및 슬라이더 외에도 PlayerX 에는 성공적인 게임 사이트에 필요한 모든 기능이 포함되어 있습니다 . 맞춤형 요소에는 우수한 인포그래픽, 풍부한 타이포그래피, 팀 프레젠테이션, 평가, 경기 목록 및 스트림 상자가 포함됩니다.
대체로 PlayerX는 시차 스크롤이 무엇이며 어떻게 사용해야 하는지를 보여주는 테마입니다.
PlayerX를 최고의 시차 WordPress 테마로 만드는 기능:
- 경기 및 스트리밍용 단축 코드
- 팀 캐러셀
- 통합검색
- 7 아이콘 글꼴 팩
- WooCommerce 호환
Azalea 는 사진을 위한 화려하고 정교한 WordPress 테마로 사전 제작된 홈페이지 레이아웃 세트가 있으며 그 중 하나는 시차 스크롤링을 기반으로 합니다. 패션 사진에 이상적인 진달래는 라이프 스타일과 미용에서부터 블로그와 사진을 판매할 수 있는 상점에 이르기까지 다른 용도로도 사용할 수 있습니다. 각 홈페이지는 단순히 놀랍지만 시차에는 대부분의 패션 사진 작가가 높이 평가할 특별한 매력이 있습니다.
Azalea는 매우 강력하지만 사용하기 어렵다는 것은 아닙니다. WordPress에 대한 경험이 전혀 없는 사람이라도 이 테마를 쉽게 설정하고 매우 성공적인 패션, 뷰티 및 라이프스타일 사진 웹사이트를 운영할 수 있습니다.
Azalea를 최고의 시차 WordPress 테마로 만드는 기능:
- 통과 방지 교정 갤러리
- 시차 단축 코드
- 클라이언트 캐러셀
- CTA 단축 코드
- 5 헤더 스타일
Boston 의 매우 멋진 점은 한 페이지 웹사이트와 다중 페이지 중 하나 를 선택할 수 있다는 것입니다. 이러한 유연성 외에도 광범위한 사용자 정의 옵션과 인상적인 시차 페이지도 있습니다.
Boston은 기업, 대기업 및 대행사를 위해 특별히 설계된 시차 WordPress 테마입니다 . 한 페이지를 선택하든 다중 페이지 웹 사이트를 선택하든 시차를 사용하여 과시하지 않고 방문자에게 현대적인 느낌을 주는 매우 똑똑하고 전문적인 웹 사이트를 얻게 됩니다. 이 테마는 모바일 우선 개념을 기반 으로 개발 되었습니다. 이는 클라이언트와 고객이 대부분의 탐색을 휴대용 장치에서 수행할 가능성이 높기 때문에 중요합니다. 아, 그리고 프로 사용자는 파일이 적어서 훨씬 가벼워서 그들을 위해 특별히 만들어진 버전이 있다는 것을 알게 되어 기쁠 것입니다.
Boston을 최고의 시차 WordPress 테마로 만드는 기능:
- 라이트박스 미리보기
- 트위터 라이브
- 무제한 포트폴리오 작품
- Flexslider 및 혁명 슬라이더
- 근무 연락처 및 뉴스레터 양식
매우 기능적이고 포괄적이며 현대적인 한 페이지 웹사이트가 당신이 찾고 있는 것이라면 Hypnos 가 당신에게 딱 맞는 테마일 것입니다. 이 반응형 테마는 진정으로 다목적 테마입니다 . 중소기업, 에이전시, 스튜디오부터 포트폴리오, 블로그, 샵까지 무엇이든 사용할 수 있습니다. 밝고 어두운 버전이 함께 제공되며 둘 다 멋지게 보이고 시차 효과가 뛰어납니다 .
또한 Hypnos는 매우 직관적이며 뛰어난 고객 지원과 다양한 기능을 제공합니다. 이 테마와 함께 제공되는 페이지 빌더는 사용자 정의 섹션과 함께 제공되며 무엇보다도 정렬 가능한 포트폴리오, 작업 연락처 양식, Revolution Slider 및 Google 글꼴을 얻을 수 있습니다.
Hypnos를 최고의 시차 WordPress 테마로 만드는 기능:
- WPML 호환
- SEO 최적화
- 레티나 레디
- 커스텀 프리로더
- 라이브 채팅 지원
결론적으로
시차 스크롤은 확실히 WordPress 웹 사이트를 향상 하지만 올바르게 수행하는 경우에만 가능합니다. 시차를 갖기 위해 시차를 추가하는 것은 어리석은 일입니다. 이 효과를 사용하는 웹사이트가 너무 많기 때문에 우리는 과포화와 그것이 어울리지 않고 쓸모없고 둔해지게 되는 지점에 점점 더 가까워질 수 있습니다.
둘째, 시차 스크롤이 올바르게 수행되어야 합니다 . 그것은 결함 없이 실행되어야 합니다. 그렇지 않으면 사이트 방문자가 분명히 짜증을 낼 것입니다.
셋째, 시차 스크롤을 사용하여 한 페이지 웹사이트에 생명을 불어넣는 것은 매우 매력적일 수 있지만 실제로 사용자가 스크롤할 수 있도록 할 말과 콘텐츠가 있는지 확인하십시오.
넷째, 훌륭하고 세심한 시차 스크롤 효과로 방문자의 관심을 끌 수 있었다면 자신에게 유리하게 작동하도록 하는 것을 잊지 마십시오. CTA를 신중하게 계획하여 더 많은 관심을 끌도록 하십시오 .
물론 프리미엄 시차 WP 테마를 선택하면 테마 작성자가 잘 고려했기 때문에 이러한 문제에 대해 걱정할 필요가 없습니다.
결론은 시차 스크롤링이 꽤 훌륭하다는 것입니다. 예, 그것을 엉망으로 만드는 방법이 있으며 예, 약간의 과포화가 있을 수 있습니다. 그래도 사이트 트래픽을 늘리고 전환율을 최적화하는 강력한 도구입니다. 또한 보기에도 좋고 웹사이트에 멋진 느낌을 더해줍니다 .
WordPress 시차 스크롤에 대한 귀하의 의견은 무엇입니까? 아래 댓글 섹션에서 여러분의 의견을 듣고 싶습니다!
이 기사가 도움이 되었기를 바랍니다. 이 글이 마음에 드셨다면 이 글도 함께 확인해 보세요!
- 최고의 멋지고 세련된 WordPress 테마
- 방문자를 웃게 만드는 팝업용 WordPress 플러그인
- 5개 이상의 그림 같은 WordPress YouTube 플러그인