Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービスCSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオンラインサービスを紹介します。 こういったコード生成は探せば見つかるかもしれませんが、まとまってると便利ですね。
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。 スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
Animatable: One property, two values, endless possiblities
box-shadow ◀ ▶ From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou Tweet
[JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly
デモのアニメーション Gridlyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script> <script src="javascript/jquery.gridly.js" type="text/javascript"></script> <link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" /> Step 2: HTML 各パネルはdiv要素で実装し、それらをラッパーで包みます。 <div class=
『スマートフォンで動くリアルタイム3Dグラフィック』
はじめまして。 アメーバ事業本部コア室コアディベロップメントグループの新屋です。 コア室では3Dアニメーションライブラリの開発を行っています。 リアルタイム・プリレンダ問わず3Dモーショングラフィックが好きで趣味でも3Dの制作をしています。プリレンダはTAKCOMさん、WOWのdaihei shibataさん、ogaoooooさん、リアルタイムはMasato Tsutsuiさん等の作品が好きです。 リアルタイム3D 昨今のスマートフォンの処理能力の向上に伴い、webブラウザでも一昔前にPCで動作していたようなリッチなコンテンツも高速に処理できるようになりました。 スマホサービスでは必ずと言っていい程CSSやjavascriptでのUI・演出アニメーションが組込まれています。 そうしたアニメーションの表現力を引き上げる方法の一つとしてリアルタイム3Dを紹介します。 リアルタイム3Dを扱う言語
Ui General Blog
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
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ
モダンブラウザの普及により、以前に比べるとCSS... / CSSアニメーションライブラリ / Animate.css他...全19件 モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを見ただけでは直感的に分かり辛かったり、自由に使いこなせるには慣れと経験が必要です。 そういった悩みを解決してくれるアニメーションライブラリが存在するのをご存氏でしょうか？ちょっとしたCSSアニメーションであればライブラリを使うことでいとも簡単に組み込むことができます。 そんなありがたーいライブラリを集めました。
Magic CSS3 animations by miniMAC - minimamente
Come sapete, amo molto il linguaggio CSS ed in particolare mi piace sempre andare oltre, in questo caso ho voluto creare un pacchetto di animazioni in CSS3 che potrete usare liberamente per i vostri scopi e quindi nei vostri progetti web, si chiama Magic! Il progetto è hostato anche su GitHub, questo per avere i migliori pareri dai migliori sviluppatori e quindi migliorare il codice, renderlo il p
[jQuery/Javascript]jQueryによる無限ループするアニメーションと三角関数の話 | Wood-Roots:blog
DEMO 最近はキービジュアルにFlashを使用せずにJavascriptによるアニメーションを使うことが増えてきました。GalleryViewのようなスライドショーふうのプラグインを設置するだけのケースも多いですが、ちょっとでも凝ったことをしたいと思い考えたり調べたりしていると三角関数がなかなか使えるということが分かってきました。 正直苦手な内容の話なのですが、簡単な処理のために使う程度ならコピペで何とかなりました。 余談ですが・・・三角関数とは 言うまでもありませんが、サイン・コサイン・タンジェントというやつです。確か高1か高2の数学で習うものだったように思います。アニメーションで使用するのは大抵sinとcosです。 y = sin(x) という式の場合、xが増えていってもyは-1と+1の間の値しか取りません。グラフにあらわすと波線（正弦波といわれるもの）になります。 要素を回転させ続
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
ちょっとしたeasingの解説 - Qiita
function easing(time, begin, change, duration) { var s = 2.5; if (t / d >= 1) { return b + c; } return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; } //分かりやすく分解 var e = t / d - 1; c * (e * e * (3.5 * e + 2.5) + 1) + b; //+ bはスタートからの値を求めるため、実際にイージングを行なっているのはその前の式。 //かつ、cが最終変化量でイージングの性質として0 -> 1に変化する必要があるから、 //実質イージングを成しているのはcとbを抜いた部分。 (e * e * (3.5 * e + 2.5) + 1) //さらに、最後に+1されているため、その前の部
CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」
CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」 CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」を作ったので公開しておきます。 fpsAnimation.js このライブラリを読み込んだ後に、次のようなスクリプトを実行することでCSS3のkeyframe Animationに変換してくれます。 fpsAnimation( "div:hover",//target "sampleAnime",//animation name 100,//fps [{ f:10, c:"height:100px;width:500px;" },{ f:10, c:"height:500px;width:500px;" },{ f:10, c:"height:500px;width:100px;"
aromalize.jp
aromalize.jp 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
領域横断が表現の可能性をひろげていく ｜ メディア芸術カレントコンテンツ
アート、エンターテインメント、アニメーション、マンガの４部門において優れた作品を顕彰するとともに、受賞作品の鑑賞機会を提供するメディア芸術の総合フェスティバル、文化庁メディア芸術祭。本連載では、同芸術祭に深く関わる人たちへのインタビューを手がかりに、文化庁メディア芸術祭について考えていきます。（全4回）。 12月13日に今年度の受賞作品が発表され、アニメーション部門の大賞を受賞した大友克洋さんの短編アニメーション『火要鎮』に注目が集まっています。今回はアニメーション部門の審査委員を務めた古川タクさんにお話を伺いしました。自身もクリエイターとして1960年代から数々のユーモラスな短編アニメーションを手がけてきた古川さんに、近年の応募作品の傾向から今後のメディア芸術祭への期待をお聞きしました。 日本のアニメーションのおもしろさとは？ 古川さんは日本の応募作には「勝手気ままな個性が光る」作品が多
Form Follows Function
Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sidebar Transitions
OpenText / The Power of Information on Vimeo
Tunnel vision 3D CSS
How Search Works – Inside Search – Google
