패럴랙스 효과, 비디오 배경 및 켄 번스 효과 추가 방법

작성자

카테고리:

, , ,

Page Builder Sandwich에는 통칭 Fancy Background Effects(멋진 배경 효과)라고 부르는 기능이 있습니다. 여기에는 패럴랙스 효과(Parallax Effect), 동영상 배경(Video Backgrounds), 켄 번스 효과(Ken Burns Effect)

What are the different Fancy Background Effects?

PBS의 Fancy Background Effects는 웹사이트 방문자의 시선을 사로잡는 데 필요한 활력을 불어넣어 줍니다. 이 효과들은 관심을 끌 수 있는 확실한 방법이며, 적절히 활용하면 웹사이트 트래픽 측면에서 눈에 띄는 성과를 거둘 수 있습니다.

패럴랙스 효과(The Parallax Effect)

페이지에 패럴랙스 효과를 적용하면 배경에 입체감이 생겨 스크롤할 때 사이트의 특정 요소가 “돋보이게” 됩니다. 패럴랙스 배경이 적용된 페이지와 적용되지 않은 페이지의 예시는 다음과 같습니다.

With Parallax Scrolling

The background image scrolls at a different rate as the rest of the elements in the page.

Without Parallax Scrolling

The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.

Video Backgrounds

동영상 배경을 사용하면 정지 이미지 대신 반복 재생되는 동영상을 배경에 배치할 수 있습니다. PBS 동영상 배경의 큰 장점은 안내 메시지가 표시될 때 원하는 YouTube 또는 Vimeo 링크를 붙여넣기만 하면 자동으로 동영상 배경으로 변환된다는 점입니다. 직접 제작한 동영상을 업로드하여 사용할 수도 있습니다.

확인해 볼 수 있는 몇 가지 동영상 배경 샘플:

The Ken Burns Effect

Ken Burns, who popularized the Ken Burns effect in film.

In documentaries, do you ever notice when they show photos that slowly zoom into detail? That’s called the Ken Burns Effect. You can access these effects on Page Builder Sandwich, too.

How do I add the Fancy Background Effects?

다음 단계를 통해 모든 Fancy Background Effects를 찾을 수 있습니다:

Step 1: Choose a row you’d like to add an effect on. Click on this row’s settings button (the gear icon on the left). This will open the Properties Inspector.

Step 2: Once the Properties Inspector pops up, scroll down a bit until you find the option called “Fancy Background Effects”.

Step 3: Once you’ve found it, you’ll see that you can click a dropdown button and select which background effect you’d like on your row.

Step 4: Depending on which Fancy Background Effect you choose, you can adjust each effect’s settings. For example, for the Parallax effect, you can adjust its height and position.

이제 완료되었습니다! 이 작업이 끝나면 사이트에 Fancy Background Effects가 완벽하게 적용되어 나타나는 것을 확인할 수 있습니다.

Have you used PBS’ Fancy Backgrounds yet?

기능에 추가되었으면 하는 다른 배경 효과가 있으신가요? 아니면 이러한 효과 중 하나를 적용하여 만든 PBS 기반 사이트를 자랑하고 싶으신가요? 아래 댓글로 알려주세요!