アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。 びよ~んとなるのが、かなり気持ちいいです。
![[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/4994629c775aed71d12401ca0a2937780f88e550/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042703.gif)
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg
From Below From Above Slide In (top) Slide In (right) Slide In (bottom) Slide In (left) Newspaper Side Fall Sticky Up 3D Flip (horizontal) 3D Flip (vertical) 3D Sign Fade In 3D Slit 3D Rotate Bottom 3D Rotate In Left Blur Let Me In Make Way! Deep Content Slip From Top From Top, Tilt Fall From Top to Bottom From Bottom to Top From Left to Right From Right to Left From Above to Below From Below to A
Are you searching Free Guest Posting Submission Site? Before you submit, check out this list of guidelines to make sure your post is up to par. By following these simple tips, you can increase your chances of having your guest post accepted - and make a great impression on the blog's regular readers.> No one's life is as perfect as it seems on social media. So next time you're feeling down, rememb
@JUNP_Nです。UIデザインのプロ集団、Goodpatch(グッドパッチ)がベータ版として公開しているプロトタイピングツール「Prott」のiOSアプリを10月1日にリリースすると発表。モバイル開発者は見逃せないプロトタイピングツールになりそうです。 もっと簡単にプロトタイプを作ろう!プロトタイプを共有してコミュニケーションを!プロトタイプを作ることの重要性はGoodpatch(グッドパッチ)の土屋尚史氏が色々な場所で発言していますが、そんなGoodpatch(グッドパッチ)が手がけるプロトタイピングツール「Prott」のiOSアプリが10月1日にリリースされることが発表されました。 参考:CSS Nite LP33フォローアップ 土屋 尚史さん「ディレクター・デザイナーのためのプロトタイプ制作とシナリオ作り」 「Prott」は「ラピッドプロトタイピング」と「ラディカルコミュニケーショ
こんにちは。MUUUUU.ORGの中の人こと、 Quoitworks(クオートワークス)のムラマツ(マツムラではありません)です。 ブラウザの進化により昨今のwebサイトでは色々なアニメーションが実装できるようになってきました。そこで今回は動きに対する感性を磨き、「もっと気持ち良い感じに」というクライアントの要望をスマートにかなえる事ができるように、 セクシーだと思ったUIアニメーションを、エイヤエイヤとまとめてみました。(すみません!サイト負荷が高くサーバーがダウンしてしまうので、一部リンクのみになってます) line25.com https://dribbble.com/shots/1448379-Lookbook-nu-app https://medium.com/ui-ux-articles/3d1b0a9b810e http://thedesigninspiration.com/
アニメGIFに何本か縦線を入れるだけで、アニメGIFを3D化出来ると言う信じられない話が、本日欧米で話題になっておりました。 それでは早速12連発でどうぞ! 1 2 3 4 5 6 7 8 9 10 11 12 縦線の奥行きでの位置(Y)を決めて、その前後に物をはみ出させたり引っ込めたりすることによって、人間の目があたかも本当に奥行きがあるかのように錯覚してしまうんですねぇ。 いやしかし、我々人間の脳と、こんな事を思いつく方が素晴らしい! 普段は欧米の最先端テクノロジー業界情報を配信しておりますので、twitterやFacebookページ、Google+で是非フォローをお待ちしております。 また、記事の買い取り行ってますのでKataribeも是非よろしくお願いします! GIFs: 3D pictures become possible with two straight lines
人間の目なんて脳なんていい加減だからこそ楽しいです。 ファイルダウンロード、より速くより快適にと技術は日々進歩に向って頑張ってます。一方でそんな技術の裏でより速いような気にさせる研究も日々努力を重ねているようです。 アメリカはペンシルベニア州ピッツバーグにあるカーネギーメロン大学でVhris Harrison氏がZhiquan Yeo氏とScott Hudson氏と共に、ローディングバーにアニメーションを加えることにより目の錯覚が起き、実際よりも10%ほど速いように感じるという発表をしています。 AppleのOS Xは速く感じるようなトリックをすでに使っていますが、Harrison氏は研究でこういったトリックはとても大きな効果があるとかなり後押ししています。 発表内容は、リズムのある刺激は時間のワープ効果になるとか、ある状況の中で人はどう動きをとらえるかとか。この研究でHarrison氏の
デスクトップやスマフォやタブレット向けのページやアプリのユーザインターフェイスには、多種多様なアニメーションが使用されています。 ユーザーの助けになるよう目的にあった有意義なアニメーションを実装できるよう、ユーザーのインタラクションにフォーカスを合わせカテゴリに分けたMeaningful Transitionsを紹介します。 Meaningful Transitions アニメーションは、目的ごとに6つのカテゴリに分けられています。 下記に、6種類のアニメーションのカテゴリと事例をいくつか紹介します。 Orientation Spatial Extension Awaking Controls Highlight Feedback Feedforward Orientation オリエンテーションは表示されているオブジェクトから別のオブジェクトを表示するもので、スクロール、ポップアップ、ス
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く