SPSTRAP Document API

Options

Fadein on - load page

Fadein slideup - load page

Fadein slidedown - load page

Fadein full slidedown - load page

Blink element

Bounce element

Click to scale

Zoom in & out

<img src="https://placeholder.pics/svg/300x300/f5f5f5/f5f5f5" class="[sp--animate-zoom]" scope="in" theme="sm-fast">
                            <img src="https://placeholder.pics/svg/300x300/eaeaea/eaeaea" class="sp--animate-zoom" scope="[in]" theme="md">
                            <img src="https://placeholder.pics/svg/300x300/dadada/dadada" class="sp--animate-zoom" scope="in" theme="[lg-slow]">

<div style="padding:30px;background-color:#eaeaea;" class="[sp--animate]">
                                <img src="https://placeholder.pics/svg/300x300/f5f5f5/f5f5f5" class="sp--animate-zoom" scope="in" theme="sm-fast">
                                <img src="https://placeholder.pics/svg/300x300/dadada/dadada" class="sp--animate-zoom" scope="in" theme="md">
                                <img src="https://placeholder.pics/svg/300x300/999999/999999" class="sp--animate-zoom" scope="in" theme="lg-slow">
                            </div>

<img src="https://placeholder.pics/svg/300x300/f5f5f5/f5f5f5" class="[sp--animate-zoom]" scope="out" theme="sm-fast">
                            <img src="https://placeholder.pics/svg/300x300/eaeaea/eaeaea" class="sp--animate-zoom" scope="[out]" theme="md">
                            <img src="https://placeholder.pics/svg/300x300/dadada/dadada" class="sp--animate-zoom" scope="out" theme="[lg-slow]">

<div style="padding:30px;background-color:#eaeaea;" class="[sp--animate]">
                                <img src="https://placeholder.pics/svg/300x300/f5f5f5/f5f5f5" class="sp--animate-zoom" scope="out" theme="sm-fast">
                                <img src="https://placeholder.pics/svg/300x300/dadada/dadada" class="sp--animate-zoom" scope="out" theme="md">
                                <img src="https://placeholder.pics/svg/300x300/999999/999999" class="sp--animate-zoom" scope="out" theme="lg-slow">
                            </div>

Class & Attribute

name	description
.sp--animate-zoom	줌 이벤트의 영향을 받는 직접적인 클래스
scope ( attribute )	"in" or "out"
theme ( attribute )	^sm, md, lg ( 크기를 결정하는 시작점 ) -slow, -fast ( 속도를 조절하는 조합 명령어 )

Flip Element

<div class="[sp--flip]">
                                    <ul>
                                        <li screen="[front]">
                                            <img src="https://placeholder.pics/svg/500x300/333333/ffffff/front">
                                        </li>
                                        <li screen="[back]">
                                            <img src="https://placeholder.pics/svg/500x300/ffffff/333333/back">
                                        </li>
                                    </ul>
                                </div>

<div class="sp--flip" direction="[vertical]">
                                    <ul>
                                        <li screen="front">
                                            <img src="https://placeholder.pics/svg/500x300/333333/ffffff/front">
                                        </li>
                                        <li screen="back">
                                            <img src="https://placeholder.pics/svg/500x300/ffffff/333333/back">
                                        </li>
                                    </ul>
                                </div>
                                
                            </div>

Hamberger Bar - Scale

<div>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="sm">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" data-class=".sp--hamburger-on">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box" scale="lg">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                            </div>

Hamberger Bar - Inner Scale

<div>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg" line="thin">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg" line="thin">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg" line="thin">
                                    <span class="sp--hamburger-box">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" scale="lg" line="bold">
                                    <span class="sp--hamburger-box">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                            </div>

Hamberger Bar - Arrow Left

<div>
                                <button class="sp--hamburger sp--hamburger--arrow sp--toggle-btn" scale="lg" line="thin">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--arrow sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--arrow sp--toggle-btn" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--arrow sp--toggle-btn" scale="lg" line="thin">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--arrow sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--arrow sp--toggle-btn" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--arrow sp--toggle-btn" scale="lg" line="thin">
                                    <span class="sp--hamburger-box">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--arrow sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--arrow sp--toggle-btn" scale="lg" line="bold">
                                    <span class="sp--hamburger-box">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                            </div>

Hamberger Bar - Minus

<div>
                                <button class="sp--hamburger sp--hamburger--minus sp--toggle-btn" scale="lg" line="thin">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--minus sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--minus sp--toggle-btn" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="xs">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--minus sp--toggle-btn" scale="lg" line="thin">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--minus sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--minus sp--toggle-btn" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--minus sp--toggle-btn" scale="lg" line="thin">
                                    <span class="sp--hamburger-box">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--minus sp--toggle-btn" scale="lg">
                                    <span class="sp--hamburger-box">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--minus sp--toggle-btn" scale="lg" line="bold">
                                    <span class="sp--hamburger-box">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                            </div>

Hamberger Bar - Color

<div>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" theme="light" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" theme="gray" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" theme="dark" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" theme="dark-reverse" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" theme="primary" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                                <button class="sp--hamburger sp--hamburger--spin sp--toggle-btn" theme="primary-reverse" scale="lg" line="bold">
                                    <span class="sp--hamburger-box" scale="sm">
                                        <span class="sp--hamburger-inner"></span>
                                    </span>
                                </button>
                            </div>

Etc

애니메이션 코드는 최초 수행, 혹은 숨김된 요소가 block 될 때 실행된다.