Sassがあれば何でもできる!Sassがあれば、回転寿司も回せる!というわけで、今日はSass(CSS)を使って回転寿司のように要素を無限ループさせてみましょう。何ができるかこうです。寿司が無限ループしています。(本当はもっとなめらかに動きます)僕の圧倒的な画力についての感想はここでは本質ではないのでご遠慮願います。ここで大事なのは寿司が無限ループすることです。「今後要素の数がちょくちょく増える予感がある」とか「できるだけセマンティックに作りたい」とか「なんか負けた気がする」などといった理由で背景画像にはしたくない、そんな夜もあるはずです。寿司が回ればいいのか?否、回すなら美しく回さなければならない。?回しましょう、今宵、美しい寿司を。====完成形のコードというわけでSassの出番です。寿司の個数に合わせて数値を計算したり、CSSで要素ごとにアニメーションを設定しようとすると日が暮れてしまうので、Sassで一気に作っちゃいましょう。何の変哲もないリストですね。ちなみに回転寿司は英語でsushi-go-roundです。alt="たまご"></li></ul>そしてSassはこうです。}}$itemTotal(寿司の総数)はお手元の寿司の数に合わせて各々入れてください。$speed(速度)は50〜100ぐらいが適当です。あまりに遅いといわゆる「寿司が止まって見える」状態になります。寿司を全部同じ位置に配置する寿司をループさせて動かす寿司の動きにズレを加えるとなります。寿司とは何か、わからなくなってきましたね。寿司を全部同じ位置に配置する今回はul.sushiGoRoundが寿司のレーン、その中のli要素がそれぞれの皿にあたります。absoluteで、li要素を全部重ねてul要素の端に配置してしまいます。寿司をループさせて動かす準備は整いました。...と、その前に、寿司の総数と速度を設定する変数をそこら辺に入れておきます。infinite;を指定し、適当なところに以下を追記しましょう。}}ここで何をしているのかというと、こういうことです。寿司を初期地点に戻す(51%〜100%(0%))というアニメーションを絶え間なく続ける必要があります。これを行うためのコードです。ここでのポイントは、1の動きと3の動きが同じ距離であることです。これによって回転寿司のレーンのような美しい等速直線運動が生み出されます。}}以上のコードでは寿司ごとにアニメーション開始タイミングのズレを発生させています。ここでのポイントは、delayにマイナスの値を入れていることです。animation-delayがプラスの値だと寿司が動き出すまでに時間がかかりますが、マイナスの値を入れることによって、「既にx秒動いた状態」から開始されることになります。これによって、結果的に各寿司があるべき場所に配置され、なめらかに動き出すというわけです。先日HOME'Sからリリースされた新サービス「暮らし図鑑」(スマホ用)のトップ画面では、かわいいキャラクターをこの回転寿司メソッドでくるくる動かしてディスプレイしています。(残念ながらイラストを書いたのは僕ではありません。)「狭い画面で、たくさんの要素を、邪魔にならないように見てもらう」という目的に対して使える手法ではないでしょうか。ちなみにこの「暮らし図鑑」、約200人から集めたライフスタイルやリアルな生活事情をもとに人々をタイプ分けして、自分と似たタイプの人の引っ越しを見られることで、ユーザーがじゃぶじゃぶ引っ越したくなるような住み替え心を煽るサービスとなっておりますので、ぜひお試しください。引っ越したくなってください。「たった一つの」とか言っておいてアレなんですが、この回転寿司メソッドにはまだ「寿司の間隔調整が難しい」「寿司の数が変わるたびに変数を手で差し替えないといけない」などの弱点があります。株式会社LIFULL「LIFULL」とは、世界中の人々の人生やくらし(LIFE)を満たす(FULL)企業へと成長していきたいという想いをこめた造語です。LIFULLはてなブログをはじめよう!nextdeveloperさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。