コンポーネント集

スクロールアニメーション20 

<div class="scroll-anim-20" id="js-scroll-anim-20">
    <div class="scroll-anim-20__item"><svg class="scroll-anim-20__img" viewBox="0 0 300 270">
            <path class="scroll-anim-20__img-path" id="path-01" d="M79.289,79.289c39.027,-39.026 102.395,-39.026 141.422,0c39.026,39.027 39.026,102.395 0,141.422c-39.027,39.026 -102.395,39.026 -141.422,0c-39.026,-39.027 -39.026,-102.395 0,-141.422Z"></path>
            <g class="scroll-anim-20__img-icon">
                <rect height="72.5" width="19.1" x="121.7" y="122.1"></rect>
                <path d="M 178.8 133.5 c -1 1.4 -1.6 3 -1.6 4.7 c 0 2.1 0.8 4.1 2.3 5.6 c 1.5 1.5 3.5 2.3 5.6 2.3 c 2.1 0 4.1 -0.8 5.6 -2.3 c 2.8 -2.8 3.1 -7.2 0.7 -10.3 l -12.6 0 Z"></path>
                <path d="M 175.1 163.3 l 0 31.3 l 19.1 0 l 0 -31 c -2.9 1 -6 1.6 -9.1 1.6 c -3.5 0 -6.9 -0.7 -10 -1.9 Z"></path>
                <path d="M 158.2 138.3 c 0 -7.2 2.8 -14 7.9 -19 c 0.5 -0.5 0.9 -0.9 1.4 -1.3 l 0 -22.5 l -19.1 0 l 0 99.3 l 19.1 0 l 0 -36 c -0.5 -0.4 -1 -0.8 -1.4 -1.3 c -5.1 -5.1 -7.9 -11.9 -7.9 -19.1 Z"></path>
                <rect height="38.2" width="19.1" x="95" y="156.4"></rect>
                <path d="M 213.3 159.8 l -10.3 -10 c 2.2 -3.4 3.4 -7.4 3.4 -11.5 c 0 -5.7 -2.2 -11 -6.2 -15 c -4 -4 -9.3 -6.2 -15 -6.2 c -5.7 0 -11 2.2 -15 6.2 c -4 4 -6.2 9.3 -6.2 15 c 0 5.7 2.2 11 6.2 15 c 4 4 9.3 6.2 15 6.2 c 4.1 0 8.1 -1.2 11.5 -3.4 l 10 10.3 c 1.9 2.3 4.6 2.4 6.8 0.3 c 2.1 -2.1 2.1 -5 -0.2 -6.8 Z m -28.1 -10.1 c -3 0 -5.9 -1.2 -8.1 -3.3 c -2.1 -2.1 -3.3 -5 -3.3 -8 c 0 -3 1.2 -5.9 3.3 -8 c 2.2 -2.1 5 -3.3 8.1 -3.3 c 3 0 5.9 1.2 8 3.3 c 4.4 4.4 4.4 11.7 0 16.1 c -2.1 2.1 -5 3.3 -8 3.3 Z"></path>
            </g><text>
                <textPath class="scroll-anim-20__heading" href="#path-01">HEADING 01</textPath>
            </text>
        </svg>
        <p class="scroll-anim-20__text"><span>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></p>
    </div>
    <div class="scroll-anim-20__item"><svg class="scroll-anim-20__img" viewBox="0 0 300 270">
            <path class="scroll-anim-20__img-path" id="path-02" d="M79.289,79.289c39.027,-39.026 102.395,-39.026 141.422,0c39.026,39.027 39.026,102.395 0,141.422c-39.027,39.026 -102.395,39.026 -141.422,0c-39.026,-39.027 -39.026,-102.395 0,-141.422Z"></path>
            <g class="scroll-anim-20__img-icon">
                <path d="M 198.8 121.7 l -4.1 0 l 0 20 l 4.1 0 c 2.3 0 4.1 -1.9 4.1 -4.1 l 0 -11.7 c 0 -2.3 -1.9 -4.1 -4.1 -4.1 Z"></path>
                <path d="M 198.8 169.7 l -4.1 0 l 0 20 l 4.1 0 c 2.3 0 4.1 -1.9 4.1 -4.1 l 0 -11.7 c 0 -2.3 -1.9 -4.1 -4.1 -4.1 Z"></path>
                <path d="M 198.8 145.7 l -4.1 0 l 0 20 l 4.1 0 c 2.3 0 4.1 -1.9 4.1 -4.1 l 0 -11.7 c 0 -2.3 -1.9 -4.1 -4.1 -4.1 Z"></path>
                <path d="M 179 113.9 l -6.2 0 l 0 33.7 c 0 1.1 -0.6 2.1 -1.6 2.5 c -1 0.5 -2.1 0.4 -3 -0.3 l -8.4 -6.5 l -8.4 6.5 c -0.9 0.7 -2 0.8 -3 0.3 c -1 -0.5 -1.6 -1.5 -1.6 -2.5 l 0 -33.7 l -26.3 0 c -1.8 0 -3.3 -0.7 -4.5 -1.9 c -1.2 -1.2 -1.9 -2.7 -1.9 -4.5 c 0 -1.8 0.7 -3.3 1.9 -4.5 c 1.2 -1.2 2.7 -1.9 4.5 -1.9 l 57.2 0 c 2 0 3.6 -1.6 3.6 -3.6 c 0 -2 -1.6 -3.6 -3.6 -3.6 l -57.2 0 c -3.7 0 -7.1 1.5 -9.6 4 c -2.5 2.4 -4 5.9 -4 9.6 l 0 87.6 c 0 4.9 4 8.9 8.9 8.9 l 63.1 0 c 6.7 0 12.2 -5.5 12.2 -12.2 l 0 -65.6 c 0 -6.7 -5.5 -12.2 -12.2 -12.2 Z"></path>
            </g><text>
                <textPath class="scroll-anim-20__heading" href="#path-02">HEADING 02</textPath>
            </text>
        </svg>
        <p class="scroll-anim-20__text"><span>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></p>
    </div>
    <div class="scroll-anim-20__item"><svg class="scroll-anim-20__img" viewBox="0 0 300 270">
            <path class="scroll-anim-20__img-path" id="path-03" d="M79.289,79.289c39.027,-39.026 102.395,-39.026 141.422,0c39.026,39.027 39.026,102.395 0,141.422c-39.027,39.026 -102.395,39.026 -141.422,0c-39.026,-39.027 -39.026,-102.395 0,-141.422Z"></path>
            <g class="scroll-anim-20__img-icon">
                <path d="M 196.2 190.7 c -0.5 -1.8 -1.1 -3.3 -2 -4.7 c -1.4 -2.5 -3.3 -4.4 -5.4 -5.9 c -1.6 -1.1 -3.3 -2.1 -5 -2.9 c -2.6 -1.2 -5.2 -2.1 -7.6 -3 c -2.4 -0.9 -4.6 -1.8 -6.3 -2.8 c -0.6 -0.4 -1.2 -0.8 -1.7 -1.2 c -0.7 -0.6 -1.3 -1.3 -1.7 -2 c -0.4 -0.7 -0.7 -1.5 -0.8 -2.6 c -0.1 -0.7 -0.1 -1.4 -0.1 -2.1 c 0 -1.9 0.3 -3.6 0.6 -5.3 c 1.1 -1.2 2.1 -2.7 3 -4.4 c 0.9 -1.7 1.8 -3.8 2.7 -6.2 c 0.6 -0.3 1.1 -0.6 1.7 -0.9 c 1.3 -0.9 2.5 -2.1 3.5 -3.7 c 1 -1.6 1.8 -3.6 2.4 -6 c 0.2 -0.7 0.2 -1.4 0.2 -2 c 0 -1.4 -0.3 -2.7 -0.9 -3.9 c -0.4 -0.8 -0.9 -1.6 -1.4 -2.3 c 0.3 -1.1 0.6 -2.5 1 -4.2 c 0.4 -2.3 0.8 -5.1 0.8 -8.1 c 0 -1.9 -0.1 -3.9 -0.5 -5.8 c -0.3 -1.5 -0.7 -2.9 -1.3 -4.3 c -0.9 -2.1 -2.2 -4 -4 -5.6 c -1.7 -1.5 -3.8 -2.7 -6.4 -3.5 c -1.1 -1.3 -2.2 -2.4 -3.4 -3.3 c -1.9 -1.5 -4 -2.6 -6.1 -3.2 c -2.1 -0.6 -4.2 -0.9 -6.3 -0.9 c -1.1 0 -2.2 0.1 -3.3 0.2 c -1 0.1 -1.9 0.2 -2.7 0.3 c -1.2 0.2 -2.1 0.5 -3 0.8 c -0.9 0.3 -1.8 0.7 -3 1.1 c -0.4 0.2 -1 0.4 -1.7 0.8 c -1.2 0.6 -2.8 1.5 -4.5 2.8 c -2.5 1.9 -5.3 4.6 -7.5 8.2 c -1.1 1.8 -2 3.8 -2.7 6.1 c -0.7 2.3 -1 4.8 -1 7.6 c 0 1.7 0.2 3.5 0.5 5.4 c 0 0.1 0 0.3 0 0.4 c 0 0.2 0 0.5 0.1 0.7 c 0 0.4 0.1 0.8 0.1 1.1 c 0 0.2 0 0.3 0 0.4 c 0 0.1 0 0.1 0 0.1 l 0 0.3 l 0.5 2.1 c -0.7 0.7 -1.2 1.5 -1.7 2.4 c -0.6 1.3 -1 2.7 -1 4.1 c 0 0.7 0.1 1.3 0.2 2 c 0.4 1.6 0.9 3.1 1.4 4.3 c 0.9 1.9 2 3.3 3.2 4.4 c 0.9 0.8 2 1.5 3 1.9 c 0.9 2.4 1.8 4.5 2.7 6.2 c 0.9 1.7 1.9 3.2 3 4.4 c 0.4 1.7 0.6 3.4 0.6 5.3 c 0 0.7 0 1.3 -0.1 2.1 c -0.1 0.7 -0.2 1.3 -0.5 1.9 c -0.3 0.8 -0.8 1.5 -1.5 2.2 c -0.7 0.7 -1.5 1.3 -2.5 1.8 c -1 0.6 -2.2 1.1 -3.5 1.6 c -2.2 0.9 -4.8 1.8 -7.4 2.8 c -1.9 0.8 -3.9 1.7 -5.8 2.8 c -1.4 0.8 -2.8 1.8 -4 2.9 c -1.9 1.7 -3.5 3.8 -4.6 6.5 c -1.1 2.6 -1.7 5.7 -1.7 9.4 c 0 0.5 0.1 1 0.3 1.5 c 0.2 0.4 0.4 0.8 0.7 1.2 c 0.5 0.7 1.2 1.3 2 1.9 c 1.4 1 3.3 2 5.7 2.9 c 3.7 1.4 8.6 2.6 14.9 3.5 c 6.3 0.9 14.1 1.5 23.5 1.5 c 8.1 0 15 -0.4 20.8 -1.1 c 4.4 -0.5 8.1 -1.2 11.3 -2 c 2.4 -0.6 4.5 -1.2 6.2 -1.9 c 1.3 -0.5 2.5 -1 3.5 -1.6 c 0.8 -0.4 1.4 -0.8 2 -1.3 c 0.9 -0.6 1.6 -1.3 2.2 -2.1 c 0.3 -0.4 0.5 -0.8 0.7 -1.2 c 0.2 -0.4 0.3 -0.9 0.3 -1.4 c 0 -2.5 -0.3 -4.8 -0.8 -6.8 Z m -50.3 1.8 l -13.8 -17.7 c 0.7 -0.4 1.4 -0.9 2 -1.4 c 0.7 -0.6 1.3 -1.2 1.9 -1.9 l 10.1 4.7 l -2.1 3.6 l 3.3 3.5 l -1.3 9.2 Z m -8.5 -23.3 c 0.4 -0.9 0.7 -2 0.8 -3.1 c 0.1 -0.9 0.1 -1.7 0.1 -2.5 c 0 -2.6 -0.4 -4.7 -0.8 -6.7 l -0.1 -0.5 l -0.4 -0.4 c -0.9 -1 -1.9 -2.3 -2.8 -4 c -0.9 -1.7 -1.8 -3.8 -2.8 -6.5 l -0.3 -0.9 l -0.9 -0.3 c -0.6 -0.2 -1.2 -0.5 -1.7 -0.9 c -0.8 -0.6 -1.6 -1.3 -2.4 -2.5 c -0.7 -1.2 -1.4 -2.7 -1.9 -4.8 c -0.1 -0.4 -0.1 -0.8 -0.1 -1.2 c 0 -0.8 0.2 -1.6 0.6 -2.4 c 0.3 -0.6 0.8 -1.2 1.3 -1.8 c 0.9 1.4 1.6 2.4 1.9 2.7 c 0.9 0.9 0.6 0.6 0.9 0.2 c 0 0 1 -1.4 6.3 -11.7 c 10.6 2.4 29.1 -13.5 29.1 -13.5 c 0 0 0.2 5.1 3.8 9.8 c 3.3 4.5 5.3 14.9 5.3 14.9 c 0 0 0.5 -0.9 1.1 -2 c 0.4 0.5 0.7 1 1 1.5 c 0.3 0.7 0.5 1.5 0.5 2.2 c 0 0.4 0 0.8 -0.1 1.2 c -0.3 1.4 -0.7 2.6 -1.2 3.5 c -0.7 1.4 -1.4 2.4 -2.3 3.1 c -0.8 0.7 -1.7 1.2 -2.6 1.5 l -0.9 0.3 l -0.3 0.9 c -0.9 2.7 -1.9 4.8 -2.8 6.5 c -0.9 1.7 -1.8 3 -2.8 4 l -0.4 0.4 l -0.1 0.5 c -0.4 1.9 -0.8 4.1 -0.8 6.7 c 0 0.8 0 1.6 0.1 2.5 c 0.1 1 0.3 2 0.7 2.8 c 0 0 0 0.1 0.1 0.1 l -11.9 6.3 l -13.2 -6.1 Z m 17.6 23.9 l -1.4 -9.8 l 3.3 -3.5 l -2.2 -3.6 l 9.1 -4.8 c 0.3 0.3 0.5 0.6 0.8 0.9 c 0.9 0.9 1.9 1.7 3.1 2.4 l -12.7 18.4 Z"></path>
            </g><text>
                <textPath class="scroll-anim-20__heading" href="#path-03">HEADING 03</textPath>
            </text>
        </svg>
        <p class="scroll-anim-20__text"><span>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></p>
    </div>
</div>
 
.scroll-anim-20#js-scroll-anim-20
  .scroll-anim-20__item
    svg.scroll-anim-20__img(viewBox='0 0 300 270')
      path.scroll-anim-20__img-path#path-01(d='M79.289,79.289c39.027,-39.026 102.395,-39.026 141.422,0c39.026,39.027 39.026,102.395 0,141.422c-39.027,39.026 -102.395,39.026 -141.422,0c-39.026,-39.027 -39.026,-102.395 0,-141.422Z')
      g.scroll-anim-20__img-icon
        rect(height='72.5', width='19.1', x='121.7', y='122.1')
        path(d='M 178.8 133.5 c -1 1.4 -1.6 3 -1.6 4.7 c 0 2.1 0.8 4.1 2.3 5.6 c 1.5 1.5 3.5 2.3 5.6 2.3 c 2.1 0 4.1 -0.8 5.6 -2.3 c 2.8 -2.8 3.1 -7.2 0.7 -10.3 l -12.6 0 Z')
        path(d='M 175.1 163.3 l 0 31.3 l 19.1 0 l 0 -31 c -2.9 1 -6 1.6 -9.1 1.6 c -3.5 0 -6.9 -0.7 -10 -1.9 Z')
        path(d='M 158.2 138.3 c 0 -7.2 2.8 -14 7.9 -19 c 0.5 -0.5 0.9 -0.9 1.4 -1.3 l 0 -22.5 l -19.1 0 l 0 99.3 l 19.1 0 l 0 -36 c -0.5 -0.4 -1 -0.8 -1.4 -1.3 c -5.1 -5.1 -7.9 -11.9 -7.9 -19.1 Z')
        rect(height='38.2', width='19.1', x='95', y='156.4')
        path(d='M 213.3 159.8 l -10.3 -10 c 2.2 -3.4 3.4 -7.4 3.4 -11.5 c 0 -5.7 -2.2 -11 -6.2 -15 c -4 -4 -9.3 -6.2 -15 -6.2 c -5.7 0 -11 2.2 -15 6.2 c -4 4 -6.2 9.3 -6.2 15 c 0 5.7 2.2 11 6.2 15 c 4 4 9.3 6.2 15 6.2 c 4.1 0 8.1 -1.2 11.5 -3.4 l 10 10.3 c 1.9 2.3 4.6 2.4 6.8 0.3 c 2.1 -2.1 2.1 -5 -0.2 -6.8 Z m -28.1 -10.1 c -3 0 -5.9 -1.2 -8.1 -3.3 c -2.1 -2.1 -3.3 -5 -3.3 -8 c 0 -3 1.2 -5.9 3.3 -8 c 2.2 -2.1 5 -3.3 8.1 -3.3 c 3 0 5.9 1.2 8 3.3 c 4.4 4.4 4.4 11.7 0 16.1 c -2.1 2.1 -5 3.3 -8 3.3 Z')
      text
        textPath.scroll-anim-20__heading(href='#path-01') HEADING 01
    p.scroll-anim-20__text
      span テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
  .scroll-anim-20__item
    svg.scroll-anim-20__img(viewBox='0 0 300 270')
      path.scroll-anim-20__img-path#path-02(d='M79.289,79.289c39.027,-39.026 102.395,-39.026 141.422,0c39.026,39.027 39.026,102.395 0,141.422c-39.027,39.026 -102.395,39.026 -141.422,0c-39.026,-39.027 -39.026,-102.395 0,-141.422Z')
      g.scroll-anim-20__img-icon
        path(d='M 198.8 121.7 l -4.1 0 l 0 20 l 4.1 0 c 2.3 0 4.1 -1.9 4.1 -4.1 l 0 -11.7 c 0 -2.3 -1.9 -4.1 -4.1 -4.1 Z')
        path(d='M 198.8 169.7 l -4.1 0 l 0 20 l 4.1 0 c 2.3 0 4.1 -1.9 4.1 -4.1 l 0 -11.7 c 0 -2.3 -1.9 -4.1 -4.1 -4.1 Z')
        path(d='M 198.8 145.7 l -4.1 0 l 0 20 l 4.1 0 c 2.3 0 4.1 -1.9 4.1 -4.1 l 0 -11.7 c 0 -2.3 -1.9 -4.1 -4.1 -4.1 Z')
        path(d='M 179 113.9 l -6.2 0 l 0 33.7 c 0 1.1 -0.6 2.1 -1.6 2.5 c -1 0.5 -2.1 0.4 -3 -0.3 l -8.4 -6.5 l -8.4 6.5 c -0.9 0.7 -2 0.8 -3 0.3 c -1 -0.5 -1.6 -1.5 -1.6 -2.5 l 0 -33.7 l -26.3 0 c -1.8 0 -3.3 -0.7 -4.5 -1.9 c -1.2 -1.2 -1.9 -2.7 -1.9 -4.5 c 0 -1.8 0.7 -3.3 1.9 -4.5 c 1.2 -1.2 2.7 -1.9 4.5 -1.9 l 57.2 0 c 2 0 3.6 -1.6 3.6 -3.6 c 0 -2 -1.6 -3.6 -3.6 -3.6 l -57.2 0 c -3.7 0 -7.1 1.5 -9.6 4 c -2.5 2.4 -4 5.9 -4 9.6 l 0 87.6 c 0 4.9 4 8.9 8.9 8.9 l 63.1 0 c 6.7 0 12.2 -5.5 12.2 -12.2 l 0 -65.6 c 0 -6.7 -5.5 -12.2 -12.2 -12.2 Z')
      text
        textPath.scroll-anim-20__heading(href='#path-02') HEADING 02
    p.scroll-anim-20__text
      span テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
  .scroll-anim-20__item
    svg.scroll-anim-20__img(viewBox='0 0 300 270')
      path.scroll-anim-20__img-path#path-03(d='M79.289,79.289c39.027,-39.026 102.395,-39.026 141.422,0c39.026,39.027 39.026,102.395 0,141.422c-39.027,39.026 -102.395,39.026 -141.422,0c-39.026,-39.027 -39.026,-102.395 0,-141.422Z')
      g.scroll-anim-20__img-icon
        path(d='M 196.2 190.7 c -0.5 -1.8 -1.1 -3.3 -2 -4.7 c -1.4 -2.5 -3.3 -4.4 -5.4 -5.9 c -1.6 -1.1 -3.3 -2.1 -5 -2.9 c -2.6 -1.2 -5.2 -2.1 -7.6 -3 c -2.4 -0.9 -4.6 -1.8 -6.3 -2.8 c -0.6 -0.4 -1.2 -0.8 -1.7 -1.2 c -0.7 -0.6 -1.3 -1.3 -1.7 -2 c -0.4 -0.7 -0.7 -1.5 -0.8 -2.6 c -0.1 -0.7 -0.1 -1.4 -0.1 -2.1 c 0 -1.9 0.3 -3.6 0.6 -5.3 c 1.1 -1.2 2.1 -2.7 3 -4.4 c 0.9 -1.7 1.8 -3.8 2.7 -6.2 c 0.6 -0.3 1.1 -0.6 1.7 -0.9 c 1.3 -0.9 2.5 -2.1 3.5 -3.7 c 1 -1.6 1.8 -3.6 2.4 -6 c 0.2 -0.7 0.2 -1.4 0.2 -2 c 0 -1.4 -0.3 -2.7 -0.9 -3.9 c -0.4 -0.8 -0.9 -1.6 -1.4 -2.3 c 0.3 -1.1 0.6 -2.5 1 -4.2 c 0.4 -2.3 0.8 -5.1 0.8 -8.1 c 0 -1.9 -0.1 -3.9 -0.5 -5.8 c -0.3 -1.5 -0.7 -2.9 -1.3 -4.3 c -0.9 -2.1 -2.2 -4 -4 -5.6 c -1.7 -1.5 -3.8 -2.7 -6.4 -3.5 c -1.1 -1.3 -2.2 -2.4 -3.4 -3.3 c -1.9 -1.5 -4 -2.6 -6.1 -3.2 c -2.1 -0.6 -4.2 -0.9 -6.3 -0.9 c -1.1 0 -2.2 0.1 -3.3 0.2 c -1 0.1 -1.9 0.2 -2.7 0.3 c -1.2 0.2 -2.1 0.5 -3 0.8 c -0.9 0.3 -1.8 0.7 -3 1.1 c -0.4 0.2 -1 0.4 -1.7 0.8 c -1.2 0.6 -2.8 1.5 -4.5 2.8 c -2.5 1.9 -5.3 4.6 -7.5 8.2 c -1.1 1.8 -2 3.8 -2.7 6.1 c -0.7 2.3 -1 4.8 -1 7.6 c 0 1.7 0.2 3.5 0.5 5.4 c 0 0.1 0 0.3 0 0.4 c 0 0.2 0 0.5 0.1 0.7 c 0 0.4 0.1 0.8 0.1 1.1 c 0 0.2 0 0.3 0 0.4 c 0 0.1 0 0.1 0 0.1 l 0 0.3 l 0.5 2.1 c -0.7 0.7 -1.2 1.5 -1.7 2.4 c -0.6 1.3 -1 2.7 -1 4.1 c 0 0.7 0.1 1.3 0.2 2 c 0.4 1.6 0.9 3.1 1.4 4.3 c 0.9 1.9 2 3.3 3.2 4.4 c 0.9 0.8 2 1.5 3 1.9 c 0.9 2.4 1.8 4.5 2.7 6.2 c 0.9 1.7 1.9 3.2 3 4.4 c 0.4 1.7 0.6 3.4 0.6 5.3 c 0 0.7 0 1.3 -0.1 2.1 c -0.1 0.7 -0.2 1.3 -0.5 1.9 c -0.3 0.8 -0.8 1.5 -1.5 2.2 c -0.7 0.7 -1.5 1.3 -2.5 1.8 c -1 0.6 -2.2 1.1 -3.5 1.6 c -2.2 0.9 -4.8 1.8 -7.4 2.8 c -1.9 0.8 -3.9 1.7 -5.8 2.8 c -1.4 0.8 -2.8 1.8 -4 2.9 c -1.9 1.7 -3.5 3.8 -4.6 6.5 c -1.1 2.6 -1.7 5.7 -1.7 9.4 c 0 0.5 0.1 1 0.3 1.5 c 0.2 0.4 0.4 0.8 0.7 1.2 c 0.5 0.7 1.2 1.3 2 1.9 c 1.4 1 3.3 2 5.7 2.9 c 3.7 1.4 8.6 2.6 14.9 3.5 c 6.3 0.9 14.1 1.5 23.5 1.5 c 8.1 0 15 -0.4 20.8 -1.1 c 4.4 -0.5 8.1 -1.2 11.3 -2 c 2.4 -0.6 4.5 -1.2 6.2 -1.9 c 1.3 -0.5 2.5 -1 3.5 -1.6 c 0.8 -0.4 1.4 -0.8 2 -1.3 c 0.9 -0.6 1.6 -1.3 2.2 -2.1 c 0.3 -0.4 0.5 -0.8 0.7 -1.2 c 0.2 -0.4 0.3 -0.9 0.3 -1.4 c 0 -2.5 -0.3 -4.8 -0.8 -6.8 Z m -50.3 1.8 l -13.8 -17.7 c 0.7 -0.4 1.4 -0.9 2 -1.4 c 0.7 -0.6 1.3 -1.2 1.9 -1.9 l 10.1 4.7 l -2.1 3.6 l 3.3 3.5 l -1.3 9.2 Z m -8.5 -23.3 c 0.4 -0.9 0.7 -2 0.8 -3.1 c 0.1 -0.9 0.1 -1.7 0.1 -2.5 c 0 -2.6 -0.4 -4.7 -0.8 -6.7 l -0.1 -0.5 l -0.4 -0.4 c -0.9 -1 -1.9 -2.3 -2.8 -4 c -0.9 -1.7 -1.8 -3.8 -2.8 -6.5 l -0.3 -0.9 l -0.9 -0.3 c -0.6 -0.2 -1.2 -0.5 -1.7 -0.9 c -0.8 -0.6 -1.6 -1.3 -2.4 -2.5 c -0.7 -1.2 -1.4 -2.7 -1.9 -4.8 c -0.1 -0.4 -0.1 -0.8 -0.1 -1.2 c 0 -0.8 0.2 -1.6 0.6 -2.4 c 0.3 -0.6 0.8 -1.2 1.3 -1.8 c 0.9 1.4 1.6 2.4 1.9 2.7 c 0.9 0.9 0.6 0.6 0.9 0.2 c 0 0 1 -1.4 6.3 -11.7 c 10.6 2.4 29.1 -13.5 29.1 -13.5 c 0 0 0.2 5.1 3.8 9.8 c 3.3 4.5 5.3 14.9 5.3 14.9 c 0 0 0.5 -0.9 1.1 -2 c 0.4 0.5 0.7 1 1 1.5 c 0.3 0.7 0.5 1.5 0.5 2.2 c 0 0.4 0 0.8 -0.1 1.2 c -0.3 1.4 -0.7 2.6 -1.2 3.5 c -0.7 1.4 -1.4 2.4 -2.3 3.1 c -0.8 0.7 -1.7 1.2 -2.6 1.5 l -0.9 0.3 l -0.3 0.9 c -0.9 2.7 -1.9 4.8 -2.8 6.5 c -0.9 1.7 -1.8 3 -2.8 4 l -0.4 0.4 l -0.1 0.5 c -0.4 1.9 -0.8 4.1 -0.8 6.7 c 0 0.8 0 1.6 0.1 2.5 c 0.1 1 0.3 2 0.7 2.8 c 0 0 0 0.1 0.1 0.1 l -11.9 6.3 l -13.2 -6.1 Z m 17.6 23.9 l -1.4 -9.8 l 3.3 -3.5 l -2.2 -3.6 l 9.1 -4.8 c 0.3 0.3 0.5 0.6 0.8 0.9 c 0.9 0.9 1.9 1.7 3.1 2.4 l -12.7 18.4 Z')
      text
        textPath.scroll-anim-20__heading(href='#path-03') HEADING 03
    p.scroll-anim-20__text
      span テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
 
{
  "text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
  • Content: 
    $BLOCK_NAME: '.scroll-anim-20';

// 変数
$color_black: #000;
$duration_default: 0.7s;
$delay_default: 0.3s;
$easing_default: cubic-bezier(0.19, 1, 0.22, 1);

#{ $BLOCK_NAME } {
  @include Mq(md) {
    display: flex;
  }

  &__item {
    max-width: 360px;
    padding: 8px;
    margin: 0 auto;
    @include Mq(md) {
      width: calc(100% / 3);
    }
  }

  &__img-path {
    fill: none;
    stroke: $color_black;
    stroke-opacity: 0;
    stroke-width: 4px;
  }

  &__img-icon {
    fill: $color_black;
    fill-opacity: 0;
  }

  &__heading {
    font-size: 32px;
    font-weight: bold;
    text-anchor: start;
    fill: $color_black;
    fill-opacity: 0;
  }

  &__text {
    overflow: hidden;
    & > span {
      display: inline-block;
      transition: transform $duration_default $delay_default $easing_default;
      transform: translateY(100%);
    }
    &.is-animated > span {
      transform: translateY(0);
    }
  }
}
  • URL: /components/raw/scroll-anim20/scroll-anim20.scss
  • Filesystem Path: src/components/scroll-anims/1_20/scroll-anim20/scroll-anim20.scss
  • Size: 987 Bytes
  • Content: 
    'use strict';

import 'snapsvg-cjs';
declare const Snap: any;
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

export const scrollAnim20 = () => {
  const items = document.querySelectorAll('.scroll-anim-20__item');
  [...items].forEach(item => {
    const anim = new Anim20(<HTMLElement>item);
    anim.init();
  });
}

class Anim20 {
  el: HTMLElement;
  svg: any;
  path: any;
  icon: any;
  heading: any;
  text: HTMLElement;
  pathAnimSpeed: number;
  headingAnimSpeed: number;
  constructor(el: HTMLElement) {
    this.el = el;
    if (!this.el) return;
    // @ts-ignore
    this.svg = Snap(<SVGElement>this.el.querySelector('.scroll-anim-20__img'));
    this.path = this.svg.select('.scroll-anim-20__img-path');
    this.icon = this.svg.select('.scroll-anim-20__img-icon');
    this.heading = this.svg.select('.scroll-anim-20__heading');
    this.text = this.el.querySelector('.scroll-anim-20__text');
    this.pathAnimSpeed = 600;
    this.headingAnimSpeed = 400;
  }

  /**
   * 初期化
   */
  init(): void {
    if (!this.el) return;
    this.scrollHandler();
  }

  /**
   * SVGのパスアニメーション
   */
  animPath(): void {
    const pathLength = this.path.getTotalLength();
    this.path.attr({
      strokeOpacity: 1,
      strokeDasharray: `${pathLength} ${pathLength}`,
      strokeDashoffset: pathLength,
    });
    this.path.animate({
      strokeDashoffset: pathLength * 2,
    }, this.pathAnimSpeed, mina.easeout, () => {
      this.animHeading();
      this.animIcon();
      this.animText();
    });
  }

  /**
   * SVGの見出しアニメーション
   */
  animHeading(): void {
    this.heading.attr({
      startOffset: '50px'
    });
    this.heading.animate({
      fillOpacity: 1,
      startOffset: 0,
    }, this.headingAnimSpeed, mina.backout);
  }

  /**
   * SVGのアイコンアニメーション
   */
  animIcon(): void {
    this.icon.animate({
      fillOpacity: 1,
    }, this.headingAnimSpeed, mina.easeout);
  }

  /**
   * テキストアニメーション
   */
  animText(): void {
    this.text.classList.add('is-animated');
  }

  /**
   * スクロール連動のイベント設定
   */
  scrollHandler(): void {
    ScrollTrigger.create({
      trigger: this.el,
      start: 'top 50%',
      onEnter: self => {
        this.animPath();
        self.kill();
      }
    });
  }
}
  • URL: /components/raw/scroll-anim20/scroll-anim20.ts
  • Filesystem Path: src/components/scroll-anims/1_20/scroll-anim20/scroll-anim20.ts
  • Size: 2.5 KB

No notes defined.