最近のWebサイトで見かける！ フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ
最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9
SVGアニメーションのサンプルを作ってみよう！ | ブランディング、Web戦略、ホームページ制作は東京都品川区五反田のアッタデザイン｜ATTAdesign
こんにちは！コーダーの平原です！ SVGを使ったアニメーションについて理解を深めたいなと思い、色々サンプルを作ってみました。SVGは、書き出しやCSSプロパティなどが、他の画像の扱いとまるで異なる為、隙間時間で慣れておきたいところです。 それではサンプルをご覧ください！ サンプルその1 「JAPAN」サンプルその2 「TAIWAN」サンプルその3 「SUN」まとめ1. サンプルその1 「JAPAN」Webサイトのローディング時などでよく見る、ロゴやテキストのアニメーションです。 文字のアウトラインをなぞりながら描画されていく動きは人気がありますね。 2. サンプルその2 「TAIWAN」こちらも先程と同様の、ロゴやテキストのアニメーションの2パターン目です。 綺麗な画質でアニメーションしてくれることの喜びを噛みしめたくなりますね。 3. サンプルその3 「SUN」SVGで円を描画する時に使
CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック
div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。 div要素ひとつだけで実装する テキスト付きの区切り線 まずは、最終のデモをご覧ください。 テキストの左右に水平線を引いた区切り線は、div要素ひとつだけで実装されています。モダンブラウザはもちろん、EdgeでもIE11でも大丈夫です。 実装のポイント div要素ひとつだけ、spanなど余分な要素は必要なし。 divに限らずブロック要素、h1で見出しの装飾としても使えます。 画像やSVGなども必要なし。 水平線は、カラー・サイズ・マージンの変更ができる。 フォントのサイズを大きくしても自動で調整される。 水平線はレスポンシブ対応。 背景が画像でも水
脱jQueryのためにしたこと - Qiita
この記事は加筆して「脱jQueryのためにしたこと - ICS MEDIA」に引っ越しました。 64000PV、480いいねとフロントエンド界隈でご好評いただいた内容です。ぜひご覧ください。 ※Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
baffle.js
Basic Usage With baffle installed, getting started is as simple as calling baffle() with some DOM elements. Those elements can be in the form of a CSS selector, a NodeList, or a single Node. You can also pass an options object. baffle operates on node.textContent, so it will flatten any child elements. It's best used on elements without children. // With a CSS selector let b = baffle('.headline');
テキストに背景画像を設定してクールなテキストを表示できる「TextHoler.js」:phpspot開発日誌
TextHoler.js by diegodalbosco テキストに背景画像を設定してクールなテキストを表示できる「TextHoler.js」。 次のような、テキストに背景画像を設定して、Photoshopなどで作ったような画像が動的に作成可能です。 HTMLの機能のみでは実現出来ませんが、重宝しそうなテクニックです。 実装は次のように<span>などでテキストを書いたらjQueryプラグインで背景画像を指定するのみ 関連エントリ 動くパーティクルを背景に設定できる「particles.js」 iOS7風の背景をボカしてオシャレにするエフェクト実装「oblurlay」 背景をアニメーションするパーティクル画像にできる「Particleground」
旧型のPCディスプレイに文字を映して雰囲気を出せるjQueryプラグイン「VintageTxt」:phpspot開発日誌
Demo for VintageTxt 旧型のPCディスプレイに文字を映して雰囲気を出せるjQueryプラグイン「VintageTxt」 なかなか変わり種のプラグインですが、次のような超旧型のPCに緑色の文字でテキストをアニメーションさせるプラグインらしいです。 デモのクオリティがなかなか高くて、何かに使ってみたいと思ってしまいます。 どういう動機でこのプラグインをつくろうと思ったかちょっと気になりますね。。 関連エントリ 光ながらアニメーションさせるエフェクト作成jQueryプラグイン「Flare」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 スプライトアニメーション作成用jQueryプラグイン「Phantascope」 CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 バウンスさせ
[JS]テキストにSci-Fi styleのかっこいいアニメーションのエフェクトを与えるスクリプト -Text Effects
ランダムな文字を次々に表示し、一つのテキストを生成するSci-Fi styleのアニメーションのエフェクトを与えるjQueryのプラグインを紹介します。 Text Effects Text Effects -GitHub ※上記のアニメーションgifは軽量化のため、間引いてます。実際はもっと多くの文字列が高速に表示されます。 Text Effectsのデモ Text Effectsの使い方 Text Effectsのデモ テキストのエフェクトにはいくつかのバリエーションがあります。 上記のアニメーションgifのようなシンプルなエフェクトをはじめ、複数のテキストを使ってループで表示したり、逆からテキストを生成するリバースなどがあります。 Text Effectsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。
文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。 ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね！僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。 そういうのをWeb上でもインタラクティブに出来たら最高ですよね？如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。 でも、それも過去の話！ とは言いたいところだが…まだまだ全然映像分野の足元にも及ばないのが現状… とは言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。 今回は、手間暇要らずで
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これなら実装がすごく簡単！タイプライターのようにテキストを表示するアニメーションを実装できるスクリプト typewritten-text
CodePen - Random Text Shuffle
Lining.js: Controlling Text Lines per CSS Selector | NOUPE