hrs.
min.
sec.

フリップ式クロック

使い方

このページのアドレスをOBSのブラウザソースURLに貼り付けるだけ

この説明文はOBS上では表示されないはず

カスタムCSS

カスタム変数を利用したカスタムCSSに対応しています
各値を指定するだけで各種計算等は自動で行われます

何種類か作ってみたのでこちらをOBSブラウザソース設定画面中のカスタムCSS欄にコピペしてみてね
気に入ったものをベースにお好みで調整してください

/* シンプル */
:root {
    /*
    背景色、発光色、通常色の設定
    transparent:透過
    #fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
    rgb(255,0,0)、rgba(255,0,0,128):RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
    */
    --background-color: transparent;
    --panel-color: #1d1f24;
    --font-color: #ffffff;
    --font: 'Bebas Neue'; /* Bebas Neue , Passion One, Stardos Stencil, Oranienbaum*/
    
    --frame-background-color: #000e;
    --frame-shadow-color: #000; /* 両方transpalentにすると枠自体が透明になります */
    --frame-emboss: 2px; /* フレームのエンボスサイズ */
    --frame-radius: 6%; /* フレームの角丸 */
    
    --panel-width: 8vw; /* 1パネルの幅 */
    --panel-height: 8vw; /* 1パネルの高さ */
    --panel-gap: 0.5vw; /* 1桁目と2桁目の隙間 */
    --unit-gap: 3vw; /* ユニット同士の隙間 */
    --panel-radius: 5%; /* パネルの角丸 0~50% */
    --font-size: 17vw; /* パネルフォントサイズ */
    --text-size: 4vw; /* 下部テキストフォントサイズ */

    --easing: 0.4; /* パネル回転時間 0~1 */
}
/* ステンシル */
:root {
    /*
    背景色、発光色、通常色の設定
    transparent:透過
    #fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
    rgb(255,0,0)、rgba(255,0,0,128):RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
    */
    --background-color: transparent;
    --panel-color: #1d241e;
    --font-color: #ffffff;
    --font: 'Stardos Stencil'; /* Bebas Neue , Passion One, Stardos Stencil, Oranienbaum*/
    
    --frame-background-color: #00000077;
    --frame-shadow-color: #000000; /* 両方transpalentにすると枠自体が透明になります */
    --frame-emboss: 10px; /* フレームのエンボスサイズ */
    --frame-radius: 9%; /* フレームの角丸 */
    
    --panel-width: 10vw; /* 1パネルの幅 */
    --panel-height: 8vw; /* 1パネルの高さ */
    --panel-gap: 1vw; /* 1桁目と2桁目の隙間 */
    --unit-gap: 4vw; /* ユニット同士の隙間 */
    --panel-radius: 15%; /* パネルの角丸 0~50% */
    --font-size: 15vw; /* パネルフォントサイズ */
    --text-size: 3vw; /* 下部テキストフォントサイズ */

    --easing: 1; /* パネル回転時間 0~1 */
}
/* ドラキュラ */
:root {
    /*
    背景色、発光色、通常色の設定
    transparent:透過
    #fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
    rgb(255,0,0)、rgba(255,0,0,128):RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
    */
    --background-color: transparent;
    --panel-color: #121a13;
    --font-color: #e92727;
    --font: 'Oranienbaum'; /* Bebas Neue , Passion One, Stardos Stencil, Oranienbaum*/
    
    --frame-background-color: #f10c0c;
    --frame-shadow-color: #000000; /* 両方transpalentにすると枠自体が透明になります */
    --frame-emboss: 2px; /* フレームのエンボスサイズ */
    --frame-radius: 9%; /* フレームの角丸 */
    
    --panel-width: 10vw; /* 1パネルの幅 */
    --panel-height: 8vw; /* 1パネルの高さ */
    --panel-gap: 0.5vw; /* 1桁目と2桁目の隙間 */
    --unit-gap: 4vw; /* ユニット同士の隙間 */
    --panel-radius: 50%; /* パネルの角丸 0~50% */
    --font-size: 15vw; /* パネルフォントサイズ */
    --text-size: 3vw; /* 下部テキストフォントサイズ */

    --easing: 1; /* パネル回転時間 0~1 */
}
/* ポップ */
:root {
    /*
    背景色、発光色、通常色の設定
    transparent:透過
    #fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
    rgb(255,0,0)、rgba(255,0,0,128):RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
    */
    --background-color: transparent;
    --panel-color: #ffffff;
    --font-color: #db1d5c;
    --font: 'Passion One'; /* Bebas Neue , Passion One, Stardos Stencil, Oranienbaum*/
    
    --frame-background-color: transpalent;
    --frame-shadow-color: transpalent; /* 両方transpalentにすると枠自体が透明になります */
    --frame-emboss: 10px; /* フレームのエンボスサイズ */
    --frame-radius: 9%; /* フレームの角丸 */
    
    --panel-width: 10vw; /* 1パネルの幅 */
    --panel-height: 5vw; /* 1パネルの高さ */
    --panel-gap: 0.5vw; /* 1桁目と2桁目の隙間 */
    --unit-gap: 2vw; /* ユニット同士の隙間 */
    --panel-radius: 5vw; /* パネルの角丸 0~50% */
    --font-size: 17vw; /* パネルフォントサイズ */
    --text-size: 4vw; /* 下部テキストフォントサイズ */

    --easing: 1; /* パネル回転時間 0~1 */
}

オプション

タイムゾーン対応

URLパラメータ「timezone」としてタイムゾーンを入力することで現地時間を表示することが出来ます。
https://nmnm.mn/youtube/flipclock.html?timezone=UTCとすると、UTCでの時間になります。
https://nmnm.mn/youtube/flipclock.html?timezone=Japanで日本時間になりますが、パラメータのない配布URL(https://nmnm.mn/youtube/flipclock.html)のように、パラメータが存在しない場合には自動的に「Japan」を入れるようにしていますので、日本時間で使用する場合はパラメータの指定は必要ありません。
任意の地域での時間を表示したい場合はList of tz database time zones(Wikipedia)のTZ database nameを参考にしてください。
例えばニューヨークの時間を表示したい場合は、https://nmnm.mn/youtube/flipclock.html?timezone=America/New_Yorkとなります