タグ 気持ちいいアニメーション
人気順 10 users 50 users 100 users 500 users 1000 usersVue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル | コリス
2018/05/22
319 users
アニメーション
ライセンス
コリス
スマホアプリ
web
Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ... 続きを読む
プロペラがすごい！よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller | コリス
2017/02/28
74 users
エレメント
フレームワーク
コンポーネント
コリス
プロペラ
最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。 Propeller Propeller -GitHub Propellerの特徴 Propellerのスタイル・コンポーネント Propellerの特徴... 続きを読む
最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ | コリス
2016/05/17
458 users
コリス
jQuery
インタラクション
girls
CSS
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。 イラスト: Girls ...記事の続きを読む 続きを読む
[CSS]最近のWebサイトで見かけるコンポーネントを実装するチェックしておきたい便利なスニペットのまとめ -LittleSnippets | コリス
2015/12/04
84 users
コリス
コンポーネント
CSS
スニペット
ナビゲーション
最近のWebサイトで見かける気持ちいいアニメーションを使った、ナビゲーション、画像、ボタン、カード型レイアウトなど、HTML5+CSS3で実装されたさまざまなコンポーネントのスニペットを紹介します。 LittleSnip...記事の続きを読む 続きを読む
UIデザインのアイデアを探す時にチェックしたいサイトのまとめ | コリス
2015/10/18
205 users
インタラクション
コリス
コンポーネント
アニメーション
Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見てい...記事の続きを読む 続きを読む
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ | コリス
2015/07/23
584 users
コリス
jQuery
jQueryTween
スクリプト
機能
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 画像: Girly Drop jQueryTween...記事の続きを読む 続きを読む
UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ | コリス
2015/07/02
151 users
コリス
インタラクション
アニメーション
工夫
意味
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが...記事の続きを読む 続きを読む
[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js | コリス
2015/04/03
82 users
コリス
スクロールエフェクト
スクリプト
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <s... 続きを読む
[CSS]これから増えてきそうなMaterial Designにぴったり！気持ちいいアニメーションで表示させるモーダルコンテンツ | コリス
2015/02/02
159 users
コリス
CSS
Material Design
デモのアニメーションGIF 実装 HTML デモページの中央のセクション（背景グリーンの箇所）のHTMLです。 <section class="cd-section"> <!-- テキスト --> <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a... 続きを読む
[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック | コリス
2015/01/08
52 users
コリス
NAV
CSS
ホバー時
テクニック
ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">S... 続きを読む
JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders | コリス
2014/12/10
129 users
ローディング
コリス
SVG
Step
SVGファイル
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGフ... 続きを読む
[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック | コリス
2014/11/21
65 users
コリス
CSS
ホバー時
テクニック
スクリプト
ボタンをホバーすると、テキストと背景をスライドのアニメーションで変更するスタイルシートのテクニックを紹介します。 ぱっと見、スクリプトを使ってるように見えますが、スタイルシートのみの実装です。 Button with slide hover transition 実装もシンプルです。 HTML hrefにはリンク先を入力して利用してください。 <div class="btn-cont"> <a h... 続きを読む
ASCII.jp：あのサイトとはひと味違う！こだわりマウスオーバー20連発 (1/2)｜先端サイトに学ぶCSS3/jQueryアニメーションデザイン
2014/10/24
55 users
jQueryアニメーションデザイン
ASCII.jp
随所
今回の注目サイト： Omnisense http://omnisense.net/ ICTを駆使したプロダクトを紹介する、フランス企業のWebサイト。 サイトを彩る多彩なアニメーション フラットデザインをベースに、随所に気持ちいいアニメーションを取り入れている「Omnisense」。コンテンツごとに用意されているさまざまなアニメーションは、どれも洗練された動きで、サイトの魅力をぐっと高めている。 ... 続きを読む
[CSS]ぼよよーんと気持ちいいアニメーションでエレメントをページに表示させるスタイルシートのテクニック | コリス
2014/07/29
64 users
ょー
アニメーションgif
見出し
コリス
アニメーション
パネルを構成する画像、ラベル、見出し、テキスト、そして全体をそれぞれ個別のタイミングでぼよよーんと気持ちよく弾むアニメーションで表示するスタイルシートのテクニックを紹介します。 使いどころは限られるけど、こういうの好き。 上記はデモをアニメーションgifにしたもので、実際の動作は下記ページでお楽しみください。 bounceIn animated 実装はこんな感じになります。 HTML HTMLは、... 続きを読む
[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック | コリス
2014/07/22
94 users
コリス
some
active
CSS
フォーカス
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 実際の動作は下記ページで楽しめます。 上記以外にもたくさんのアニメーションがあります。 Some :active ... 続きを読む
効果音が今にも聞こえてきそうな軽快で気持ちいいアニメーションのデモ | コリス
2013/06/06
20 users
Webkit系
バウンド
アニメーション
コリス
ボール
テキストの上をボールがはずんで、次々にカラーを変えたり、一つずつ表示するアニメーションのデモを紹介します。 デモページは、こちら。 Webkit系のブラウザでご覧ください。 Ball bouncing On Text デモは2種類用意されており、一つ目は背景グレーで、バウンドでカラーが変わるデモ。 デモのアニメーション：グレー版 二つ目は背景ブラックで、バウンドすると次々にテキストが表示されていき... 続きを読む
[CSS]アイデアにセンスを感じる、アニメーションがかわいいナビゲーションを実装するチュートリアル | コリス
2013/02/18
103 users
コリス
光源
スクリプト
チュートリアル
ナビゲーション
ナビゲーションの各アイテムをホバーすると、光源が移動するラーヴァランプ風エフェクトをスクリプトは使用せずに、スタイルシートで実装するチュートリアルを紹介します。 矢がハートに射貫かれてるのかわいいですね。 Css-only Lavalamp-like Fancy Menu Effect デモ 実装 利用規程 デモ デモは3種類あり、各アイテムをホバーすると、ラーヴァランプの気持ちいいアニメーション... 続きを読む