最近の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
Typed.css - Live Demo
Examples Type a single string @include typed("I'm walking here!"); Type two strings @include typed("There's a snake in my boot 🐍", "To infinity and beyond 🚀"); There's a snake in my boot 🐍 Type one string, adjust the speed of type and pause-deleted properties (2 methods) @include typed("You had me at hello", [.1, null, null, .5] ); // ... or ... @include typed("You had me at hello", (type: .1,
jquery-bubble-text - テキストアニメーションのjQueryプラグイン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アニメーションはただ静的に書かれているのに対して何倍も見た目のインパクトがあります。ともすると見逃されてしまいがちなテキストもアニメーションすることによってユーザに見てもらえるようになります。 そんなアニメーション、特にテキストを動かしてくれるライブラリがjquery-bubble-textです。 jquery-bubble-textの使い方 jquery-bubble-textの基本的な使い方です。jQueryプラグインなので使い方が簡単です。 var properties = { element: $element, newText: 'new Text', }; bubbleText(properties); 動いているところです。文字が書かれた後、動的に幅が調整されているの
[JS]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js
[JS]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js
![[JS]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/39a842dd1c3072a09cb6395628d39392bea2daae/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017012501.png)
tply - タイプライター風入力をWebサイトに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました タイピングをそのまま再現するソフトウェアは昔から人気があります。カーソルを表示したり、タイプライター風に一文字ずつ表示するなど、様々なバリエーションがあります。最初からすべて表示されているよりもユーザの視線を引きつける効果もあります。 そんな文字入力を再現するJavaScriptライブラリがtplyです。という新しいHTMLタグを使って簡単に利用できます。 tplyの使い方 tplyのサンプルです。 <div id="source"> <type> Why, hello there! How are you? I'm good! </type> </div> <div id="destination"> </div> <script> tply.animate( document.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これなら実装がすごく簡単！タイプライターのようにテキストを表示するアニメーションを実装できるスクリプト typewritten-text
