END ALS RUN｜あなたの走りがEND ALSヘの一歩になる
NEWS 2016.06.29 END ALS RUNのプロモーションムービーを公開しました 2016.06.19 NIKE+ RUN CLUB OMOTESANDO でイベントを実施しました INTRODUCTION ALS（筋萎縮性側索硬化症）という病気を知っているでしょうか。意識ははっきりしているのに、身体が徐々に動かなくなっていき、ついには瞼さえ開けなくなる難病です。そしてALSは、誰しもが発症する可能性があります。にもかかわらず、治療法や原因さえも明らかになっていません。そんなALSを終わらせる。それは果てしないゴールではあるけれど、私たちEND ALSチームは、1歩でもゴールに近づくために、みんなで「走り出したい」と考えました。みんなで「走る」ことが、募金につながり、研究につながり、いつかはEND ALSの実現につながると信じて。 What's END ALS RUN このプロ
Animista - On-Demand CSS Animations Library
AboutAnimista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea wa
ハイパフォーマンスCSS3アニメーション——60fpsを実現するベストプラクティス
すっかり普及したCSS3アニメーション。ハイパフォーマンスなアニメーションを実現する、ちょっとした書き方のポイントとは？ モバイルアプリケーション内の要素をアニメーションさせるのは難しいことではありません。でも、この記事を読めば、さらに適切な方法でアニメーションさせることができます。 最近、多くの人がモバイルでCSS3アニメーションを使っていますが、正しく使っていない場合が多くあります。開発者はしばしばベストプラクティスを無視します。なぜなら、多くの人はなぜCSS3アニメーションが存在し、なぜ急速に浸透しているのかを理解していないからです。 モバイルデバイスのスペックの幅はとても広いので、もしコードを最適化しなければ、シェアが高い端末では標準以下の体験しか提供できないでしょう。 注意：いくつかのハイエンドなデバイスは可能性の限界に挑んでいますが、世界中の多くの人はそうしたスペックモンスター
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET
こんにちは、@yoheiMuneです。 最近githubで人気になっているtobiasahlin/SpinKitというレポジトリ（Starが2,500個も！）では、 CSS3アニメーションを使った心地よいアニメーションのサンプルが公開されています。 今回はそのレポジトリの内容を拝借して、各アニメーションの実装内容を学んで、自分も書けるようになろうというためのブログです。 SpinKitで公開されているCSSアニメーション 公開されているものは執筆時には全部で８個あり、http://tobiasahlin.com/spinkit/でデモが確認出来ます。 綺麗なものがいっぱいあって、個人的には好きです。 以下ではそれぞれのアニメーション内容を拝借して、実装内容を学びたいと思います。 <style> .spinner1 { width: 30px; height: 30px; backgroun
![[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/53d67670ab9a4d96908df62696837d176e920257/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F297.jpg)
Icon Animations Powered by mo.js | Codrops
Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot “Like Animation” by Daryl Ginn. Maybe you’ve already stumbled across mo.js, a very powerful motion graphics library for the web made by Oleg Solomka. You can do tons of awesome things with it and today we’d like to share our take on some icon animations using the li
Creative SVG Letter Animations | Codrops
An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way. Maybe you’ve seen some of those interesting text animations recently, like the one shown on the website of Control Films or in hover effects for image captions: letters disappear and appear in an artistic way, getting drawn along their lines. Whi
Pixel Joint - The Internet Pixel Art Gallery
This week's challenge idea is brought to you by Umbohr. Draw a scene with animated long hair. This can be a character throwing their hair back or just hair blowing by the wind on the background of a beautiful sky. Only the hair (of at least one character) needs to be animated to meet the criteria of this challenge. Animating anything else in the scene is completely optional. Drawing an entire char
d3.jsが格好良すぎてやばい - 生存戦略型プログラミング
d3.jsとはなにか d3.jsとはData Driven Documentの略です。 データ可視化のためのjavascriptのライブラリです。簡単にデータをグラフ描画してくれたり、ちょっとしたアニメーションも作成することができます。 今回はd3.jsの簡単な使い方とか魅力とかを解説していきたいとおもいます。 準備 まずは、HTMLファイルを用意します。d3.jsを導入するには以下の行をbodyタグ内に挿入するだけで使うことができます。 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 使い方 d3.jsの操作は主に以下の手順で行います。 SVGを作成 要素を選択 その要素に対して、アニメーションをつけたりイベントをつけたりなどの操作をおこなう。 SVGとは d3.jsではSVGにグラフや図形を書いて
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
SVGで円グラフを描くシンプルな方法 | KSK-soft.com
SVGで円グラフを描くシンプルな方法を思いついたのでシェアしておく。既に先人がいるかもしれないが、そんなに頑張ってチェックしてはいない。 例えばCSSのanimationと組み合わせればこんなグラフが描ける See the Pen SVG PIE Chart with CSS animation by keisuke Takahashi (@ksksoft) on CodePen. ポイントは以下の通り。 svgのcircleで扇形を描く circleのfillはなく、太いstrokeで「塗り」に見せかける 扇形の角度は破線の長さで調整する jsは不要。 以上の説明だけではよくわからない人の為に、以下に順を追って解説する。 1.SVGで円を書く インラインsvgの円はcircleタグで書けます。 <svg viewBox="0 0 200 200"> <circle cx="100" cy
SVG Drawing Animation | Codrops
A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them. SVG is finally becoming a more utilized and fun website component. It’s really powerful and there are many creative possibilities for fun effects on a website using SVG. Today we’d like to share two experimental concepts with you that
Motion UI | Playground from ZURB
Motion UI is a Sass library for quickly creating CSS transitions and animations. We originally bundled this code with Foundation for Apps, but we've souped it up, made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6. Getting Started Install Motion UI with Bower or npm. The package includes a CSS file with a bunch of premade transitions and animations, along wi
https://io2015codelabs.appspot.com/codelabs/web-animations-transitions-playbackcontrol
In this codelab, you’ll learn how to use the Web Animations API to enhance a single-page HTML website. You'll add transitions between content, and use animations to support an effect based on the scroll position of the page. The final site will run amazingly on both desktop and mobile, in all modern browsers. Check out this preview: What you’ll learn Use animations to create striking transitions b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
ディズニーアニメの12の基本原則をグラフィカルに紹介するGIF画像
NOPKARIAN
The Power of PowerPoint | 誰でも、見やすく美しいパワーポイントデザインを
Spirit - The animation tool for the web
kirupa.com - Shocked Resource for Making Designers better Developers!
