올해는 야치가 LIG 블로그에서 소개한 기사를 정리해 보았다.

아무래도, 프런트 엔드 엔지니어의 하야치입니다✌(´ʘ‿ʘ｀)✌
LIG Advent Calendar 10일째 기사를 담당합니다!

이번에는 하야치가 올해 LIG 블로그에 게시 한 기사를 소개하려고합니다.

JavaScript 미사용! SVG를 사용하여 CSS에서 확인란을 만드는 방법

checkbox의 체크를 필기로 쓰는 것과 같은 방법을 소개했습니다.
체크 이외에 채우고, 밑줄 방식의 디자인도 응용 가능합니다.

Snap.svg에서 svg의 경로를 움직인 애니메이션을 만들어 보았습니다.

Snap.svg 처음으로 SVG의 모핑 애니메이션을 만졌습니다.


언제나 사용하고 있는 「hayachi.svg」의 패스의 패턴을 준비해 배열로 돌리는 것으로 간단하게 헛되이 하는 것 같은 애니메이션을 만들 수 있었습니다.

CHARTIST.JS와 ScrollMagic을 사용하여 스크롤에 도달하면 애니메이션을 구현했습니다.

그래프를 SVG로 생성해 주는 CHARTIST.JS 과 스크롤의 애니메이션의 제어로 ScrollMagic 의 두 개의 라이브러리를 사용해, 애니메이션의 구현을 했습니다.

여러 줄의 문장에 「…」를 붙이는 css를 Mixin 관리해 보았다!

여러 줄의 문장에 「…

Mixin

@mixin abridgement($line-height,$font-size,$lines,$color){
  line-height: $line-height;
  height: $font-size*$line-height*$lines+px;
  overflow: hidden;
  position: relative;
  word-break: break-all;
  text-align:justify;
  &:before,
  &:after{
    position: absolute;
  }
  &:before{
    content: '...';
    background: $color;
    right: 0px;
    text-align: center;
    width:1em !important;
    top:$font-size*$line-height*($lines - 1) +px;
  }
  &:after {
    content: '';
    height: 100%;
    width: 100%;
    background: 0px;
    z-index: 2;
    background: $color;
  }
}

전화하는 방법

@include abridgement(行間,文字数,表示したい行数,#背景色);

행간, 문자수, 표시하고 싶은 문자, 배경색을 커스터마이즈 할 수 있도록 Mixin을 제작했습니다.
다만, 배경이 투과하고 있는 것이나, 배경에 모양이 있는 것에 관해서는 대응할 수 없기 때문에 주의를!

FullPage.js 플러그인은 굉장해요, 응용적인 부분을 소개!

기본적인 도입 부분의 소개의 기사가 많은 fullPage.js를 독자적인 함수나 이벤트를 사용해 응용적으로 소개하고 있습니다.

화살표 버튼 포함

$.fn.fullpage.moveTo()를 사용하여 화살표에 이벤트를 착용하고 있습니다.

모든 페이지 수와 현재 페이지 수를 표시

스크롤이 종료한 뒤, 섹션이 로드되었을 때에, 콜백이 발생하는 afterLoad (anchorLink, index)로 도달했을 때의 페이지의 숫자를 표시시키고 있습니다.
섹션에서 멀리 새로운 섹션으로 마이그레이션 도달시에 시작되는 onLeave (index, nextIndex, direction)를 사용하여 현재 페이지의 숫자를 삭제합니다.

테이블 태그를 반응형 사이트에서도 보기 쉽게 하는 방법·4선

테이블 원 소스로 스마트 폰 확인했을 때에 어떻게 표시시키는지 소개했습니다.

파라파라 만화 스타일의 jQuery 플러그인을 소개합니다.

파라파라 만화풍은 스프라이트 이미지를 css로 컷 이송 재생은 할 수 있습니다만, 이쪽의 라이브러리는 컷 이송 재생 뿐만이 아니라 드랙의 대응도 가능합니다.

결론

기본적으로 SVG의 소개가 주로, 코딩의 소기술이 조금 이라는 느낌으로 소개해 왔습니다.
내년의 리그 블로그에서의 방향성으로서는 계속해서 SVG는 해 갑니다만 좀 더 실장 이외의 곳의 면도 주목해 가면 좋겠다고 생각하고 있는 곳입니다!
앞으로도 하야치를 잘 부탁드립니다 ✌(´ʘ‿ʘ｀)✌