Infinitely scrolling 'marquee'

テキストがスクロールしてくれるマーキータグ<marquee>（別に使えないくはない）は便利だった。けどスピードは変えられない、逆方向スクロールも無理だった。意外にVanilla JSで探してもなかった。

いまお手伝いしているところにいるエンジニアさんも同じようなもの探してて見つけてくれたのがConstant velocity scroll slider independent of number Vanilla JS (Web Animations API)ってヤツ。うーん！最高じゃん！！ってことで実装してみたら、このコードは1つ目の要素の横幅を取得して全体のスライド幅を決めるので各要素の横幅が違うとズレが生じることが判明。

じゃー修正、改修、改造、パクりで出来たのが以下。

See the Pen Infinitely scrolling 'marquee' (Vanilla JS/ES6) by ekkun (@ekkun) on CodePen.

@sho_doiさん参照元ソースを教えてくれてありがとー！

via @web_walking_nak

コメント

コメントを投稿

このブログの人気の投稿

Blogger

イメージ
  Bloggerから@ekkun.comのアカウントに以下のメールが届いた。 This email address has a legacy Blogger account associated with it that hasn’t logged in since 2007. In 60 days it will lose access to the account and associated content; the data will be permanently deleted unless migrated to the Google Account system at Legacy migration page. そしたら再ログインしてBloggerを復活させないとネ！ 正直いままではアカウントだけ作成して使用していなかったので、独自ドメインにも紐づけていなかった。今回はちょっとだけ頑張ってみようかと思いドメインを紐づけてみた。 （テスト投稿が2005年だよ！） まずはBloggerの「設定」の「カスタムドメイン」に b.ekkun.com と登録。すると以下のようにcname情報がポップアップで表示される。 このドメインに対するあなたの所有権を確認できませんでした。ご利用のドメイン登録事業者のウェブサイトで、DNS（ドメイン ネーム システム）設定を見つけ、2 つの CNAME を入力してください（名前: ◯◯◯、宛先: ghs.google.com）と（名前: ◇◇◇◇◇◇◇、宛先: gv-△△△△△△△△.dv.googlehosted.com）。 つぎにドメイン管理側でcnameを設定する。アタイは Value Domain なので「DNSレコードの変更」から入って以下の通りにcnameを設定する。 cname ◯◯◯ ghs.google.com. cname ◇◇◇◇◇◇◇ gv-△△△△△△△△.dv.googlehosted.com. ついでにSSLも導入。 Bloggerの「設定」の「HTTPS」にチェックを入れて待つだけ。 あとは今後このBloggerでなに書いて行こか悩むばかり...。
続きを読む