手軽なCSSアニメーション！transitionプロパティの使い方（基礎編） | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回までanimationプロパティによるCSSアニメーションについてご紹介しました。 animationプロパティは@keyframesを設定し、animationプロパティを設定して・・・と簡単なアニメーションを実装するには少し手間がかかります。 もっと手軽にCSSアニメーションを実装したい、そんな時に便利なのがtransitionプロパティです。 今回はtransitionプロパティについて解説していきます。 transitionプロパティとanimationプロパティの違い まずは二つのプロパティの何が違うのかを見ていきましょう。 1.transitionプロパティは@keyframesの設定が必要ない animationプロパティでCSSアニメーションを実装する際は、別途@keyframesで変化していく形状などを記述しておく必要がありました。しかしtransitionでは@ke
31 VENTURES｜三井不動産株式会社 ベンチャー共創事業部
働くこと、住まうこと、楽しむこと。 街で起きるすべてを変えることができる最高の演目。 街で起きるすべてを 変えることができる最高の演目。
【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる – ノーズブログ
HTML・CSS 基本のHTMLとCSSを用意 まず適当なHTMLとCSSを用意します。 <body> <header> <h1>ヘッダー</h1> </header> <section> <div>要素1</div> <div>要素2</div> <div>要素3</div> <div>要素4</div> <div>要素5</div> <div>要素6</div> <div>要素7</div> <div>要素8</div> </section> <section> <div>要素9</div> <div>要素10</div> <div>要素11</div> <div>要素12</div> <div>要素13</div> <div>要素14</div> <div>要素15</div> <div>要素16</div> </section> </body> body { margin: 0;
SVGのマスクとアニメーションで動きのあるWEB制作【vivus.js使い方】 | 株式会社リースエンタープライズ
こんにちは、WEBデザイナーの板垣です。 最近、WEBサイトで動画やアニメーションを目にする機会が大変増えてきており、また、制作のご要望でも複雑なアニメーションが増えてきているように感じます。 以前もHTML5 Canvasを使用したアニメーションの記事をいくつか書かせていただきました。 湯気アニメーションについて本気出して考えてみた Canvasを使った動きのあるWebサイト・ホームページ制作をご希望の方へ ただ今回はCanvasではなく、『SVG』でいろいろ変わったアニメーションを作成しようと思います。 SVGについて SVG（Scalable Vector Graphics）とは、よく使われる写真などの「ラスタ形式」の画像とは違い、パス・テキスト・シェイプなどの集合を画像として扱う「ベクトル形式」の画像フォーマットの事です。 私自身は、よく、Adobe Illustratorでパスを
【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ（デモ・サンプルコード付き） | 東京のホームページ制作 / WEB制作会社 BRISK
最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。 特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。 ただ、アニメーションのイメージはなかなか文面でも口頭でも伝えにくいもの。 「ふわふわ」「しゅっと」「するする」「ぬるっ」などとオノマトペを駆使して説明しても、ディレクターとコーダーの間の認識の共有は結構難しいのです。 結局、イメージに合った動きをしているサイトを見つけて「この動きで！」と伝えるのが楽なんですよね。 そこで本記事では、そういった言葉にしにくい部分にフォーカスを当てて、シンプル・綺麗、ポップ、スタイリッシュ、柔らかい印象などのイメージ別にCSSアニメーションをご紹介します。 デモ・サンプルコード付きですので、ぜひ
CSS/JavaScriptで文字に動きを！テキストアニメーション30選 - Workship MAGAZINE(ワークシップマガジン)
昨今、Webデザイン上のありとあらゆる部分に「動きをつける」、つまり動的エフェクトを加えるのが流行しています。きっとあなたもこのクレイジーなトレンドに乗り、徐々にデザインの細部にこだわりを持ちはじめていることでしょう 今回はそんな動的エフェクトの中でも、テキストやロゴにアニメーションを加える「テキストアニメーション（動的タイポグラフィー）」に特化した事例をご紹介します。 タイポグラフィーで表現できることが、変わったフォントや華やかなホバー効果程度だと考えているのなら、それは間違いだと本記事で証明しましょう。 1. 3Dエフェクトをつけたテキストアニメーション CSSのテキストシャドウで斜体の文字に3Dエフェクトをつけた、映画やゲームを思わせるテキストアニメーション。とくに1930年代のクラシックな映画を想起させます。 下部の「RESTART」というボタンはJavaScriptで作られていま
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
Web制作の現場で使える無料のWebサービス13選 | MxGrain - デザイン制作
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
【超簡単】JavaScriptライブラリaos.jsの使い方を解説！ | 模写修行メディア
現在、多くのwebサイトがアニメーションを取り入れています。 特に、スクロール連動型アニメーションを取り入れているサイトは誰でも1度はみたことがあるのではないでしょうか？ 今回は、効率よくサクッとスクロールアニメーションが実装できるJavaScriptのライブラリ、AOS(aos.js)を紹介します。 JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。 JavaScriptの勉強ができるおすすめの本やサイト紹介！ 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
CSSのみで制作する、ナビゲーションメニュー用アニメーションエフェクト10個まとめ
ウェブサイトに欠かせない、ナビゲーションメニューを制作するときに、ちょっとした動きをつけた素敵なホバーエフェクトをまとめてご紹介します。 どれもCSSのみで実装されており、最近のデザイントレンドとして人気のアニメーションを、うまく取り入れたデザインコンセプトとなっています。今後のデザイン制作に活用私てみてはいかがでしょう。 詳細は以下から。 CSSで作成する、ナビゲーションメニュー用アニメーションエフェクトまとめ 01. 文字を上からスライド表示 See the Pen #1226 – Horizontal menu with slide down on hover by LittleSnippets.net (@littlesnippets) on CodePen. マウスホバーすることで、上からスライドするアニメーションエフェクト。 02. 文字を下からスライド表示 See the P
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
オンラインでGIFとアニメーションGIFを圧縮
GIFの圧縮 GIFを最高の画質と圧縮方式で圧縮します。 一度に多数の動画化・非動画化GIF画像のファイルサイズを縮小できます。
マスクアニメーションを使ってカッコよく画像やテキストを表示させる | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
最近のウェブサイトデザインでよく見かける印象がある、画像やテキストなどのコンテンツをアニメーションのマスクで表示させる動きをSass（とjavascript）で作成してみたいと思います。アニメーションの動きや速さを調整したりすることで、い…
CSSで実装する次のコンテンツへと促すスクロールダウンのラインアニメーション | NxWorld
ファーストビューで大きめのイメージやムービーなどを配置しているサイトでよく見る、次セクションへスクロールするよう促すラインアニメーションをCSSで表現したサンプルです。 以前にもスクロールを促す要素として矢印・サークル・マウスなどをCSSで表現する実装コードを紹介しましたが、最近はこのタイプの実装要望が多いので自分用に一覧化したものをシェアします。 これといってユニークな動きでもなく基本的には同じような動きになりますが、汎用的に使えそうなもの7タイプです。 見栄えも動きもすべてCSSで表現しているため、カラー・サイズ・スピードなど自分好みにいろいろと変更するのも容易だと思います。 共通のHTML・CSS 以下で紹介している内容は、すべて下記のようなHTMLを使用しています。 CSSはa要素とその擬似要素への共通スタイルとして下記を記述しています。 a要素にいろいろとスタイル指定はしてありま
簡単なスクロール出現アニメーションを数行のJsとCSSで実装する（ライブラリなし） | web(K)campus|WEBデザイナーのための技術系メモサイト
画面が表示された時にアニメーションでコンテンツが表示されるサイトがここ数年でだいぶ増えてきました。 要素を順番に表示させて目を惹かせたりすることで、サイトを閲覧する際の指標というかガイド的な役割をしています。あんまり動かしすぎると、ゴチャゴチャしますが…。 このタイプのアニメーションのほとんどは「スクロールがここまで達したらアニメーションをする」って命令で動いてます。 Javascriptのライブラリでも「wow.jsとAnimate.css」を使って、アニメーションさせているパターンもありますが、もっと簡単に数行のjQueryの記述とCSSでスクロールしたら出てくるアニメーションを実現してみようと思います。 何をしているかっていうと jQueryで指定の位置から◯◯px以上表示されたらclassを与える。 CSSのアニメーション（transition）を使って、動かす。 っていうだけの簡
30分でできる！ はじめての「SVGアニメーション」に挑戦【デザイナー向け】 | シグナルバナナ
こんにちは。デザイナーの佐藤です。 今回のテーマは「SVGアニメーションに挑戦」です。Webデザインのお仕事をしている方の中にも、まだSVGやSVGを使ったアニメーションに触れたことがないという方はいらっしゃるのではないでしょうか。 実は、SVGアニメーションはAdobe Animate CCのアドオンを使用して簡単に作成できます。シグナル社内のデザイナー勉強会で好評だった初心者向けの作成手順を、みなさんにも公開します！ そもそもSVGとは？ SVG（Scalable Vector Graphics）とは、ベクター形式で画像を表示するフォーマットです。JPEGやPNGなどのビットマップデータとは違い、座標などの数値をもとに計算式によって画像を描画するため、次のような特性を持ちます。 ・ファイルサイズが小さい ・拡大縮小しても画質が劣化しない ・アニメーションに利用すると、GIFアニメよりも
Chart ツールは Canvas より SVG のほうがよさそう : (*x).b=z->a+y/c
◆ Canvas は更新面で不利 ◆ アニメーションとかマウスホバーの処理などで全体再描画になるので重い ◆ データ数が少ないとたいしたことないけど すごく多くのデータを扱うとかなら SVG が無難 いろいろありますが 大きな違いに描画部分を Canvas でするか SVG でするかというのがあります どっちでもいいやと思ってたのですが 使ってみると気になる違いがありました 結論を先に書くと SVG のほうが軽いです 大量のデータになると Canvas だと表示されるまでに時間がかかりますが SVG の方はそこまでかかりません SVG のほうが良さそうな理由仕組みを考えても Canvas は部分的に変更できなくて 1 から再描画する必要があるのに比べて SVG は HTML みたいな XML ベースなので部分的に変更ができるのでブラウザがいい感じに最適化してくれます 例えばマウスを乗せたと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
京都・滋賀のシステム開発｜Auto-IDフロンティア株式会社
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld
スクロールするとテキストがカッコ良くアニメーション！：その１ – ma2.work
