ACSアニメーション
このページはコンポーネントページです
Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
詳しくはカテゴリ運用ポリシーを参照してください。
これはACSヘッダー の読み込み時にアニメーション表示を行わせるコンポーネントです。
使い方:
以下の記述を任意の場所に挿入してください。
[[include :scp-jp:component:acs-animation]]
これで完了です。
例: SCP-5935
注:
--timeScaleと--timeDelayの2つの要素がアニメーションの表示を制御します。例えば:
[[module CSS]]
:root {
--timeScale: 2;
--timeDelay: 0.5s;
}
[[/module]]
この場合、--timeScaleによってアニメーションの表示速度はデフォルトから2倍遅くなり、--timeDelayによってアニメーションの表示は0.5秒遅れます。初期設定ではtimeScaleは1、timeDelayは0sとなっています。
これらを適用する場合、[[include]]の下部に上記を記述してください。ACSヘッダが構文の最上部に導入されない場合や、他のアニメーションモジュール(例えばFade in モジュール)等と併用される場合は--timeDelayの使用が推奨されます。
- 他のタイプのACSヘッダーとの互換性が存在しない可能性が高くなっているので注意してください。*
*PeppersGhost PeppersGhost 氏が作成したACS Liteと併用する場合には[[include]]の後に以下の記述を挿入してください:
[[module CSS]]
/*-- ACS Lite Animation Compatibility Patch --*/
.anom-bar > .bottom-box::before { display: none; }
.anom-bar > .bottom-box { box-shadow: none!important; }
div.diamond-part { clip-path: none; animation: none; box-shadow: none!important; }
@media (max-width: 480px) {
div.top-right-box { clip-path: polygon(0% -30%, 100% -30%, 100% 130%, 0% 130%); }
}
[[/module]]
- AnAnomalousWriter AnAnomalousWriter 氏の作品から着想を得ています。
ソースコード:
:root{ --timeScale:1; --timeDelay:0s; } /*Convertingmiddledividerfrombox-shadowto ::beforepseudo-element*/ .anom-bar > .bottom-box{box-shadow:none!important; }.anom-bar > .bottom-box::before{position:absolute; content: " "; width:100%; height:0.5rem; background-color: rgb(var(--black-monochrome, 12, 12, 12)); transform: translateY(-0.74rem); } /*DIVIDER*/ .anom-bar > .bottom-box::before{animation-name: divider; animation-duration: calc(0.74s * var(--timeScale)); animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); animation-iteration-count:1; animation-timing-function: cubic-bezier(.32,.38,.39,.94); animation-fill-mode: backwards; } /*CLASSIFIEDLEVELBARS*/ div.top-center-box > *{animation-name: bar; animation-duration: calc(0.45s * var(--timeScale)); animation-iteration-count:1; animation-timing-function: ease-out; animation-fill-mode: backwards; }div.top-center-box > :nth-child(1) {animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(2) {animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(3) {animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(4) {animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(5) {animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(6) {animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); } /*TOPTEXT*/ div.top-left-box, div.top-right-box{clip-path: polygon( 0% -50%, 150% -50%, 150%100%, 0%100%); }div.top-left-box > *, div.top-right-box > *{position:relative; animation-name: bottomup; animation-duration: calc(0.65s * var(--timeScale)); animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); animation-iteration-count:1; animation-timing-function: ease-out; animation-fill-mode: backwards; } /*-----------------------------------*/ /*-----------------------------------*/ /*CONTAINMENT, DISRUPTION, RISKCLASSES*/ div.text-part > *{clip-path: polygon( 0%0%, 100%0%, 100%100%, 0%100%); animation-name: expand2; animation-duration: calc(0.5s * var(--timeScale)); animation-iteration-count:1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; }div.text-part > :nth-child(1) {animation-name: expand1; }div.text-part > :nth-child(1) {animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }div.text-part > :nth-child(2) {animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }div.text-part > :nth-child(3) {animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }div.main-class::before, div.main-class::after{animation-name: iconslide; animation-duration: calc(0.45s * var(--timeScale)); animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay)); animation-iteration-count:1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } /*BOTTOMTEXT*/ div.main-class > *, div.disrupt-class > *, div.risk-class > *{white-space:nowrap; animation-name: flowIn; animation-duration: calc(0.42s * var(--timeScale)); animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); animation-iteration-count:1; animation-timing-function: ease-out; animation-fill-mode: backwards; } /*-----------------------------------*/ /*-----------------------------------*/ /*DIAMOND*/ div.arrows{animation-name: arrowspin; animation-duration: calc(0.7s * var(--timeScale)); animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); animation-iteration-count:1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; }div.quadrants > *{animation-name: fade; animation-duration: calc(0.3s * var(--timeScale)); animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay)); animation-iteration-count:1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; }div.top-icon, div.right-icon, div.left-icon, div.bottom-icon{animation-name: nodegrow; animation-duration: calc(0.4s * var(--timeScale)); animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay)); animation-iteration-count:1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; }div.diamond-part{clip-path: polygon( -10%0.37%, 120%0.37%, 120%100%, -10%100%); animation-name: diamondBorder; animation-duration: calc(0.8s * var(--timeScale)); animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); animation-iteration-count:1; animation-timing-function: cubic-bezier(.32,.38,.39,.94); animation-fill-mode: backwards; will-change: box-shadow; } /*MOBILEQUERY*/ @media (max-width: 480px ) {.anom-bar > .bottom-box::before{display:none; }.anom-bar > .bottom-box{box-shadow:0 -0.5rem 00 rgb(var(--black-monochrome, 12, 12, 12))!important; }div.top-center-box > *{animation-name: bar-mobile; animation-duration: calc(0.9s * var(--timeScale)); }div.top-center-box > :nth-child(1) {animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(2) {animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(3) {animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(4) {animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(5) {animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(6) {animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }} /*--- MotionAccessibility ---*/ @mediascreenand (prefers-reduced-motion: reduce) {div.anom-bar-container{ --timeScale:0!important; }} /*-------------------------*/ @keyframesdivider{from{max-width:0%; }to{max-width:100%; }}@keyframesbar{from{max-width:0%; }to{max-width:100%; }}@keyframesbar-mobile{from{max-height:0%; }to{max-height:100%; }}@keyframesbottomup{from{top:100px; }to{top:0; }}@keyframesexpand1{from{opacity:0; clip-path:inset(0 calc(100% - 0.75rem) 00); }to{opacity:1; clip-path:inset(0); }}@keyframesiconslide{from{opacity:0; transform: translateX(-5rem); }to{opacity:1; transform: translateX(0); }}@keyframesexpand2{from{opacity:0; width:1%; }to{opacity:1; width: calc(100% - 0.25rem); }}@keyframesfade{from{opacity:0; }to{opacity:1; }}@keyframesflowIn{from{opacity:0; transform: translateY(20px); }to{opacity:1; transform: translateY(0); }}@keyframesarrowspin{from{clip-path:circle(0%); transform: rotate(135deg); }to{clip-path:circle(75%); transform: rotate(0deg); }}@keyframesnodegrow{from{transform: scale(0);}to{transform: scale(1);}}@keyframesdiamondBorder{from{box-shadow: -0.5rem -20rem 00 rgb(var(--black-monochrome, 12, 12, 12)); }to{box-shadow: -0.5rem 000 rgb(var(--black-monochrome, 12, 12, 12)); }}
ページリビジョン: 1, 最終更新: 23 Mar 2022 22:37