【Studio】文字が流れるアニメーションの実装方法
今回は文字が流れるアニメーションを実装していきます。
完成イメージは下記の通りです。
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安18万円〜】
集客に強い・SEO特化のホームページ制作サービス
「デザインは良いのに問い合わせが来ない」それはSEO対策がしっかりできていないことが原因かもしれません。 月間10万PVメディアを運営する現役SEOコンサルが設計するから、 GoogleにもAI（ChatGPT等）にも選ばれるホームページが作れます。
- AI×人間の分業でSEO対策が圧倒的に低価格
- 公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（テンプレート不使用）
- Studio制作で自社更新もカンタン
- ホームページ制作実績、累計50サイト以上
今なら制作費30,000円OFF（毎月3組限定）。ご相談・お見積りは無料です。
文字が流れるアニメーションの実装手順
文字が流れるアニメーションを実装する手順は、下記のとおりです。
それぞれ具体的に説明します。
①：Loop Boxを追加する
追加パネルを開いて、「基本」→「Loop Box」をクリックします。
②：文章内容を変更する
Textを選択して、右パネルを開きます。
右パネルのテキストの部分を、好きな文章に変更します。
Kaji今回は「HelloWorld!」という文字列にしました！
また文字サイズ・文字色も変更しておきます。
Kajiアニメーション用なので文字サイズは100px以上がおすすめです！文字色は白色以外であれば何色でもOKです！
テキストの背景色は不要になるので透明に変更します。
背景色のついている「Box」を選択し、背景色は透明を選択します。
④：アイテムの横幅・縦幅を変更する
先ほど背景色を変更したBoxを選択します。
そして幅と高さの両方とも「auto」に設定します。
次に、Loop Boxを選択します。
幅「100%」、高さ「auto」に設定します。
KajiLoopBoxの幅を100%にすることで、画面いっぱいにテキストが広がります！
一度ライブプレビューを確認してみましょう。
⑤：アニメーションを変更する
最後に、アニメーションを設定方法です。
Loop Boxを選択して、右パネルを開きます。
下記の内容で、任意のアニメーションを設定することができます。
- 速度
- 方向（右から左・左から右）
- ホバーで停止
Studioでのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービス「ラク子」を運営しています。
Kaji「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています！
- ポッキリ価格でホームページを制作できる
- 専属デザイナーが完全オリジナルのデザイン作成
- 納品後1ヶ月間は無料の電話サポートあり
- 自社更新できるホームページが作れる
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
- 維持費0円でホームページを運営できる
料金プランは、以下の通りです。
ポッキリ価格でホームページが作れるサービスであり、個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
送信中です
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
※コメントは最大500文字、5回まで送信できます