バーバーポール（流れる斜めストライプ）

media

barber pole / hazard stripes / animated striped bar / candy stripe

バーバーポール（流れる斜めストライプ）

斜めのストライプが横へ流れ続け、帯そのものが「注意」または「処理中」を語る古典的な意匠。理容店の看板・工事用の危険テープ・進捗バーの定番で、縞を1周期ぶん送るだけなので継ぎ目なく無限に回せる。

01 — Demo video

Play live →

02 — Prompt template

帯に barber pole(流れる斜めストライプ)を実装してください。

- 縞は要素を並べず repeating-linear-gradient 1枚で敷く
- 縞の傾きは垂直から {{lean}}deg。gradientの角度は calc(90deg + {{lean}}deg) で渡す
- 縞の繰り返し幅は {{pitch}}px、そのうち {{ratio}} の割合を塗り、残りを地の色にする
- 送りは background-position ではなく内側トラックの transform: translate3d で行う(合成のみで再描画させない)
- 送る距離は「横方向の1周期」= pitch / cos(lean) ちょうど。半端に送ると1周ごとに縞が飛ぶ
- {{cycle}}s の linear で infinite。ease系を使うと周回の継ぎ目で速度が変わって見える
- 親を overflow: clip にしてトラックのはみ出しを隠す
- prefers-reduced-motion 時は animation を止め、静止した縞模様としてだけ残す(帯の意味は色と柄で伝わる)

帯に barber pole(流れる斜めストライプ)を実装してください。

- 縞は要素を並べず repeating-linear-gradient 1枚で敷く
- 縞の傾きは垂直から {{lean}}deg。gradientの角度は calc(90deg + {{lean}}deg) で渡す
- 縞の繰り返し幅は {{pitch}}px、そのうち {{ratio}} の割合を塗り、残りを地の色にする
- 送りは background-position ではなく内側トラックの transform: translate3d で行う(合成のみで再描画させない)
- 送る距離は「横方向の1周期」= pitch / cos(lean) ちょうど。半端に送ると1周ごとに縞が飛ぶ
- {{cycle}}s の linear で infinite。ease系を使うと周回の継ぎ目で速度が変わって見える
- 親を overflow: clip にしてトラックのはみ出しを隠す
- prefers-reduced-motion 時は animation を止め、静止した縞模様としてだけ残す(帯の意味は色と柄で伝わる)

帯に barber pole(流れる斜めストライプ)を実装してください。

- 縞は要素を並べず repeating-linear-gradient 1枚で敷く
- 縞の傾きは垂直から {{lean}}deg。gradientの角度は calc(90deg + {{lean}}deg) で渡す
- 縞の繰り返し幅は {{pitch}}px、そのうち {{ratio}} の割合を塗り、残りを地の色にする
- 送りは background-position ではなく内側トラックの transform: translate3d で行う(合成のみで再描画させない)
- 送る距離は「横方向の1周期」= pitch / cos(lean) ちょうど。半端に送ると1周ごとに縞が飛ぶ
- {{cycle}}s の linear で infinite。ease系を使うと周回の継ぎ目で速度が変わって見える
- 親を overflow: clip にしてトラックのはみ出しを隠す
- prefers-reduced-motion 時は animation を止め、静止した縞模様としてだけ残す(帯の意味は色と柄で伝わる)

03 — Params

cycle(縞1周期が流れる時間 s) — 範囲 0.4〜6 / 初期 3
縞1本ぶんが送られる時間。3s前後が「動いている」と読めて煩くない。1sを切ると視線を奪い、注意帯ではなく主役になってしまう。
pitch(縞の間隔 px) — 範囲 12〜96 / 初期 48
縞の繰り返し幅(縞に対して直角方向)。帯の高さの1〜1.5倍にすると危険テープらしく、細かくするほど進捗バーの質感に寄る。
ratio(縞の太さ比) — 範囲 0.2〜0.8 / 初期 0.54
pitchのうち色を塗る割合。0.5が等幅。0.5を少し超えると塗りが地に勝ち、帯の存在感が上がる。
lean(縞の傾き deg・垂直からの角度) — 範囲 0〜60 / 初期 17
0で垂直の縞、値を上げるほど寝る。45が理容店・危険テープの古典、15〜20は今回の観察元のように上品に流したいとき。

04 — Vocab

repeating-linear-gradient — 同じ縞を無限に繰り返す背景。何本必要でもDOMは1つで済み、間隔と太さを数値だけで変えられる。
1周期ぶん送る — 柄の繰り返し幅ちょうどだけ動かすと、終端の絵が始端と完全に一致する。継ぎ目の見えない無限ループの原理。
pitch / cos(lean) — 縞が斜めのとき、横へ何px動かせば柄が1周するかの式。直角方向の間隔を横方向に読み替えている。
linear — 無限ループでは必須のイージング。ease系だと1周ごとに加減速が挟まり、そこが継ぎ目として見えてしまう。
indeterminate(不定) — 進捗率が出せない処理の表現。数字ではなく「流れ続ける縞」で作業中だけを伝える定番の型。

05 — NG → OK examples

言い方: 「「工事現場みたいな斜めストライプを流して」」

なぜNG: 傾き・間隔・速さのどれも決まらない。要素をdivで何本も並べる実装や、backgroundを半端な距離だけ動かして1周ごとに縞が飛ぶ実装が返ってくる。

言い方: 「「barber poleをrepeating-linear-gradientで。垂直から17度、pitch 48px、塗り54%、3s linear infinite。送りはtranslate3dでpitch/cos(lean)ぴったり、親はoverflow: clip」」

なぜOK: 柄の作り方・角度・間隔・速さに加えて「送る距離をちょうど1周期に合わせる」まで指定している。継ぎ目が飛ぶ事故はこの一言で消える。