WEBサイトで文字にリッチな動きを付けてみよう【テキスト・SVG】 - fa lab
昨今のWEBでは先進的な技術を使いユーザーを魅了するサイトが多いように感じます。 先日、リッチな動きとより良いユーザー・エクスペリエンスをあなたのサイトにプラスする方法と言うSmart Transitionの記事を書きましたが、その内容に近いユーザー・エクスペリエンスを向上させる方法です。 今日はWEBサイトで文字に動きを付ける方法をご紹介したいと思います。 WEBサイトで文字にリッチな動きを付けてみよう 目次 テキストデータにエフェクトを付ける方法 SVGで書き順をアニメーションする方法 おまけ：FlashファイルからSVGを作れるSwiffy テキストデータにエフェクトを付ける方法 まずは先人たちの作例を見てみましょう！ Quoitworks Quoitworksさんのサイト、ページに入るとページタイトルがアニメーションします、カッコイイですね。 このようなエフェクトを実装するに
GreedyNav - これは良い！レスポンシブにメニュー数を変化 MOONGIFT
スマートフォンやタブレットが増えるのに伴ってWebの世界ではレスポンシブなデザインが求められるようになってきました。単に各デバイスに向けて最適化するだけでなく、情報の整理も大事な要件になっています。 今回はWebサイトをレスポンシブにする上での面白いソフトウェア、GreedyNavを紹介します。このアイディアはなかなかイケてますよ。 GreedyNavの使い方 GreedyNavを適用しているサイトです。上のメニューに注目です。 幅を狭めました。 さらに狭めました。 縮んだ分はクリックすると出てきます。 GreedyNavは画面の幅によってメニューを出す個数を可変できるのがポイントです。つまり左側から大事なメニューを並べていくことで、スマートフォンやタブレットでも操作性を損なうことなく使えるようになります。 GreedyNavはHTML5/JavaScript製、MIT Licenseのオ
animatedModal.js
animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions. DOWNLOAD VERSION 1.0
CSS3 Animate It Examples - Animate Elements on Scroll
Include css3-animated.js at the end of your file and animations.css in the head. Once you have done that you can just define "animatedParent" as the parent class which is what will trigger the child class "animated" to animate whichever animation is defined, here we are using "bounceInDown". Click here to see an example of all the CSS animations. This CSS animation library utilises the lastest har
レスポンシブコーディングのスニペットいろいろ - やっぱりWebが好き - Writing Mode
コーディングを自身でやることは少なくなってきたけれど、勘が廃れないように今でも時々デザインしたり、コーディングしたりってのも大事にしてます。たまにデザインやコーディングをするのは気分転換にもなるし、新しいテクニックを知っておくことだってまだまだ大切だと思うし。 今の僕は、作る仕事はできる限り任せる立場だと思うので、あくまでもやり過ぎない程度に、って考えてますけど。というわけで、最近覚えたスニペットまとめ。 レスポンシブでサイトを作ることが増えています。 予算やスケジュール、または技術的な問題など、レスポンシブで構築するのが難しいケースもありますが、今の僕はできる限りレスポンシブ優先で考えたいと思っています。 ワンソースで考えたほうが運用は効率的だと思うから。 Writing Modeは僕にとってレスポンシブデビューだったサイトで、今思うと「こうしておけばよかった」ってところはいっぱいありま
マテリアルデザインをベースとしたフレームワーク『Materialize』使ってみた - tmlife
Google が発表してからちょこちょこ話題に上がっているマテリアルデザイン. 今回はそのマテリアルデザインをベースとしたフレームワーク『Materialize』使ってみたのでそのメモです. 毎回 bootstrap じゃ飽きちゃいますしね♪ Materialize って？ 公式より A modern responsive front-end framework based on Material Design 「マテリアルデザインをベースとしたモダンでレスポンシブなフロントエンドフレームワークです.」 的なことが書かれてますね. ざっくり言うと bootstrap のマテリアルデザイン版です. less ではなく sass 使ってるとことか若干インターフェースが違ったりしますが, 基本的には同じ感じで使えます. Reference Official Github cdnjs Mater
BootstrapをベースとしたフリーのUIKit「Flat UI」:phpspot開発日誌
Flat UI BootstrapをベースとしたフリーのUIKit「Flat UI」。 BootstrapをベースとしているのでBootstrapの使い方や機能は使えてデザインが全く別物になってます。 Bootstrapで作るとあきらかにBootstrapな感じが出てしまいますが、ちょっと個性を出したいという場合はいいかもですね。 こうした派生スタイルが多数でてきて、Bootstrap自体がjQueryのようにデファクトスタンダードになってくると、多数の派生ライブラリが出てきてより開発者にとってはいい環境になりそう。 関連エントリ Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Bootstrapで
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
レスポンシブWebデザイン対応のCSSをカラム数やマージンを指定してダウンロードできる・34Grid
昨日に続き今日も似たような内容 ですが。グリッドレイアウトの レスポンシブWebデザイン対応の CSSフレームワークですが、こちら はグリッドのカラム数やマージン を指定できます。 どんどん便利になりますね。最近同じ内容の記事ばかり書いてて自分がスパマーみたいな気分になってきましたが気にしないようにします。 グリッドレイアウト x レスポンシブなフレームワーク。DL前にカラム数などをカスタマイズ可能です。 カラム数などを入力してダウンロードします。逆に、数値を入れないとダウンロードできない様になっています。 デモファイルです。ウィンドウをリサイズするとそのサイズを上部に表示してくれますので調整しやすいのでは。 以下より利用できます。 34Grid
画像の一部をズームアップできるjQueryプラグイン「jqZoom」
画像の一部をズームアップできるjQueryプラグイン「jqZoom」を紹介します。 jqZoom １．概要 Amazonをはじめとする、オンラインショッピングサイトですっかり定着した機能として、画像のズームアップがあります。商品の質感やディテールなど、念入りに確認したいときに大変重宝します。 本エントリーで紹介するプラグインを利用すれば簡単に設置することができます。 画像ズームアップのプラグインはいくつか出回っているようですが、元画像を単に拡大するものが多く、商品の質感やディテールを見せるものとしては実用的ではありません。 その中でjqZoomプラグインは、元画像と別にズームアップ用の大きな画像を用意できるので使い勝手がいいと思います。また豊富なオプションも用意されています。 ２．サンプル サンプルを作りました。 もっともシンプルなサンプル サムネイルで切り替えられるサンプル ということで
HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！ こうパッとガッとスッと設定したい！ そんな希望を叶えてくれるのが「FLAutoKerning.js」です！ ポイント1：導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
[JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider - かちびと.net
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード <script type='text/javascript' src='http://ajax.googleapis.c
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tristan (T4T5)
横からスライドするドロワーメニューのjQuery、JS、CSS3のプラグインまとめ！
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
https://stackstock.net/archives/2012/
TechCrunch | Startup and Technology News