ももな

STUDIOのアニメーションを極めたいWEBデザイナー

ももな

STUDIOのアニメーションを極めたいWEBデザイナー
  • 固定された記事

STUDIOのアニメーションを極めたい

初めまして。 Webデザイナーのシュウトウです。 少し避けていたnote。 この度、始めてみようと思います。 というのも、同じように避けていたノーコードでWeb制作ができるSTUDIO。 夫の育休をきっかけに触りだしたら、無事はまりまして… noteにアウトプットしていきたいと思ったのです。 STUDIOについて、 「ノーコードだから誰でも簡単にできちゃうんでしょ」 「STUDIOで作ったら似たりよったりのWEBサイトになっちゃうんじゃないの」 そう思ってました。 ・

ももな

    • アニメーションを極めるための16日目（クリック中に色が変わるリンクボタン）

      こんにちは。 WEBデザイナーのシュウトウです。 今日も制作した別のデモサイトから。 リンクボタンを押すと、クリックしている最中に色が変わるアニメーションです。 クリック中に色が変わるリンクボタン瞬き厳禁です！笑 これはリンクボタンをアクションボタンに設定することで「条件付きアニメーション」が増えます。 条件付きスタイルアニメーションを「クリック中」に設定して色を変えるだけです。 アニメーションの時間を長くしてみましたが、特に変わりなく…。 これは本当にクリックしている

      ももな

      • アニメーションを極めるための15日目（出現時に棒が伸びるアニメーション）

        こんにちは。 WEBデザイナーのシュウトウです。 STUDIOのテンプレート巡りをしていたら素敵なサイトを発見！ デモサイトとして設定を考え、マネして制作してみました。 真似しながら制作するとかなり勉強になるな～と思います。 ところどころ変更して、自分のイメージしたクライアント様が欲しいだろうなあと思うサイトに仕上がりました。 そんな今日のアニメーションは制作したデモサイトから。 スクロールすることがわかるように棒が伸びるアニメーションです。 結構見かけますし、洗練された

        ももな

        • アニメーションを極めるための14日目（黒い画面から文字と写真が出てくるアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 久しぶりの投稿になっておりました…。 最近はココナラに出店するための準備や、営業のためのポートフォリオ作りを優先していたため、アニメーションのアウトプットができていませんでした。 やっとココナラに出店できたので、ぜひ気になる方はご検討ください🙇‍♀️ https://coconala.com/services/3251602 また再開していきます！どうぞよろしくお願いいたします♪ さて、今日は黒い画面から文字と写真が出てく

          ももな
        • 固定された記事

        STUDIOのアニメーションを極めたい

        ももな

        • アニメーションを極めるための16日目（クリック中に色が変わるリンクボタン）

          ももな

        • アニメーションを極めるための15日目（出現時に棒が伸びるアニメーション）

          ももな

        • アニメーションを極めるための14日目（黒い画面から文字と写真が出てくるアニメーション）

          ももな

          アニメーションを極めるための13日目（画像が上下から出てくるアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 今日は画像が上下から出てくるアニメーションです。 ファーストビューでこういったアニメーションが出てくると印象的ですよね！ こういうかっこいいアニメーションをやってみたかったんです。笑 画像が上下から出てくるアニメーション３枚の写真のレイヤーと最初の設定です。 上から重ねているグレーのボックスのy値を「0」にしたのがポイントです。 縦の動きをつけたいときはy値を「0」にし、横の動きをつけたいときはx値を「0」にするといいです

          ももな

          アニメーションを極めるための13日目（画像が上下から出てくるアニメーション）

          ももな

          アニメーションを極めるための12日目（TOPに戻る固定ボタン）

          こんにちは。 WEBデザイナーのシュウトウです。 今日も架空サイトから抜粋です。 アニメーションというよりかは機能といった感じになるのですが、TOPに戻る固定ボタンの設定です。 TOPに戻る固定ボタン結構気持ち良いですよね。笑 これは、まずボックス内に表示させたいデザインのデザインを作ります。 今回はこんな感じにしました！ このボタンを固定に設定します。 固定にしたら、下の方に配置します。スクロールして固定していきます。 ユーザーが扱いやすいように右下に配置されるこ

          ももな

          アニメーションを極めるための12日目（TOPに戻る固定ボタン）

          ももな

          アニメーションを極めるための11日目（ホバーすると色と文字内容が変わるアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 今日も架空サイトから抜粋です。 ヘッダーのアイコン部分がホバーする大きくなるアニメーションです。 ホバーすると大きくなるアニメーション アイコンのボックスをホバー時にスケールが変わるように設定します。 今回は「1.2」で設計しました。これだけでクリックしたくなるアイコンになりました！ ついでに下のリンクたちはホバーすると色が変わる設定にしています。 おまけ こちらも同じようにホバーすると写真が大きくなるように見せてい

          ももな

          アニメーションを極めるための11日目（ホバーすると色と文字内容が変わるアニメーション）

          ももな

          アニメーションを極めるための10日目（ホバーすると色と文字内容が変わるアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 とうとう10日続けることができました。 今日は無理かもな～みたいな日も頑張れたので、自分をほめようと思います。 あとは時間を作らせてくれている家族に感謝です。 さて、今日はホバーすると色と文字内容が変わるアニメーションです。 そろそろココナラで出店したくて、以前お仕事でWordpressで作ったWEBサイトを架空サイトとしてSTUDIOで作っています。また別の雰囲気になったので、ちょっと完成が楽しみです。 その中でちょうど

          ももな

          アニメーションを極めるための10日目（ホバーすると色と文字内容が変わるアニメーション）

          ももな

          アニメーションを極めるための９日目（ホバーすると文字が大きくなるアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 今日はボタンホバーのアニメーション３種です。 ちょっと複雑なので、目次を作ってみました。 ボタンホバーのアニメーション３種類今回はリンクボタンにマウスカーソルを合わせると、線が出てくるアニメーションを３種類作りました。 左２つは構造を理解できると簡単です♪ただ右のアニメーションはデフォルトの設定では難しく、CSSも使ってみました。 やっぱりCSSでの実装も楽しいですね！ サンプル動画 ボタンボックスのレイヤー構造につい

          ももな

          アニメーションを極めるための９日目（ホバーすると文字が大きくなるアニメーション）

          ももな

          アニメーションを極めるための８日目（ホバーすると文字が大きくなるアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 タイトルではホバーすると文字が大きくなるアニメーションと書きましたが、もう少し詳しく言うとホバーすると文字背景が広がり、（in）ホバーで文字を大きくするアニメーションです。 STUDIOの（in）ホバーは、ホバーを設定した要素の中にある要素に、さらに別のスタイルを付け加える時に使える設定です！ リンクボタンなどで２重のアニメーションをつけたい時にとても使える設定です。 ホバーすると文字が大きくなるアニメーションまずは条件

          ももな

          アニメーションを極めるための８日目（ホバーすると文字が大きくなるアニメーション）

          ももな

          アニメーションを極めるための７日目（ホバーすると色が変わるアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 今まで条件付きアニメーションとして「出現時」のアニメーションを紹介してきました。 WEBサイトを開いたときに文字がフェードインしてきたり、ズームアウトしたり… アニメーションはそれだけではありません。 特にパソコンでWEBサイトを見る場合、マウスカーソルを合わせたときに、クリックしなくても何かしら変化することがありますよね。 それを「ホバー」といいます。 色が変わる、ボタンが浮き上がって見える…などの視覚的変化を加えることで

          ももな

          アニメーションを極めるための７日目（ホバーすると色が変わるアニメーション）

          ももな

          アニメーションを極めるための６日目（１文字ずつスライドインするアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 少しずつサイトの実装に使えそうなアニメーションにしていきます！そんな今日は昨日のスライドインを応用した１文字ずつスライドインするアニメーションです。 １文字ずつスライドインするアニメーション 今日は少し複雑なので、一つにまとめてみました。 一文字ずつスライドインさせるときは画面外からではなく、一つ前の文字からスライドさせると、絶妙に横に流れていくアニメーションになります。 そして最初の「春」の文字はフェードインにしていま

          ももな

          アニメーションを極めるための６日目（１文字ずつスライドインするアニメーション）

          ももな

          アニメーションを極めるための５日目（スライドイン）

          こんにちは。 WEBデザイナーのシュウトウです。 今日は基礎的なアニメーションのひとつ、スライドインです。 スライドイン 出現時に元の位置から600px横にずれた場所から移動するようにしました。 今回は右からですが、左からインする場合は「-600px」といったようにx軸で数値をとらえるとよさそうです。 STUDIOの場合、これは感覚的に動かせるのでドラック&ドロップで動かすのも良いと思います。 今回はイージングはカスタマイズしてみました。 余韻を感じるように、最後にか

          ももな

          アニメーションを極めるための５日目（スライドイン）

          ももな

          アニメーションを極めるための４日目（背景色が変わるアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 やっと記事の見出し画像を設定しました。 Canvaで簡単に作れてそのまま設定できちゃうんですね。 最近のCanvaはすごすぎて、使い慣れておいてよかったな～と思います。 そしてこれも最近知ったのですが、教員や学生であれば有料版が無料になるみたいです！ Canvaはデザイナーじゃなくても、十分使いやすいですし、本当におすすめです。 さて、今日のアニメーションは背景色が変わるアニメーションです。 背景色が変わるアニメーション

          ももな

          アニメーションを極めるための４日目（背景色が変わるアニメーション）

          ももな

          アニメーションを極めるための３日目（ズームアウト）

          こんにちは。 WEBデザイナーのシュウトウです。 今日のアニメーションは 文字がズームアウトするアニメーションです。 ズームアウトって聞くと、小さい文字が大きい文字に変化するイメージがありますよね。 でも大きい文字が小さい文字（もしくは表示したい文字）に変化することを「ズームアウト」というみたいです。ちなみにその逆が「ズームイン」です。 ズームアウト 出現時に「100px」の大きさから「72px」にズームアウトするように設定しました。 今回はイージングは「cubic-

          ももな

          アニメーションを極めるための３日目（ズームアウト）

          ももな

          アニメーションを極めるための２日目（徐々にピントが合うアニメーション）

          こんにちは。 WEBデザイナーのシュウトウです。 花粉症でやられていました。 今日は特別ひどかったです…。笑 さて、今日のアニメーションは 徐々にピントが合うアニメーションです。 徐々にピントが合うアニメーション フィルター設定でぼかしを「20px」にして、モーションを変更しました。 今回はイージングを「ease-out」にして優しい印象にしました。 今日は徐々にピントが合うアニメーションでした。 ではまた明日、よろしくお願いします。

          ももな

          アニメーションを極めるための２日目（徐々にピントが合うアニメーション）

          ももな