스토리텔링의 기술은 호모 사피엔스가 말하기 훨씬 전에 시작되었을 수 있습니다. 우리와 함께 발전하고 사용 가능한 도구에 적응합니다. 한 세대에서 다음 세대로 전해 내려오던 이야기는 손으로 쓴 책에서 대량 인쇄, 디지털 워드 프로세싱, 그리고 최근에는 인터넷에 이르기까지 문자 그대로의 진화를 그대로 받아들였습니다. 인간 진화의 관점에서 볼 때 오늘날 우리가 가지고 있는 모든 사용 가능한 기술의 잠재력을 최대한 활용하지 못한 것처럼 느껴집니다. 비디오는 이미 가상 세계 지배 캠페인을 시작했지만 웹 콘텐츠의 대부분은 여전히 텍스트로 되어 있습니다.
최신 웹 콘텐츠는 양방향이어야 하며 좋은 일반 텍스트와 함께 다양한 미디어를 통합해야 합니다. 일부 도구는 스토리텔링을 몇 단계 끌어올리는 데 도움이 될 수 있습니다. WordPress 사용자라면 Animate It! 콘텐츠에 멋진 CSS3 애니메이션을 추가하는 플러그인입니다.
가능성은 무엇입니까?
CSS3는 HTML5와 함께 현대 웹 디자인과 관련된 약어입니다. 간단히 말해서 CSS는 레이아웃, 위치, 글꼴, 색상 등과 같은 웹 페이지의 모양을 사용자가 제어할 수 있도록 하는 웹 구성 요소입니다. 최신 버전인 CSS3는 사용자가 다음을 사용하여 이미지와 애니메이션을 만들 수 있을 만큼 충분히 똑똑합니다. 코드.
운 좋게도 WordPress 사이트에서 CSS3를 활용하기 위해 코더일 필요는 없습니다. 애니메이트 잇! 플러그인을 사용하면 편집기에서 버튼을 클릭하여 게시물, 위젯 및 페이지에 CSS3 애니메이션을 적용할 수 있습니다. 게다가 사용자는 트리거를 제어할 수 있습니다. 예를 들어 스크롤, 클릭 및 호버에 애니메이션을 적용하고 개별 애니메이션 블록에 다른 스크롤 오프셋을 추가할 수 있습니다. 플러그인에는 다음과 같은 수많은 기능도 있습니다.
- 50개 이상의 입장, 퇴장 및 주의 집중 애니메이션
- 멋진 애니메이션 시퀀스를 생성하기 위해 애니메이션에서 지연 기능 및 지속 시간 제어 제공
- 사용자가 애니메이션을 무제한 또는 고정 횟수 적용할 수 있도록 허용
- 개별 애니메이션 블록에 맞춤 CSS 클래스를 추가하는 옵션
- 스마트폰 및 태블릿에서 애니메이션 활성화 또는 비활성화 옵션
Animate It으로 무엇을 할 수 있습니까? 플러그인? 원하는 경우 기사에 간단한 상호 작용을 추가하고, 매력적인 판매 페이지를 만들고, 소설의 감정을 심화하거나, 강력한 비즈니스 프레젠테이션을 만들 수도 있습니다. 방문자에게 무제한 애니메이션을 제공하는 것은 충성도 높은 독자를 확보하는 가장 좋은 방법이 아니므로 너무 과도하게 사용하지 않도록 하십시오.
Animate It 시작하기!
플러그인을 설치하고 활성화한 후 "WordPress의 편집기"에서 애니메이션을 추가하는 버튼을 찾을 수 있습니다. 이 버튼은 시각 모드에서만 표시되지만 명령을 배운 경우 일반 텍스트 모드에서 코드를 삽입할 수 있습니다(자세한 내용은 나중에 설명).
버튼을 누르면 옵션 창이 나타납니다. 애니메이션을 사용자 정의할 수 있는 세 개의 탭이 있습니다. 첫 번째 탭은 "입력"입니다. 특정 조건에서 화면에 들어갈 애니메이션을 추가하는 곳입니다. 4개의 드롭다운 옵션이 애니메이션 효과를 조정하는 데 도움이 됩니다.
- 애니메이션 원하는 애니메이션을 선택할 수 있는 곳입니다.
- 지연 애니메이션이 시작되기 전에 시간을 조정하는 데 도움이 됩니다.
- 기간 애니메이션이 처음부터 끝까지 재생되는 시간에 대한 것입니다. 숫자가 클수록 애니메이션이 느려집니다.
- 타이밍 한 번에 재생할 애니메이션의 비율입니다. 예를 들어 'easeIn' 효과는 애니메이션을 처음에는 느리게 재생하고 끝으로 갈수록 더 빠르게 재생합니다.
"Animate It!"을 사용하여 재생하여 효과 조합을 확인할 수 있습니다. 단추. 결과가 마음에 들면 '삽입' 버튼을 눌러 콘텐츠에 사용할 수 있습니다.
'종료' 탭은 항목과 다소 비슷하지만 화면을 떠날 애니메이션을 추가합니다. 두 가지를 결합하여 화면에 나타났다가 사라지는 개체를 추가할 수 있습니다.
'옵션' 탭에서는 애니메이션의 일반 설정을 제어할 수 있습니다. 여기에서 애니메이션을 루프 또는 한 번만 재생하도록 설정하고, 요소를 최종 상태로 유지하고, 사용자 정의 CSS 코드를 추가하고, 애니메이션을 시작할 트리거를 설정할 수 있습니다. 특히 트리거(예:'애니메이션 켜기' 설정)에 대해 스크롤을 선택할 수 있으며 해당 영역이 화면에 이미 표시되어 있는 경우에만 애니메이션이 시작됩니다.
콘텐츠 추가
'삽입' 버튼을 누르면 콘텐츠 영역에 몇 줄의 단축 코드가 추가된 것을 볼 수 있습니다. 이 단축 코드는 애니메이션을 제어하는 것입니다. 그리고 값이 있는 코드일 뿐이므로 코드에 능숙하고 원하는 경우 수동으로 코드를 추가할 수 있습니다. 하지만 다른 사용자는 Animate It! 버튼.
또한 '이 영역에 콘텐츠를 추가하세요.라는 텍스트 줄이 표시됩니다. ” 여기에서 애니메이션을 적용할 항목을 추가할 수 있습니다. 텍스트, 이미지, 아이콘, 로고, 오디오, 비디오 또는 기타 단축 코드가 될 수 있습니다. Typed Js 플러그인을 사용하여 생성된 typed-effect shortcode를 추가해 보았는데 결과가 좋습니다.
Animate It! 사용에 대해 말할 수 있는 것이 있다면! 플러그인, 그것은 "실험!"이 될 것입니다. 그것을 가지고 놀고 원하는 결과를 얻으려면 다른 조합을 시도하십시오. 재미있다. 그리고 1분도 안되어 나온 결과입니다. 애니메이트 잇을 결합했습니다! Typed Js 플러그인이 있는 플러그인.
웹 콘텐츠에 대화형 요소를 추가해야 할 때라고 생각하십니까? 플러그인을 사용해 볼 계획입니까? 애니메이션에 다른 플러그인을 사용합니까? 아래 댓글로 공유해주세요.