How to Make Instagram
OUTDATED This blog is a bit outdated, and uses gl-react-native 1.3. I highly recommend checking out https://github.com/gre/gl-react-image-effects which was inspired by this post and uses gl-react-native 2.*! Intro Instagram is a fantastic app and a great concept to model after for learning fragment shaders. We won't get too deep into fragment shaders but I'll take a little bit about what they are
この記事は書いてから 約 5年 経過しています。 1年以上経過しているので情報が古い可能性があります。 Glitchは電子回路のバグで起こるノイズです。（上の画像は普通の画像をGlitchを何回も重ねて作った画像になります。）jQueryやcssを少し追加するだけで、ちょっとしたアクセントになったりします。ただし、やり過ぎは注意が必要です。 Glitchが出来るプラグイン等を紹介します 今回はGlitchの紹介になりますので、コードは無しです。参考ページを載せときますのでそちらで確認してください。 jQuery Glitch Plugin 画像をグリッチさせたい時に使うと便利です。試しに使ってみるのにはおすすめです。 参考：http://okikata.org/study/test28/ glitch.js 画像のみやdivごとGlitchを掛ける事ができる様です。glitch.jsは工夫
A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which
A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase. In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a
A tutorial on how to create some subtle and modern caption hover effects. Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects
Markup example This example uses all default settings. <a href="#myToggle" class="panel"> <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" /> </a> <div id="myToggle" class="cap-overlay hide"> <h5>Cupcakes</h5> <div class="content"> Name: cupcakes.png<br /> Photography: Ryun Shofner<br /> <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> <a href="jav
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now. Mail: Since the arrival of the jQuery library, the life of JavaScript programmers have gotten a lot easier because now it’s simpler to develop web 2.0 applications. With jQuery, the programmers can keep their code organized and concise, which is the major slogan of the library, “write less, do mo
WebGL FilterはWebGLを使ったWebベースの画像イフェクトソフトウェア。 WebGL FilterはHTML5/JavaScriptのフリーウェア（ソースコードは公開されている）。HTML5では様々な新しい機能をWebの世界に提供する。その一つとして知っておきたいのがWebGLだ。GPUを使ったグラフィカルな表示処理が可能になる。 イフェクト例 だが一般的なWeb開発者からすると敷居が高く、ゲームや3Dグラフィックスを必要としない限り使わない技術に思えてしまう。だがWebGL Filterを見れば考えが変わるかも知れない。 WebGL Filterは画像にイフェクトを施すWebアプリケーションだ。WebGLを使っているので高速、かつリアルタイムに処理が施せるのが特徴になっている。明るさやコントラスト、ぼかしやズーム効果など様々なイフェクトが用意されている。 他のファイルを開く
軽量で高機能なjavascriptライブラリとして様々なWEBで導入されているjQuery。非常に高機能で様々なエフェクトや動作を実現できますが、今回紹介するのはjQueryで実現する3Dエフェクト集「9 Best jQuery 3D Effect Plugins」です。 5. jQuery faux-3D effect jQueryで動作するエフェクトの中でもフリップで動作するものや奥行きのあるシーンを実現するなど様々な3Dエフェクトが収録されています。今回はその中から特に気になったものをいくつかプックアップして紹介したいと思います。 詳しくは以下 ■1. rotate3Di – Flip HTML content in 3D マウスオーバーでフリップを実現するjQueryです。 ■4. jQuery 3D Rotator 三次元座標軸で動作するタグクラウド奥行きを感じさせるエフェクトで
30 Awesome Photoshop Text Effects Tutorials クールなPhotoshopテキストエフェクトのチュートリアル集。 実にクールで秀逸なテキストエフェクトがチュートリアル付で公開されていて大変参考になります。 Flowery Text Effect Papercraft Text Effect Colorful Glowing Text Effect Smoke Text Effect Ironman Text Effect Star Wars Text Effect Layered Glowing Text Effect 6 Quick Text Effects From Scratch Spectacular 3D Text Effect Soft Stylized 3D Type Candy Coated Text Effect Realistic
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
