Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル | コリス

2018/05/22 319 users アニメーション ライセンス コリス スマホアプリ web

Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ... 続きを読む

最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ | コリス

2016/05/17 458 users コリス jQuery インタラクション girls CSS

最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。 イラスト: Girls ...記事の続きを読む 続きを読む

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は、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが...記事の続きを読む 続きを読む

[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... 続きを読む

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]アイデアにセンスを感じる、アニメーションがかわいいナビゲーションを実装するチュートリアル | コリス

2013/02/18 103 users コリス 光源 スクリプト チュートリアル ナビゲーション

ナビゲーションの各アイテムをホバーすると、光源が移動するラーヴァランプ風エフェクトをスクリプトは使用せずに、スタイルシートで実装するチュートリアルを紹介します。 矢がハートに射貫かれてるのかわいいですね。 Css-only Lavalamp-like Fancy Menu Effect デモ 実装 利用規程 デモ デモは3種類あり、各アイテムをホバーすると、ラーヴァランプの気持ちいいアニメーション... 続きを読む