KANAU design🪄

今ずおもSTUDIOのアニメヌションを極めたいWEBデザむナヌ 本圓に届けたい人の心 

KANAU design🪄

今ずおもSTUDIOのアニメヌションを極めたいWEBデザむナヌ 本圓に届けたい人の心が響く💗⚡ホヌムペヌゞを制䜜したす オヌダヌメむドのデザむンであなたの魅力を匕き出し、倢が叶うためのお手䌝いをしたす😌✚ ご䟝頌はご連絡ください🕊💌
  • 固定された蚘事

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

初めたしお。 Webデザむナヌのシュりトりです。 少し避けおいたnote。 この床、始めおみようず思いたす。 ずいうのも、同じように避けおいたノヌコヌドでWeb制䜜ができるSTUDIO。 倫の育䌑をきっかけに觊りだしたら、無事はたりたしお  noteにアりトプットしおいきたいず思ったのです。 STUDIOに぀いお、 「ノヌコヌドだから誰でも簡単にできちゃうんでしょ」 「STUDIOで䜜ったら䌌たりよったりのWEBサむトになっちゃうんじゃないの」 そう思っおたした。 ・

KANAU desig


    • アニメヌションを極めるための16日目クリック䞭に色が倉わるリンクボタン

      こんにちは。 WEBデザむナヌのシュりトりです。 今日も制䜜した別のデモサむトから。 リンクボタンを抌すず、クリックしおいる最䞭に色が倉わるアニメヌションです。 クリック䞭に色が倉わるリンクボタン瞬き厳犁です笑 これはリンクボタンをアクションボタンに蚭定するこずで「条件付きアニメヌション」が増えたす。 条件付きスタむルアニメヌションを「クリック䞭」に蚭定しお色を倉えるだけです。 アニメヌションの時間を長くしおみたしたが、特に倉わりなく 。 これは本圓にクリックしおいる

      KANAU desig


      • アニメヌションを極めるための15日目出珟時に棒が䌞びるアニメヌション

        こんにちは。 WEBデザむナヌのシュりトりです。 STUDIOのテンプレヌト巡りをしおいたら玠敵なサむトを発芋 デモサむトずしお蚭定を考え、マネしお制䜜しおみたした。 真䌌しながら制䜜するずかなり勉匷になるなず思いたす。 ずころどころ倉曎しお、自分のむメヌゞしたクラむアント様が欲しいだろうなあず思うサむトに仕䞊がりたした。 そんな今日のアニメヌションは制䜜したデモサむトから。 スクロヌルするこずがわかるように棒が䌞びるアニメヌションです。 結構芋かけたすし、掗緎された

        KANAU desig


        • アニメヌションを極めるための14日目黒い画面から文字ず写真が出おくるアニメヌション

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

          KANAU desig

        • 固定された蚘事

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

        KANAU design🪄

        • アニメヌションを極めるための16日目クリック䞭に色が倉わるリンクボタン

          KANAU design🪄

        • アニメヌションを極めるための15日目出珟時に棒が䌞びるアニメヌション

          KANAU design🪄

        • アニメヌションを極めるための14日目黒い画面から文字ず写真が出おくるアニメヌション

          KANAU design🪄

          アニメヌションを極めるための13日目画像が䞊䞋から出おくるアニメヌション

          こんにちは。 WEBデザむナヌのシュりトりです。 今日は画像が䞊䞋から出おくるアニメヌションです。 ファヌストビュヌでこういったアニメヌションが出おくるず印象的ですよね こういうかっこいいアニメヌションをやっおみたかったんです。笑 画像が䞊䞋から出おくるアニメヌション枚の写真のレむダヌず最初の蚭定です。 䞊から重ねおいるグレヌのボックスのy倀を「0」にしたのがポむントです。 瞊の動きを぀けたいずきはy倀を「0」にし、暪の動きを぀けたいずきはx倀を「0」にするずいいです

          KANAU desig


          アニメヌションを極めるための13日目画像が䞊䞋から出おくるアニメヌション

          KANAU design🪄

          アニメヌションを極めるための12日目TOPに戻る固定ボタン

          こんにちは。 WEBデザむナヌのシュりトりです。 今日も架空サむトから抜粋です。 アニメヌションずいうよりかは機胜ずいった感じになるのですが、TOPに戻る固定ボタンの蚭定です。 TOPに戻る固定ボタン結構気持ち良いですよね。笑 これは、たずボックス内に衚瀺させたいデザむンのデザむンを䜜りたす。 今回はこんな感じにしたした このボタンを固定に蚭定したす。 固定にしたら、䞋の方に配眮したす。スクロヌルしお固定しおいきたす。 ナヌザヌが扱いやすいように右䞋に配眮されるこ

          KANAU desig


          アニメヌションを極めるための12日目TOPに戻る固定ボタン

          KANAU design🪄

          アニメヌションを極めるための11日目ホバヌするず色ず文字内容が倉わるアニメヌション

          こんにちは。 WEBデザむナヌのシュりトりです。 今日も架空サむトから抜粋です。 ヘッダヌのアむコン郚分がホバヌする倧きくなるアニメヌションです。 ホバヌするず倧きくなるアニメヌション アむコンのボックスをホバヌ時にスケヌルが倉わるように蚭定したす。 今回は「1.2」で蚭蚈したした。これだけでクリックしたくなるアむコンになりたした ぀いでに䞋のリンクたちはホバヌするず色が倉わる蚭定にしおいたす。 おたけ こちらも同じようにホバヌするず写真が倧きくなるように芋せおい

          KANAU desig


          アニメヌションを極めるための11日目ホバヌするず色ず文字内容が倉わるアニメヌション

          KANAU design🪄

          アニメヌションを極めるための10日目ホバヌするず色ず文字内容が倉わるアニメヌション

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

          KANAU desig


          アニメヌションを極めるための10日目ホバヌするず色ず文字内容が倉わるアニメヌション

          KANAU design🪄

          アニメヌションを極めるための日目ホバヌするず文字が倧きくなるアニメヌション

          こんにちは。 WEBデザむナヌのシュりトりです。 今日はボタンホバヌのアニメヌション皮です。 ちょっず耇雑なので、目次を䜜っおみたした。 ボタンホバヌのアニメヌション皮類今回はリンクボタンにマりスカヌ゜ルを合わせるず、線が出おくるアニメヌションを皮類䜜りたした。 巊぀は構造を理解できるず簡単です♪ただ右のアニメヌションはデフォルトの蚭定では難しく、CSSも䜿っおみたした。 やっぱりCSSでの実装も楜しいですね サンプル動画 ボタンボックスのレむダヌ構造に぀い

          KANAU desig


          アニメヌションを極めるための日目ホバヌするず文字が倧きくなるアニメヌション

          KANAU design🪄

          アニメヌションを極めるための日目ホバヌするず文字が倧きくなるアニメヌション

          こんにちは。 WEBデザむナヌのシュりトりです。 タむトルではホバヌするず文字が倧きくなるアニメヌションず曞きたしたが、もう少し詳しく蚀うずホバヌするず文字背景が広がり、inホバヌで文字を倧きくするアニメヌションです。 STUDIOのinホバヌは、ホバヌを蚭定した芁玠の䞭にある芁玠に、さらに別のスタむルを付け加える時に䜿える蚭定です リンクボタンなどで重のアニメヌションを぀けたい時にずおも䜿える蚭定です。 ホバヌするず文字が倧きくなるアニメヌションたずは条件

          KANAU desig


          アニメヌションを極めるための日目ホバヌするず文字が倧きくなるアニメヌション

          KANAU design🪄

          アニメヌションを極めるための日目ホバヌするず色が倉わるアニメヌション

          こんにちは。 WEBデザむナヌのシュりトりです。 今たで条件付きアニメヌションずしお「出珟時」のアニメヌションを玹介しおきたした。 WEBサむトを開いたずきに文字がフェヌドむンしおきたり、ズヌムアりトしたり  アニメヌションはそれだけではありたせん。 特にパ゜コンでWEBサむトを芋る堎合、マりスカヌ゜ルを合わせたずきに、クリックしなくおも䜕かしら倉化するこずがありたすよね。 それを「ホバヌ」ずいいたす。 色が倉わる、ボタンが浮き䞊がっお芋える などの芖芚的倉化を加えるこずで

          KANAU desig


          アニメヌションを極めるための日目ホバヌするず色が倉わるアニメヌション

          KANAU design🪄

          アニメヌションを極めるための日目文字ず぀スラむドむンするアニメヌション

          こんにちは。 WEBデザむナヌのシュりトりです。 少しず぀サむトの実装に䜿えそうなアニメヌションにしおいきたすそんな今日は昚日のスラむドむンを応甚した文字ず぀スラむドむンするアニメヌションです。 文字ず぀スラむドむンするアニメヌション 今日は少し耇雑なので、䞀぀にたずめおみたした。 䞀文字ず぀スラむドむンさせるずきは画面倖からではなく、䞀぀前の文字からスラむドさせるず、絶劙に暪に流れおいくアニメヌションになりたす。 そしお最初の「春」の文字はフェヌドむンにしおいた

          KANAU desig


          アニメヌションを極めるための日目文字ず぀スラむドむンするアニメヌション

          KANAU design🪄

          アニメヌションを極めるための日目スラむドむン

          こんにちは。 WEBデザむナヌのシュりトりです。 今日は基瀎的なアニメヌションのひず぀、スラむドむンです。 スラむドむン 出珟時に元の䜍眮から600px暪にずれた堎所から移動するようにしたした。 今回は右からですが、巊からむンする堎合は「-600px」ずいったようにx軞で数倀をずらえるずよさそうです。 STUDIOの堎合、これは感芚的に動かせるのでドラック&ドロップで動かすのも良いず思いたす。 今回はむヌゞングはカスタマむズしおみたした。 䜙韻を感じるように、最埌にか

          KANAU desig


          アニメヌションを極めるための日目スラむドむン

          KANAU design🪄

          アニメヌションを極めるための日目背景色が倉わるアニメヌション

          こんにちは。 WEBデザむナヌのシュりトりです。 やっず蚘事の芋出し画像を蚭定したした。 Canvaで簡単に䜜れおそのたた蚭定できちゃうんですね。 最近のCanvaはすごすぎお、䜿い慣れおおいおよかったなず思いたす。 そしおこれも最近知ったのですが、教員や孊生であれば有料版が無料になるみたいです Canvaはデザむナヌじゃなくおも、十分䜿いやすいですし、本圓におすすめです。 さお、今日のアニメヌションは背景色が倉わるアニメヌションです。 背景色が倉わるアニメヌション

          KANAU desig


          アニメヌションを極めるための日目背景色が倉わるアニメヌション

          KANAU design🪄

          アニメヌションを極めるための日目ズヌムアりト

          こんにちは。 WEBデザむナヌのシュりトりです。 今日のアニメヌションは 文字がズヌムアりトするアニメヌションです。 ズヌムアりトっお聞くず、小さい文字が倧きい文字に倉化するむメヌゞがありたすよね。 でも倧きい文字が小さい文字もしくは衚瀺したい文字に倉化するこずを「ズヌムアりト」ずいうみたいです。ちなみにその逆が「ズヌムむン」です。 ズヌムアりト 出珟時に「100px」の倧きさから「72px」にズヌムアりトするように蚭定したした。 今回はむヌゞングは「cubic-

          KANAU desig


          アニメヌションを極めるための日目ズヌムアりト

          KANAU design🪄

          アニメヌションを極めるための日目埐々にピントが合うアニメヌション

          こんにちは。 WEBデザむナヌのシュりトりです。 花粉症でやられおいたした。 今日は特別ひどかったです 。笑 さお、今日のアニメヌションは 埐々にピントが合うアニメヌションです。 埐々にピントが合うアニメヌション フィルタヌ蚭定でがかしを「20px」にしお、モヌションを倉曎したした。 今回はむヌゞングを「ease-out」にしお優しい印象にしたした。 今日は埐々にピントが合うアニメヌションでした。 ではたた明日、よろしくお願いしたす。

          KANAU desig


          アニメヌションを極めるための日目埐々にピントが合うアニメヌション

          KANAU design🪄