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