배경

LP 구현의 프런트 엔드 담당

Ruby on Rails View에서 프런트 엔드 임베디드 전제

디자인 캠프에 애니메이션, 인터랙션의 사양은 없었지만, 요즘 전혀 움직이지 않는 LP가 적다고 생각했다

디자이너에게 인터랙션 생각을 받는 것도 확인 플로우 힘들었고, Rails에 플러그인 짜넣는 검증 리스크 등 여러가지 있어, 1회 포기했다

포기한 후 경기 시작

변경에 강한 CSS 애니메이션 주축에 스크롤 인터랙션 만들면 좋겠다고 생각했다

고뇨고뇨하면 의외로 할 수 있었다

구현 내용

CSS 애니메이션 구현

.anm_mod 기본값 = 아래에서 원래 위치로 돌아가면서 페이드 인. 속도 일반

&.left, &.right 좌우에서 원래 위치로 돌아가면서 페이드 인

&.delay, &.fast 페이드 인 속도 느림, 일찍

위의 두 점 설정으로 페이드 인 방향 (3 방향)과 속도 (3 단계)를 조정할 수 있습니다

수치를 바꾸면 임의의 움직임도 가능하므로, 자유롭게 변경해 보세요

.animation {
 ...
 .anm_mod {
  // 一度透明にしておく
  opacity: 0;
  // デフォルトでは下方向（から上に向かう）に設定
  transform: translate3d(0, 100%, 0);
  // デフォルトでは1秒に設定
  transition: all 1s ease;
  ...
  &.left {
   transform: translate3d(-100%, 0, 0);
  }
  &.right {
   transform: translate3d(100%, 0, 0);
  }
  &.delay {
   transition: all 2s ease;
  }
  &.fast {
   transition: all 0.8 ease;
  }
 }
}

.animation .anm_mod.active {
  // jsでスクロール値に来たら　activeクラスが付与されるので、透明を解除しながらUIパーツが元の位置に戻る作用をする
 opacity: 1;
 transform: translate3d(0, 0, 0);
}

javaScript

CSS에서만 가고 싶었지만 스크롤 값을 얻는 것만이 CSS에서는 불가능했기 때문에 스크롤 값을 얻는 용도로만 좁혀 일부 jQuery를 사용했습니다

.animationブロック의 .anm_modモジュール 대상

모듈의 위치와 스크롤 값, 화면 높이를 가져옵니다

.anm_mod 모듈이 스크롤 위치까지 오면 active 클래스 부여

다시 TOP까지 돌아가면 active를 해제하는 사양

js에서는 스크롤에 의한 active 클래스의 유무만을 작용시킨다

페이드이 애니메이션 자체는 CSS로 한다 < 이것을 js로 처리하는 플러그인은 많습니다만, CSS로 대체 가능하므로, 이번 여기가 제일의 포인트가 됩니다.

$(window).scroll(function() {
 　　// .animation 配下の　.anm_modを対象に見る
 $(".animation .anm_mod").each(function() {
  // スクロール中、各UIパーツ　.anm_modがブラウザ画面内に入ったら activeクラスが付与される
  const position = $(this).offset().top;
  const scroll = $(window).scrollTop();
  const windowHeight = $(window).height();
  if (scroll > position - windowHeight) {
   $(this).addClass("active");
  }
  // スクロール中、トップ画面付近まで戻ったら activeクラスを解除 ＝ 何度でもスクロールアニメが表現可能。一度しかアニメーションしたく無ければここを削除してください。
  if (scroll < 100) {
   $(this).removeClass("active");
  }
 });
});

HTML 구현 예

 <div class="animation">
  <div class="anm_mod left delay">
   anm_mod left delay
  </div>
  <div class="anm_mod right fast">
   anm_mod right fast
  </div>
 </div>

구현 결과

CodePen

See the Pen Scroll Fadein CSS Animation by Asagiri (@agdg) on CodePen .

Reference

이 문제에 관하여(거의 CSS만으로, LP로 자주 있는 상하 좌우로부터 페이드 인하는 녀석을 실장한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/AsagiriDesign/items/0ec5623755c1d633bc85

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

거의 CSS만으로, LP로 자주 있는 상하 좌우로부터 페이드 인하는 녀석을 실장한다

배경