Free Elementor Page Builder를 사용하여 움직이는 배경 이미지 애니메이션을 만듭니다

Free Elementor 페이지 빌더를 사용하여 움직이는 배경 이미지 애니메이션을 만드는 것은 지금 나에게 매우 쉬운 것 같습니다. 여기 페이지 내에 몇 가지 CSS 코드를 추가해야합니다. CSS 코드 무료 Elementor 도 추가하는 방법이 있습니다.

배경 이미지와 함께 놀라운 것을 공유하겠습니다. 눈길을 끄는 것 같은 멋진 것을 만드는 것은 정말 재미있었습니다. 다음은 다양한 유형의 두 가지 소스입니다 Elementor 페이지 배경 그리고 Elementor 왜곡된 배경 요소나 페이지 또는 섹션 배경을 창의적인 방식으로 정렬하려면 이 항목을 확인하세요. 

움직이는 배경 이미지 애니메이션이란 무엇입니까?

A 이동 배경 이미지 애니메이션 는 페이지 콘텐츠 뒤에 있는 넓은 배경 이미지를 천천히 슬라이드하는 반복 CSS 애니메이션이므로 비디오 파일을 로드하지 않고도 섹션이 살아 있는 것처럼 느껴집니다. Elementor 에서는 전체 높이 섹션으로 CSS ID 를 전달하는 두 개의 스페이서로 작성합니다 bg 그리고 오버레이, 그리고 짧은 블록 CSS @keyframes HTML 위젯에 붙여넣은 코드 — Elementor Pro 라이센스도 없고 JavaScript도 필요하지 않습니다. 가장 가벼운 것 중 하나입니다 Elementor 애니메이션 효과 브라우저가 미디어를 재생하는 대신 단일 변환을 애니메이션화하기 때문에 추가할 수 있습니다.

먼저 다음 비디오에서 정확히 어떻게 보이는지 봅시다.

이 섹션은 다음에서 확인할 수 있습니다 마스터 애드온 템플릿 라이브러리 무료로. 당신은 쉽게 당신이 a 인 경우에 당신의 웹페이지 내의 이것을 가져올 수 있습니다 마스터 애드온 – Elementor 페이지 빌더 애드온 플러그인 사용자. 

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

체크 마스터 애드온 플러그인을 설치하고 활성화하는 방법

페이지나 게시물을 만들고 elementor 를 사용하여 편집합니다. 마스터 애드온 템플릿 라이브러리 아이콘이 표시됩니다. 

MA Tempalte 라이브러리를 클릭하고 몇 초 동안 기다리면 데이터를로드 할 수 있습니다. “준비 페이지”와 “섹션”이 표시됩니다. 섹션 탭을 클릭하고 몇 초 정도 기다립니다. 이제 “이동 배경 이미지 애니메이션”이 표시됩니다. 

이제 확대 아이콘을 클릭하여 미리 봅니다. 그러면 삽입 버튼이 표시됩니다. 이 “삽입”버튼을 클릭하면 한 번의 클릭으로이 템플릿을 얻을 수 있습니다. 그 후에는 자유롭게 내용을 편집 할 수 있습니다.

이것은 당신의 섹션이 어떻게 보일 것입니다. 나는 내 localhost 에서 워드 프레스 기본 테마를 사용하고 있습니다. 그냥 제목이나 단락 또는 소셜을 클릭하여 콘텐츠를 편집합니다. 

자신만의 이미지와 오버레이 효과를 추가하려면 다음으로 이동해야 합니다 BG 및 오버레이 이미지 섹션 변경 지금.

이동 배경 이미지 애니메이션 튜토리얼

짧은 대답: “화면에 맞추기”로 설정된 1열 Elementor 섹션을 구축하고 CSS ID가 있는 스페이서를 추가합니다 bg 콘텐츠 위에 ID가 있는 두 번째 스페이서가 있습니다 오버레이 그 아래에, 다음 HTML 위젯에 아래의 CSS 애니메이션 코드를 붙여 넣기 자신의 이미지 URL로 스왑. 당신은 세 가지 자산이 필요합니다 — 넓은 배경 이미지, PNG 오버레이 및 SVG 오버레이 — 그리고 전체 빌드는 무료 Elementor 페이지 빌더에 약 십분 정도 걸립니다.

필요한 자산: 

1. 1500 x 500 픽셀 크기의 이미지입니다
2. PNG 오버레이 이미지
3. SVG 오버레이 이미지

이제 하나의 열 구조를 추가하고 높이를 “화면에 맞추기” 로 만듭니다. 

그냥 지금 콘텐츠를 추가. 나는 여기에 데모 콘텐츠 타이포그래피 정보를 공유하려고합니다. 

제목(중고 요소 또는 기본 제목 요소): 글꼴 패밀리: Source Sans Pro,글꼴 크기: 120px,글꼴 무게: 900,줄 높이: 140,글자 간격: -5,색상: Black

텍스트 (중고 요소 또는 기본 텍스트 편집기 요소): 글꼴 패밀리: Source Sans Pro,글꼴 크기: 30px,글꼴 무게: 400,줄 높이: 40,색상: Black

소셜(중고 요소 또는 기본 소셜 요소): 모양: 원,정렬: 중심,색상: 사용자 정의,기본 검정: rgba (175,175,175,0), 보조 색상: 검정,크기: 40,공간: 30,경계 유형: 솔리드,경계 너비: 2,경계 색상: 검정

다음 GIF 애니메이션을 살펴보면 이러한 모든 속성을 elementor 요소 내에 적용하는 방법을 이해할 수 있습니다. 

고급 탭을 사용하여 각 요소에 z-index=1 을 넣습니다. 각 요소를 클릭하고 고급 탭으로 이동하면 됩니다. 다음 이미지를 확인합니다. 

(이것을 놓치면 이동 배경 이미지 CSS 코드를 추가한 후 요소 콘텐츠를 편집하는 데 문제가 발생합니다. 여기에 z-index를 넣지 않으면 Elementor Navigator 시스템을 사용하여 콘텐츠를 편집해야 합니다.)

이제 스페이서 2 개를 추가합니다. 하나는 타이틀의 맨 위에 있고 다른 하나는 소셜 미디어 아이콘의 맨 아래에 있습니다. 

위쪽 스페이서에 “BG”를 ID 로 넣습니다. 그리고 아래쪽 스페이서에 “오버레이”를 ID 로 넣습니다. 

상단 스페이서에 BG ID 추가

하단 스페이서에 오버레이 ID 추가하기

“를 추가합니다HTML소셜 미디어 아이콘 아래 또는 두 번째 스페이서 상단에 있는 ” 요소입니다. 

BG 이미지 및 오버레이 이미지 링크 변경

Moving BG 이미지 애니메이션 에셋에 대해 기억하십니까? 이제 웹 사이트에 업로드 할 시간입니다. 배경 이미지,PNG 오버레이 및 SVG 오버레이 이미지를 업로드하십시오. 그런 다음이 3 개의 링크를 복사하고 코드 편집기 또는 메모장에 나열하십시오. 

코드 편집기에서 다음 코드를 복사하십시오. 그리고 배경 이미지 링크,PNG 및 SVG 이미지 오버레이 링크를 변경하십시오. 어떤 링크를 변경해야하는지 쉽게 찾을 수있는 두 개의 스크린 샷을 추가했습니다. 

각 이미지를 클릭하면 고해상도 버전을 볼 수 있습니다. 

배경 이미지 URL 변경

오버레이 이미지 URL 변경

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

이제 편집 된 코드를 Bg 및 오버레이 이미지로 복사하십시오. 그런 다음 HTML 요소에 붙여 넣으십시오. 결과를 즉시 볼 수 있습니다. CSS 로 작업하는 방법을 알고 있다면 애니메이션도 사용자 정의 할 수 있습니다.

제가 보여드린 것과 같은 정확한 모습을 보시려면 텍스트 색상과 소셜 미디어 색상을 흰색으로 바꿔보겠습니다.

즉,elementor 페이지 빌더 플러그인을 사용하여 이동 배경 이미지 애니메이션을 만드는 것입니다. 당신은 우리의 사용하여 콘텐츠를 스타일 수 있습니다 마스터 애드온의 플러그인 너무. 이것은 당신의 페이지에 대한 배경이 고정 될 것입니다. 당신이 섹션에 대한 이동 배경을 설정하려면 다음 그냥 “로 위치를 변경절대“. 

어떤 문제에 직면 한 경우 여기에 댓글을 주시기 바랍니다. 나는 당신의 이동 BG 이미지 애니메이션을 사용자 정의하도록 안내 할 것입니다.

자주 묻는 질문