텍스트 대문자는 스크롤하는 텍스트 상자를 제공합니다. 사이트 웹 유용한 발췌문을 통해 독자의 참여를 유도합니다. 내용. 티커(또는 뉴스 티커)라고도 하며 페이지 상단이나 하단에 꾸준한 뉴스 업데이트 스트림을 표시하는 데 자주 사용됩니다. . 일반적으로 스크롤 애니메이션은 한 줄의 내용 정보가 반복적으로 표시되도록 루프에서. 불행히도, <marquee>html 태그는 더 이상 사용되지 않으므로 요즘에는 선택 윤곽을 만들기 위해 CSS와 JavaScript에 의존합니다. 그러나 Divi를 사용하면 사용자 지정 코드에 대한 걱정없이 간단한 선택 사각형을 만들 수 있습니다.

이 튜토리얼에서는 Divi로 간단한 선택 텍스트를 만드는 것이 얼마나 쉬운 지 설명합니다. 마우스 오버시 스크롤 텍스트 애니메이션을 일시 중지하는 방법과 큰 스크롤 텍스트를 헤더의 고유 한 디자인 요소로 추가하는 방법도 알아 봅니다.

시작하자.

측량

시작하려면 무엇이 필요합니까?

시작하려면 다음이 필요합니다.

1. Le 디비 테마 설치 및 활성
2. 프론트 엔드 (시각적 생성자)를 처음부터 새로 작성하기 위해 작성된 새 페이지

그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.

임신의 시작

이 첫 번째 예제에서는 한 줄의 텍스트에 대해 간단한 텍스트 사각형을 만듭니다. 이를 위해 오버 플로우를 숨긴 행에 최대 너비를 제공합니다. 다음으로, 반복 슬라이드 애니메이션을 텍스트 줄이 포함 된 텍스트 모듈에 추가하여 직사각형처럼 반복적으로 줄로 미끄러지도록합니다.

방법은 다음과 같습니다.

열의 행이있는 일반 섹션을 작성하여 시작하십시오.

그런 다음 모듈을 추가하기 전에 다음과 같이 고정 너비, 섀도우 상자 및 반경으로 행을 업데이트합니다.

• 최대 너비 : 200px
• 실내 장식품 : 상단에 10px, 하단에 10px
• 둥근 모서리 : 10px
• Box Shadow : 스크린 샷 참조
• 수평 오버플로 : 숨겨진
• 수직 오버플로 : 숨겨진

텍스트 모듈 추가

줄이 완성되면 줄에 새 텍스트 모듈을 추가하십시오.

그런 다음 업데이트 내용 한 줄의 텍스트로 본문을 구성합니다. 지금은 텍스트 줄이 다른 줄로 분할되지 않는지 확인하세요.

• 본문 : "이 문장입니다"

텍스트 모듈 디자인

다음과 같이 텍스트 모듈 디자인 매개 변수를 업데이트하십시오.

• 여백 : 왼쪽에 -100 %, 오른쪽에 100 %

이렇게하면 텍스트 모듈이 줄의 왼쪽 밖에 배치됩니다. 선의 숨겨진 가시성이 숨겨져 있으므로 애니메이션을 추가하여 표시 할 때까지 모듈이 숨겨집니다.

• 애니메이션 스타일 : 슬라이드
• 애니메이션 방향 : 오른쪽
• 애니메이션 기간 : 5000ms
• 애니메이션 강도 : 100 %
• 불투명도 시작 애니메이션 : 100 %
• 속도 곡선의 애니메이션 : 선형
• 애니메이션 반복 : 루프

결과

결과를 지금 보자.

더 긴 텍스트 줄 만들기

위의 단순 선택 텍스트 디자인에서는 텍스트 줄의 너비를 줄과 같은 너비로 제한했습니다. 그러나 동일한 너비로 더 긴 텍스트 줄을 만들려면 설정을 약간 조정해야합니다.

먼저 텍스트 모듈에서 텍스트 본문을 다음으로 바꿉니다.

이것은 링크 가있는 단계입니다.

가장 긴 텍스트 줄에 맞게 더 많은 너비와 여백 추가

아시다시피 텍스트는 한 줄이 아닌 세 줄로 나뉩니다.

따라서 애니메이션의 여백과 강도를 조정해야합니다.

• 너비 : 207 %
• 여백 : 왼쪽에 -207 %, 오른쪽에 207 %
• 애니메이션 강도 : 75 %

여기서 트릭은 너비를 늘리고 여백 값을 업데이트하여 한 줄의 텍스트에 충분한 공간 만 남도록하는 것입니다. 그런 다음 루핑 애니메이션 사이에 큰 끊김이 없도록 애니메이션의 강도를 조정합니다.

결과

최종 결과는 다음과 같습니다.

마우스 오버시 선택 텍스트 애니메이션 일시 중지

이 선택 윤곽 선택에는 링크가 포함되어 있으므로 사용자가 이동 중에 링크를 클릭하기가 어렵습니다. 그러나 마우스 오버시 애니메이션을 일시 중지하는 작은 css 스 니펫을 텍스트 모듈에 추가 할 수 있습니다.

마우스 오버시 애니메이션을 일시 중지하는 CSS 스 니펫 추가

CSS 스 니펫을 추가하려면 텍스트 모듈 설정을 열고 다음 사용자 정의 CSS 코드를 기본 요소에 추가하십시오. 호버 탭 아래 :

애니메이션 플레이 상태 : 일시 정지;

최종 결과

이제 최종 결과를 확인하십시오. 커서를 텍스트 위로 가져 가면 텍스트 애니메이션이 중지되어 사용자가 링크를 클릭 할 수 있습니다.

이것이이 튜토리얼의 전부입니다. Divi에 스크롤 텍스트를 추가하는 방법을 배우 셨기를 바랍니다.