Slick UIアニメーションを作成する

Sep 14, 2025

操作方法

もっと頻繁には、デザイナーと開発者は、その文脈でのモーションデザインの重要性を認めています。 ユーザー体験 。 Web上のアニメーションは、もはやユーザーを喜ばせてうわーする方法ではなく、経験を容易に、楽しく思い出に残る機能を実現する機能ツールです。そして、多くの異なるツールとアプローチがあります。 CSSアニメーション ブートストラップまたはHTMLを使用しているテクニックに。

ユーザーインターフェイスのコンテキスト内のアニメーションはまだ非常に新しいフィールドです。私たちが続くことができるUIアニメーションの共通パターンを教えるか、UIアニメーションの一般的なパターンを示すリソースは多くありません。ほとんどの場合、それは実験についてです。 ユーザーテスト そしておそらく少し試行錯誤。

15の応答Webデザインチュートリアル

そのため、このチュートリアルでは、混乱しないものを作成し、一般的なパターンに従い、スタイリッシュです。これは、会社のWebサイトでよく見ることが多いチームプロフィールセクションになります。その考えは、それぞれがホバリングされたときにチーム/スタッフのメンバーに関するもう少し情報を表示することです。チュートリアル全体を通して、Codepenを使用しますが、もちろん、代わりに自分のお気に入りのエディタと開発環境を使用できます。覚えておいて、より複雑なサイトを作成するかもしれない ウェブホスティング 必要なので、あなたのために働くサービスがあることを確認してください。

あなたはサイトを作るための簡単な道具を望みますか？鮮やかなものを使う ウェブサイトビルダー 。

01.設定されます

コードペンを開けて新しいペンを作成することから始めます。 BootStrap 4とSASS（.sss）を使用する予定です。そのため、ブートストラップCSSとJSをリソースリンクとして含め、CSSをSCSに設定します。追加する必要があるもう1つのリソースリンクはフォント素晴らしいです。私たちは私たちの社会的なアイコンのために使います。

02.コンテナ、行、列を作成します

コンテナはBootstrapが基本レイアウト要素として使用するもので、デフォルトのグリッドシステムを使用しているときに必要です。コンテナ内では、行を追加する必要があります。行は列のラッパーであり、可能な限りの列の数とブレークポイントが何であるかを指定できます。私たちの場合では、中規模のブレークポイントを持つ要素を幅3列に埋めます。

 divクラス= "コンテナ"＆gt。

03.プロファイル画像と色を設定します

私たちが始める最初のプロフィールUI要素は女性チームメンバーのためのものであり、彼女は青いチームの一員になるでしょう。色は青と呼ばれるクラスを使用して指定され、実際の色は最終的にSASS変数を使用して定義されます。これは、後のステップで表示します。それから私たちは写真を追加して写真と呼ばれるクラスを与える必要があります。

 divクラス= "チームブルー"＆gt。

04.プロファイル名とtitleを追加します

The beginning of creating a team member entry showing that a team member photo, job description and social media information. — HTMLの1つの最後の部分は名前、タイトル、そして社会的なアイコンを追加します

追加するHTMLの最後のビットは、最後のステップで追加したばかりのLast Divタグの下に追加されます。社会的なアイコンのために、私たちはフォントを使うことになり、これらは順序付けられていないリスト内に置かれます。

05. SASS変数を設定します

コードペンを使用してフォローしている場合は、すでにSASSがインストールされており、行く準備ができています。 PEN設定アイコン/ボタンをクリックする必要があり、CSSプリプロセッサとしてSCSSを選択します。それから私達は私達の色の全てを保存するいくつかの変数で先に進み、追加することができます。私たちは、すべての色の不透明度をより意味のある制御を可能にするために、RGBAをカラー値として使用しました。

 $ BlueGradient：RGBA（103,188,223,8）;
$ LightGreen：RGBA（188,219,183,,5）;
$ green：RGBA（119,180,109,0.5）。
$ green-border：RGBA（171,221,164,0.5）;
$ BLUE：RGBA（80,205,227,1）;
$ブルーボーダー：RGBA（147,223,236,1）;

06.背景画像をアップロードします

物事をもっと魅力的に見せるために、私たちは体に素敵な背景画像を置きます。ここでは、私たちの最初の変数セットを使って背景イメージに緑色から青へ行く心地よいグラデーションオーバーレイを与えます。その後、私たちの背景画像を完全に敏感にするために、ビューの高さを100VHに設定します。

ボディ{
 背景：リニアグラデーション（右側、$ LightGreen、$ BlueGradient）、URL（ 'https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg'）中央繰り返し;
 背景サイズ：カバー。
 位置：相対;
 高さ：100VH;

07.プロファイルの背景と画像を選ぶ

各チームプロファイルには同じスタイルが与えられ、クラスチームはこれに使用されます。背景は白、すべてのコンテンツを中心とし、位置が相対的に設定されていることを確認する必要があります。その後、プロファイル画像のCSSを含めることができます。最良の結果を得るには、あなたが使用する元のイメージが200ピクセルの広場より大きくないことを確認してください。ただし、Photo CSSルール内でこれらの高さと幅を変更します。

 .Team {
 パディング：30px 0 40px;
 Margin-Top：60px;
 背景：#fff;
 テキスト整列：中央;
 オーバーフロー：非表示;
 位置：相対;
 カーソル：ポインタ;
 Box-Shadow：0 0 0 25px 1px RGBA（0,0,0,0.3）;
 。写真 {
 表示：インラインブロック;
 幅：130px;
 高さ：130px;
 Margin-Bottom：50px;
 位置：相対;
 Z指数：1;
 }

08.アニメーションを追加します

An image show that the rollover animation bringing down a coloured circle from the top of the frame. — その位置の底部の割合を設定することで、青い円の量を見ることができるかを制御できます。

私たちが追加する最初のアニメーションピースは私達のプロフィール要素の上にあります。その考えは、私たちが要素全体を越えてホバーすると、青い円形の形状がアニメートします。これの位置を底部の割合にすることで、どのくらいの青の量を見ることができるかを制御できます。だからこのパーセンテージで遊ぼうとし、あなたはこれがどのように機能するかというより良い考えを得るでしょう。あなたは決して知らない：あなたはより良い効果さえ発見するかもしれません！

 .photo：前：{
 コンテンツ： "";
 幅：100％。
 高さ：0px;
 境界半径：50％。
 背景：$青。
 位置：絶対;
 下：130％。
 右：0;
 左：0;
 変換：スケール（3）;
 遷移：すべての.3の線形0S。
}
.team：ホバー.photo：前の{
 高さ：100％。

09.チーム写真をアニメートします

チーム写真はこのUIの私たちの焦点であり、おそらくあなたがいくつかの形や形でアニメートすることを期待する最も明白な要素です。この手順で追加するCSSは、最初に写真を小さいサークルに変えます、そしてそれに覆われているときには、それに淡い青い境界線があると、写真は境界線と一緒にスケールダウンします。遷移が追加された状態で、私たちは素敵な流体アニメーションを得ます。

 .PIC：後の{
 コンテンツ： "";
 幅：100％。
 高さ：100％。
 境界半径：50％。
 背景：$青。
 位置：絶対;
 トップ：0;
 左：0;
 Z指数：1;
}
。ティーム.photo img {
 幅：100％。
 高さ：自動車;
 境界半径：50％。
 変換：スケール（1）;
 遷移：0.9のすべての0Sを容易にする。
}
。ブルー：ホバー.photo img {
 Box-Shadow：0 0 0 0 14ピクセル$青い境界;
 変換：スケール（0.6）;
 }

10.プロファイル名と位置を調整します

An image showing the half completed rollover animation, showing the team member photo shrinking and generating a thick border. — 覆われたとき、淡い青い境界線が写真に追加されます

プロファイル名と位置には少し片付けが必要です。これらはアニメ化されませんが、それはあなたが好きならあなたのアニメーションをこれらに追加するのを止めるべきではありません。写真のサイズ変更のために十分なスペースがあるので、おそらくホバーでわずかにスケジュールします。

 .profile-txt {
 Margin-Bottom：30px;
 。題名 {
 フォントサイズ：2rem;
 フォント重量：700;
 カラー：＃333;
 文字間隔：1.5px;
 text-transform：Capeyize;
 Margin-Bottom：6px;
 }
 。ポジション{
 表示ブロック;
 フォントサイズ：1REM;
 カラー：＃555;
 }

11.ソーシャルアイコンを追加します

社会的なアイコンは最初にページの下から-100pxまでに配置されます。それから、底の位置はゼロに設定され、遷移が追加されます。これにより、ビューに戻すようにスムーズなアニメーションがあります。アイコンには自分のホバーの状態が与えられ、背景を白と青にアイコンに設定します。

 .Blue .social-iCons {
 幅：100％。
 リストスタイル：なし;
 パディング：0;
 マージン：0;
 背景：$青。
 位置：絶対;
 下：-100px;
 左：0;
 遷移：すべて0.6Sの容易さ;
 李{
 表示：インラインブロック;
 
 a {
 表示ブロック;
 パディング：8ピクセル。
 フォントサイズ：1REM;
 カラー：#FFF;
 テキスト装飾：なし。
 遷移：0.5Sすべての容易さ;
 ＆amp;：ホバー{
 カラー：$青。
 背景：#fff;
 }
 }
 }
}
.Team：Hover。ソシルアイコン{
 下：0px;

12.グリーンチームメンバーを作ります

物事を少し混ぜ合わせるために、私たちは私たちのチームにもっとメンバーを追加し始めることができます。この次のものに使用する色は緑色になります。しかし最初にHTMLセクション/ファイルに戻り、私たちがする必要があるのはCOL-MD-3クラス - ソーシャルアイコンの下の最後のDIVタグに行をコピーして貼り付けます。

 DIVクラス=「チームグリーン」＆gt。

青クラスを緑に変更したら、ついに同じアニメーションを提供するすべてのCSSに追加できます。

グリーン：ホバー.photo img {
 Box-Shadow：0 0 0 14ピクセル$ green-border;
 変換：スケール（0.6）;
 }
・グリーン.photo：前の{
 コンテンツ： "";
 幅：100％。
 高さ：0px;
 境界半径：50％。
 背景：$ green;
 位置：絶対;
 下：135％。
 右：0;
 左：0;
 変換：スケール（3）;
 遷移：すべての.3の線形0S。
}
・グリーン。ソシルアイコン{
 幅：100％。
 リストスタイル：なし;
 パディング：0;
 マージン：0;
 背景：$ green;
 位置：絶対;
 下：-100px;
 左：0;
 遷移：すべて0.6Sの容易さ;
 李{
 表示：インラインブロック;
 a {
 表示ブロック;
 パディング：8ピクセル。
 フォントサイズ：1REM;
 カラー：#FFF;
 テキスト装飾：なし。
 遷移：0.5Sすべての容易さ;
 ＆amp;：ホバー{
 カラー：$ green;
 背景：#fff;
 }
 }
 }

そしてこのアプローチの美しさは、必要に応じて必要に応じて繰り返すことができ、必要に応じてUIアニメーションをテーマにテーマにします。

あなたがチームを使ってサイトを構築しているなら、あなたが信頼できる、安全であることを確認してください クラウドストレージ 物事をまとめるために。

この記事はもともと第307号に掲載されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 問題307を購入する または ネットを購読する 。

UIアニメーションのINSとアウトについてもっと知りたいですか？

Steven Roberts is giving his talk CSS Animation: Beyond Transitions at Generate London from 19-21 September 2018. — Steven Robertsは彼のトークCSSアニメーションを与えています：Londonの生成での移行

あなたがスーレックUIアニメーションを使ってあなたのサイトをポップアンドスパークルにすることができる方法についてもっと学ぶことに興味があるなら、あなたがあなたのチケットを拾ったことを確認してください。 ロンドンを生成します 。

Asemblr.comの創造的な開発者として現在働いているフロントエンドのデザイナーと開発者は、Steven Robertsは彼のトークを配信します - CSSアニメーション：遷移を超えて、彼はあなたに仕事のための最良のツールを見せて、最高のアニメーションのいくつかを再現するWebは、CSSだけでアニメーションの可能性と制限を発見しながら提供しなければなりません。

ロンドンを生成する2018年9月19日から21日までに行われます。 今すぐあなたのチケットを入手してください 。

関連記事：

モバイルアプリでアニメーションを使用する方法
UIデザインのPROのガイド
インターフェースアニメーションを設計するための初心者ガイド

Slick UIアニメーションを作成する

01.設定されます

02.コンテナ、行、列を作成します

03.プロファイル画像と色を設定します

04.プロファイル名とtitleを追加します

05. SASS変数を設定します

06.背景画像をアップロードします

07.プロファイルの背景と画像を選ぶ

08.アニメーションを追加します

09.チーム写真をアニメートします

10.プロファイル名と位置を調整します

11.ソーシャルアイコンを追加します

12.グリーンチームメンバーを作ります

UIアニメーションのINSとアウトについてもっと知りたいですか？

操作方法 - 最も人気のある記事

Photoshopでのストーリーボード

Chart.jsを使用してデータをインタラクティブダイアグラムに変える

フラッシュゲームをHTML5に変換する

Unity Asset Import Pipelineを理解する

スピードスカルプトズブラシのクリーチャーを彫刻する

バッドアス芸者を描く

映画館4Dで彫刻する方法

イラストレーターで完全に幾何学的ロゴデザインを作成する

カテゴリ