HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
Accordion | jQuery UI
Accordion Displays collapsible content panels for presenting information in a limited amount of space. Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover. The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.13? Compatibility with recent jQuery versions (up to 3.6): Usage of deprecated jQuery API
<!--:ja-->jQueryの最新版を読み込む方法<!--:--><!--:en-->How to load latest jQuery<!--:-->
■jQueryの最新版のpath [html ruler="true"] <script src="http://code.jquery.com/jquery-latest.js"></script> [/html] ■packageも読み込めます。（圧縮されていない状態） [html] <script src="http://code.jquery.com/jquery-latest.pack.js"></script> [/html] ■実際使用するとしたらこっちだと思います。 [html ruler="true"] <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> [/html] ScriptSrc.netでコピペ
面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」:phpspot開発日誌
Textualizer | K. Risk - JavaScript Refined 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストが歯抜けの状態から、アニメーションしながらテキストが埋められたり、既存アルファベットから別の文字列に変化させたりと、面白いテキストアニメーションが実現可能。 実際にデモを見ていただくのが一番分かりやすいです。 スピード等もオプションで指定可能。 $(element).textualizer( param ); で簡単に実現 テキストアニメーションならFlash、というような時代もありましたが、JavaScriptの方がお手軽でいいな、という時代になった気がします。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 テキストを部分的にカッコよくアニメーショ
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://kiro.me/projects/textualizer.html