このページの批評は終了しました。
これは、ロード時にACSヘッダーをアニメーションさせるコンポーネントです。
使い方:
記事のどこかにこれを入れてください:
[[include :scp-jp:component:acs-animation]]
これで終わりです!
例: SCP-5935
注意:
- --timeScaleと--timeDelayの2つの変数は、アニメーションのタイミングを制御します。 例えば:
[[module CSS]]
:root {
--timeScale: 2;
--timeDelay: 0.5s;
}
[[/module]]
--timeScaleはアニメーション全体の速度を2倍に遅くし、--timeDelayはアニメーションの開始点を半秒遅らせます。デフォルト値はそれぞれ1秒と0秒です。
デフォルト値を変更したい場合は、[[include]]の後に上記を入れてください。 ACSが最初のコンテンツ要素ではない場合や、他のアニメーションモジュール(component:fade-inのようなもの)と組み合わせて使用する場合は、--timeDelayを推奨します。
- 他のタイプのACSヘッダとの互換性がない可能性が高いです*。
*PeppersGhostのACS Liteで使用するには、[[include]]の後に以下のパッチを追加してください:
[[module CSS]]
.anom-bar > .bottom-box::before { display: none;}
div.diamond-part { clip-path: none; box-shadow: none!important; }
[[/module]]
- AnAnomalousWriterの作品に触発されました。
ソースコード:
:root { --timeScale: 1; --timeDelay: 0s; } /* Converting middle divider from box-shadow to ::before pseudo-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; } /* CLASSIFIED LEVEL BARS */ 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)); } /* TOP TEXT */ 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, RISK CLASSES */ div.text-part > * { clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%); animation-name: expand2; animation-duration: calc(0.7s * 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: fade; animation-duration: calc(0.3s * var(--timeScale)); animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: ease-out; animation-fill-mode: backwards; } div.main-class > *, div.disrupt-class > *, div.risk-class > * { animation-name: flowIn; animation-duration: calc(0.7s * var(--timeScale)); animation-delay: calc(0.5s * 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.9s * 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; } /* MOBILE QUERY */ @media (max-width: 480px ) { .anom-bar > .bottom-box::before { display:none; } .anom-bar > .bottom-box { box-shadow: 0 -0.5rem 0 0 rgb(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)); } } /*-------------------------*/ @keyframes divider { from { max-width: 0%; } to { max-width: 100%; } } @keyframes bar { from { max-width: 0%; } to { max-width: 100%; } } @keyframes bar-mobile { from { max-height: 0%; } to { max-height: 100%; } } @keyframes bottomup { from { top: 100px; } to { top: 0; } } @keyframes expand1 { from { opacity: 0; max-width: 75%;} to { opacity: 1; max-width: 100%;} } @keyframes expand2 { from { opacity: 0; max-width: 1%;} to { opacity: 1; max-width: 100%;} } @keyframes fade { from { opacity: 0;} to { opacity: 1;} } @keyframes flowIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes arrowspin { from { clip-path: circle(0%); transform: rotate(135deg); } to { clip-path: circle(75%); transform: rotate(0deg); } } @keyframes nodegrow { from { transform: scale(0);} to { transform: scale(1);} } @keyframes diamondBorder { from { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); } to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); } }
ページコンソール
批評ステータス
カテゴリ
SCP-JP本投稿の際にscpタグを付与するJPでのオリジナル作品の下書きが該当します。
本投稿の際にgoi-formatタグを付与するJPでのオリジナル作品の下書きが該当します。
本投稿の際にtaleタグを付与するJPでのオリジナル作品の下書きが該当します。
翻訳作品の下書きが該当します。
他のカテゴリタグのいずれにも当て嵌まらない下書きが該当します。
言語
EnglishРусский한국어中文FrançaisPolskiEspañolภาษาไทยDeutschItalianoУкраїнськаPortuguêsČesky繁體中文Việtその他日→外国語翻訳日本支部の記事を他言語版サイトに翻訳投稿する場合の下書きが該当します。
コンテンツマーカー
ジョーク本投稿の際にジョークタグを付与する下書きが該当します。
本投稿の際にアダルトタグを付与する下書きが該当します。
本投稿済みの下書きが該当します。
イベント参加予定の下書きが該当します。
フィーチャー
短編構文を除き数千字以下の短編・掌編の下書きが該当します。
短編にも長編にも満たない中編の下書きが該当します。
構文を除き数万字以上の長編の下書きが該当します。
特定の事前知識を求めない下書きが該当します。
SCPやGoIFなどのフォーマットが一定の記事種でフォーマットを崩している下書きが該当します。
シリーズ-JP所属
JPのカノンや連作に所属しているか、JPの特定記事の続編の下書きが該当します。
JPではないカノンや連作に所属しているか、JPではない特定記事の続編の下書きが該当します。
JPのGoIやLoIなどの世界観用語が登場する下書きが該当します。
JPではないGoIやLoIなどの世界観用語が登場する下書きが該当します。
ジャンル
アクションSFオカルト/都市伝説感動系ギャグ/コミカルシリアスシュールダーク人間ドラマ/恋愛ホラー/サスペンスメタフィクション歴史任意
任意A任意B任意C- portal:6629025 (05 Aug 2020 08:10)
コメント投稿フォームへ
注意: 批評して欲しいポイントやスポイラー、改稿内容についてはコメントではなく下書き本文に直接書き入れて下さい。初めての下書きであっても投稿報告は不要です。批評内容に対する返答以外で自身の下書きにコメントしないようお願いします。
批評コメントTopへ