【Studio】文字が流れるアニメーションの実装方法
今回は文字が流れるアニメーションを実装していきます。
完成イメージは下記の通りです。
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安15万円〜】
全てセット料金のホームページ制作サービス
サイト企画〜公開まですべてセット料金になっており、「余計な料金は一切いただかない」というのをモットーにしています。
最安15万円〜からホームページが作れて、すべてオリジナルデザインで制作可能です。また自社管理できる「Studio」というツールを用いているので、プランによっては維持費0円で運営できます。
期間限定で制作費用の3万円割引キャンペーンもやっていますので、ぜひお気軽にご相談ください！
文字が流れるアニメーションの実装手順
文字が流れるアニメーションを実装する手順は、下記のとおりです。
それぞれ具体的に説明します。
①：カルーセルを追加する
左パネルを開いて、「追加」→「ボックス」→「Carousel」をクリックします。
②：レイヤー整理・要素削除を行う
カルーセルを選択した状態で、レイヤーを開きます。
beforeの要素は必要ないので削除します。
itemの要素を開いて、「Image」と「Box」が出てくるまで開き続けます。
「Image」と「Box」の位置を交代させます。
「Image」を削除します。Itemの中は「Box」だけになったはずです。
「Box」を開くと、「Text」が3つ表示されたはずです。1番上のTextと1番下のTextを削除します。
③：文章内容を変更する
残ったTextを選択して、右パネルを開きます。
右パネルのテキストの部分を、好きな文章に変更します。
Kaji今回は「HelloWorld!」という文字列にしました！
また文字サイズ・文字色も変更しておきます。
Kajiアニメーション用なので文字サイズは100px以上がおすすめです！文字色は白色以外であれば何色でもOKです！
④：アイテムの横幅・縦幅を変更する
次に、itemタグを選択します。
そして横幅と縦幅を、両方とも「auto」に設定します。
⑤：アニメーションを変更する
最後に、アニメーションを設定していきます。
itemを囲っているBoxを選択して、右パネルを開きます。
下記のように設定するようにしましょう。
- 自動再生：ON
- 再生間隔：1
- 送り時間：8,000~9,000など大きめの数値
- ホバーで停止：OFF
次に、itemを選択します。
上部メニューのモーションを選択して、イージングを「Linear」に変更します。
Studioでのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービス「ラク子」を運営しています。
Kaji「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています！
- ポッキリ価格でホームページを制作できる
- 専属デザイナーが完全オリジナルのデザイン作成
- 納品後1ヶ月間は無料の電話サポートあり
- 自社更新できるホームページが作れる
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
- 維持費0円でホームページを運営できる
料金プランは、以下の通りです。
ポッキリ価格でホームページが作れるサービスであり、個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
送信中です
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
※コメントは最大500文字、5回まで送信できます