2段階でアニメーションさせるスクロールエフェクト | oku-log
最近、よく見かけるスクロールすると文字とかの背景が横からブワッと出てきて、そのままブワッと消えて文字が現れるみたいなエフェクト。 例えばこういうのです。 https://tympanus.net/Development/BlockRevealers/ シンプルなレイアウトでも動きをつけることで単調にならないってメリットもあり、こういうエフェクトは重宝します。 実装する場合、いくつか方法はあるのですが今回は二つほど紹介します。 プラグイン「Block Reveal Effects」を使う方法 先ほどリンクを貼った「Block Reveal Effects」はcodropsで公開されています。 まずは以下のページの「Download source」から一式ダウンロード可能です。 https://tympanus.net/codrops/2016/12/21/block-reveal-effec
フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8 - NxWorld
いずれもテキストがフェードや回転といったアニメーション付きで表示されたり、一文字ずつタイピングされているような見せ方を実装することができるjQueryプラグインです。 同じようなプラグインが並んでいる感じですが、軽量なものやオプションが豊富に揃っているもの、日本語にもしっかり対応しているかなどそれぞれ特徴もあるので、こういったものを使いたい時に少しでも選択肢が広がるよう良さそうなものを備忘録兼ねてまとめました。 Letter by Letter JS Letter by Letter JS はテキストを徐々に表示させる効果を簡単に実装でき、1KBという軽さも特徴のjQueryプラグインです。 デモ画面などでは全て英語が使われていますが、日本語でも動くのは確認できました。 オプションとして表示スピードと表示タイプを指定することができ、表示タイプでは単純に表示させる'show'とフェード表示さ
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
CSSで複数行に渡るテキストにマーカーを引いたようなエフェクトを付ける | WEMO
今回は、CSSで複数行に渡るテキストにマーカーを引いたような表現を実装していきます。 複数行に渡ってラインマーカーを引ける代わりに、マウスホバー時のアニメーションはできません。 マウスホバー時にラインマーカーを引くようなアニメーションは以前別の記事でメモしましたので、そちらを参考にしてみてください。
ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン - NxWorld
サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインをいくつか紹介します。 案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :) サイトにコナミコマンドを埋め込む「Cheat Code」 サイトで↑↑↓↓←→←→BAのようなコナミコマンドを入力するとメッセージを表示できるプラグイン。 使い方は「Cheat Code」よりjquery.cheat-code.jsをダウンロードし、jQueryと合わせて読み込みます。 例としてコードは下記のようになります。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.c
jQueryプラグイン「Isotope」でIEの不具合を修正する: JavaScriptメモ
jQueryプラグイン「Isotope」でIE6の不具合を修正する方法。 Isotopeではエフェクトを制御する為、要素にfilterが自動的に適応されます。その為、marginやpositionを指定した配置を行った場合、表示がおかしくなることがあります。 $('#unitItem').isotope({ filter: "" , animationOptions: { duration: 250, easing: 'linear', queue: false , complete : function(){ if($.browser.ie){ $(this).attr("style",$(this).attr("style").replace("alpha(opacity=100)","")) } } } }); animataionOptionsではanimateメソッドのオプション
タイルレイアウトjsIsotope
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
英字をぐるぐるシャッフルした感じで表示するjQueryプラグイン「Shuffle Letters Effect」
twitter facebook hatena google pocket 英字を、映像などで見るシャッフル感を与えてみると面白い表現になります。 Shuffle Text Effect with jQueryを利用することで可能になります。 sponsors 使用方法 Shuffle Text Effect with jQueryからファイルをダウンロードします。 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script src="jquery.shuffleLetters.js"></script> <script type="text/javascript"> $(function(){ $("#id名").shuffleLetters(); }); </script> あとは効果を与えたい要
手軽にテキストをシャッフル演出できるjQueryプラグイン「jQuery Shuffle Effect」 | A40
私のポートフォリオサイト「KATOSHUN.com」のオープニングで、テキストのシャッフル演出用に作ったjQueryプラグインを公開します。 ３年くらい前にベースとなるJavaScriptを作ったのですが、KATOSHUN.comのリニューアルにあたって、jQueryプラグインに書き換えたものです。 実は作ってから他にも似たようなプラグインがいくつかあることを知りました…orz でもシンプルでわかりやすいから使ってくれる人もいるだろうと思い込むことにして、公開に踏み切りたいと思います。 デモ 簡単にテキストにこんな効果を加えることができます。（「デモ」のボタンを押してみてください） デモ 使い方 まずは「jQuery.shuffleeffect.js」をダウンロードし、HTMLに読み込ませます。 <script type="text/javascript" src="jquery.js">
「生える」表現 | _level0 - KAYAC Front Engineer Blog
失礼、生やしすぎました。 毛や植物など、形状に対して「生えている」ような見た目にしたい時の考え方のメモです。 文字から何か生えてるとか、よく見るけどかっこいいな、どうやるのかなと思ってちょっと試してみました。 馬の絵から生やすとこんな感じ これはバイク・・毛の量多すぎて毛虫みたいですが これは骸骨です。パラメータ調整に若干ミスって寝ぐせみたいになってます。 以下、解説です。 考え方 １：シェイプを構成する頂点に対して何かを生成すればよい 「生える」ってずいぶん複雑そうだな、と一瞬思いましたが、単純に頂点から何か出てくる表現を 複製する、という表現ができれば目的は果たせそうです。 ２：線の進む方向と直角なベクトルで生やす。左なら左、右なら右に固定で 例えば四角形に毛が生えている表現は、一筆で四角形を描いた時に、向かうベクトルに対して左側に毛が生え続ければ 四角から毛が生えているように見える。
AS3 bitmap mosaic class | Julian Kussman, UX & Product Designer
Hello, Nice job but i have a problem trying to use it in Full Browser. I put a mosaic image in background (full browser), and the image is supposed to resize when i resize my window. It works well but the mosaic image sometimes draw horizontal and vertcal outlines around the mosaics… Is it normal ? Is it possible to fix it ? Thank You ! Cédric from Montreal… [Cedric, your stage scale mode is proba
Elephant LAB.
最近Flashの勉強を本格的にはじめました。春ですし。新学期ですし。 いままで何度かFlashを勉強しようかと思ったことはあったんですけど、なかなか本腰をいれるまでには至らなかったわけなんです。勉強しないのに本を買っただけでレベルアップした気分になるタイプなので、読んでいない技術書のストックは山ほどあります。 というわけで、勉強用に作ったサンプルを載せていこうかと。 あまり参考にはならないかもしれませんが、サンプルを作るための概要は書こうかと思います。おそらく、僕がサンプルを制作する際に参考にさせていただいたサイトを見ていただいた方が勉強になりますね。 参考サイト：にゃあプロジェクト さん モザイク処理 (1) 参考サイト：ITPro Flash8入門講座 さん 第33回 第40回 まず第一弾は、BitmapDataクラスを使ったmosaicトランジションです。画像は一応XMLでパス
Best Hookup & Sex Websites - Hookup Expert
You require someone to rock climb, so it’s a fun way to get to know somebody new or strengthen an current relationship. Duh, more excellent tools for their users even trying out Dating-Treff.com! Your married lesbian lover might now opt to get divorced and be with you personally. Because of this, Something More currently features a waitlist to connect. Starts’ designer stage to empower designers t
BIT-101: BIT-101
Welcome! You might notice things look a bit different here. Links to earlier versions of this blog: Version 1: 2003 - 2017 Version 2: 2017 - 2023 If you're wondering why I changed it up, read this. Latest Post: March Update Oof! It’s been a while. Why the silence? Portland A few days after my last post, I headed out to Portland, OR for several days. A couple of my older kids have wound up migratin
Saqoosha :: 鳴かぬなら、燃やしてしまえホトトギス。
鳴かない→死んでいる→火葬する？→燃やしてしまえ→御意 というわけで、土曜日まであんまし時間がないので、そろそろ燃やしはじめないとなのでリサーチを始めます。炎エフェクトでまず思いつくのはデモ絡みだな。“demo fire effect” ぐらいでググってみる。いきなり demo effect liblary 発見。炎エフェクトも入ってる。コレはすごくベーシックなアルゴリズム。AS でもすぐ書けそう。gskinner の人が炎コンポーネント作ってる。けどあんまし炎っぽくないなあ。うーむ、Fire Effect はベーシックすぎて、ソースを見つけても古いからアセンブラで書かれてて読めないなあ。。 昔のデモなんかは今の Flash よりももっともっと貧弱な環境でも動くように作られてるから、リアルタイム系のエフェクトのヒントになりそうなものがいろいろと落ちてる。じっくりまとめて調べてみたいところ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pull Off Awesome Scroll Effects With Stroll.js
PEACE SHADOW PROJECT
http://www.designwalker.com/2009/06/flash-effect.html
http://www.look-o.ru/
New Timeshift Trailer