Material Design for Bootstrap 5 & 4Top quality open-source UI Kits Material Design for Bootstrap v5 Hundreds of quality components & templates All consistent, well-documented, reliable Super simple, 1-minute installation Easy theming and customization Get started
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ GitHub wavifyは jQuery のプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVG コードを用意すれば OK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
jQuery Googleカレンダー風スケジュール表 タイムテーブル
jQueryでスケジュール表もしくはタイムテーブルっぽいもの 仕事でスケジュール管理のシステム開発を行った際に作った、プラグインをちょいと改良したので公開です。 プラグイン化する意味はあったのかどうかは置いておいて、必要情報を与え要素を動かした場合変更後の時間などを返却してくれます。 レイアウトは自分で組まないといけません。。。 ちなみにタイトルのgoogle風ってのは要素を動かしたり移動出来る所です。一言詐欺になってたらすみません。 動作環境、jQueryバージョン jquery-1.9.1 jquery.easing.1.3.js Firefox 27.0.1 サンプル画面 DEMO 概要 jQueryのdraggableとresizableを使用し移動エリア(画像：テーブルの時間の下に配置された部分)を移動出来るようにしてます。 あとはdraggableとresizableの「sto
スケジュール管理でオススメの軽量jqueryプラグイン「jq.schedule.js」 | @技術屋のメモ | WEB/アプリ開発技術メモ
スケジュール管理でオススメの軽量jqueryプラグイン「jq.schedule.js」 by ateliee · 公開済み 2014年6月15日 · 更新済み 2014年6月15日 スケジュールなどのタイムラインを表示するjqueryプラグインはいろいろありますが、 なかなかしっくりくるものがないので、自作してみました。 ダウンロードはこちらから スケジュール管理用jqueryプラグイン jq.schedule.js 使い方 プラグインをダウンロード後、/demo/ページをご覧いただくとどれだけシンプルなプラグインか確認できます。 jquery.jsとjquery.ui.jsに依存しておりますので、別途ご用意する必要があります。 機能 無制限でスケジュール管理する人数を増やすことができます。 ドラックアンドドロップでスケジュールを移動することが可能 時間を縮めたりのばしたりもドラックアンド
Chromeで日本語入力を禁止する - Qiita
Chromeで日本語入力を禁止したい ・IEやFFと同じようにChromeで日本語の入力を禁止したい ・ChromeはCSSのime-mode:disabledに対応していない ・「とにかくヤレ」と神の声を賜ったので、JavaScriptで頑張ってみる 2015/9/17編集 masa-kunikataさんアドバイスの正規表現方式に変更。 textareaで改行・タブもとおるようにしました。 jQuery(document).ready(function() { // ime-modeが使えるか var supportIMEMode = ('ime-mode' in document.body.style); // 非ASCII var noSbcRegex = /[^\x00-\x7E]+/g; // 1バイト文字専用フィールド jQuery('.sbc_field') .on('key
jQueryでフリックを実装する場合に縦スクロールできなくなる問題を解決する方法
以前jQueryでプラグインを使わずにフリックを実装する方法についてご紹介いたしましたが、 こちらの方法を使った場合に、１つ問題が発生します。 それは、スマホやタブレットでは、 フリックできるようにした要素の上ではページのスクロールができなくなってしまうという問題です。 これは、touchmoveイベントの本来の動作であるページのスクロール動作を、 「e.preventDefault()」を指定してキャンセルしているためです。 フリックで要素を動かす動作を自然に行うためには欠かせないことなのですが、 横いっぱいに広げたスライダーなどでは、これによってページのスクロールができない範囲が大きくなってしまうため、とても使い勝手の悪いものとなってしまいます。 今回は、この問題を解決する方法について考えてみましたので、 ご紹介いたします。 ↓こちらがこの問題を解決したDEMOです(スマホやタブレット
[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ
縦長のランディングページ、レスポンシブなスマホ対応ページなどに便利な機能や面白い仕掛け、気持ちいいインタラクションやエフェクトなどのアニメーションを実装できるスクリプトやjQueryのプラグインを紹介します。 Popper.js Popper.js -GitHub ポッパーはツールチップとポップオーバーを組み合わせたスクリプトで、今までのツールチップとは一味も二味も異なります。指定したエレメントに表示させるだけでなく、スクロールするコンテナ、ドラッグで移動可能な要素、ビューポートのよる方向の制御など、縦長ページ・スマホ時代のツールチップです。
![[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/63a1314d511ba3f16af07815026a8e0a870e8098/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016041101.jpg)
Sticky Table Headers & Columns | Codrops
A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem including adding support for biaxial headers. Sticky table headers are no longer a stranger to an average website user — unlike on paper when a reader’s eyes can comfortably jump in saccades between top
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
masonryを使いながらinfinite scrollを使って画像が重ならないようにする - Qiita
<script src="../js/jquery-1.7.1.min.js"></script> <script src="../jquery.masonry.min.js"></script> <script src="../js/jquery.infinitescroll.min.js"></script> <script> $(function(){ var $tiles = $('#tiles').css({ opacity: 0 }); $tiles.imagesLoaded(function(){ $tiles.animate({ opacity: 1 }); $tiles.masonry({ itemSelector: '.tile' }); }); $tiles.infinitescroll({ navSelector : 'ul.pagination', nextSel
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. $(".chosen-select").chosen({disable_search_threshold: 10}); Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is
日本語IMEで未確定文字が無く且つ変更されたらハンドラを実行するjQueryプラグインを作ってみた - Qiita
2015-08-22 追記 1年半前に書いた記事ですが、この記事の方法は良くないそうなので、参考にしないでください。 twitterでご指摘いただいたのですが、モダンブラウザではkeyup, keydownなどではなくUI Events Specification (formerly DOM Level 3 Events)とInput Eventsの input イベントを見て処理すべき、IE8は対応するならIE8だけ別にわけて扱うべきでした。 2015-08-23 追記 IE8とIE9では input イベントは期待通りに機能しないそうです。 A near-perfect oninput shim for IE 8 and 9 – Ben Alpert で模擬実装を作っている方がいました。 Microsoft Support LifecycleによるとIE8とIE9は約半年後(2016-
Slimbox 2, the ultimate lightweight Lightbox clone for jQuery
Introduction Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2. Demo Single images Image set These are pictures I took during a journey through India and Nepal. Features F
Image Lightbox, Responsive and Touch‑friendly by Osvaldas Valutis
As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but the overall experience: from implementation to UX. All due respect, but I have never liked any of these light-fancy-face-boxes. They all were solving problems that just don’t exist: lots of unwanted features by default, total mess in markup, no native behavior for touch screens. I was work
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
Web制作時に備えておくと便利なチートシートのまとめ（iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ）
iOS/Androidの各デバイスやエレメントの規格、BootstrapやFoundationなど人気のフレームワーク、WordPressのテーマファイル、Git/GitHubの便利な機能、Sublime TextやEmmetの使い方をまとめたチートシートなど、フロントエンドのWeb制作者に役立つチートシートをまとめました。 Web制作時によく使うサイズとかスニペットとかショートカットとか、チートシートを印刷してすぐに見られるようにしておくと便利ですよね。 チートシートの目次 iOS デザイン チートシート Swift チートシート Android チートシート Android デザイン チートシート Twitter Bootstrap 3 チートシート Foundation チートシート WordPress 時短用チートシート WordPress テーマ開発用チートシート GitとGit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
10 Best Free Contact Form Plugins for WordPress 2025
JavaTechnology Slot Online | Cara Daftar bermain Slot Online
Codrops | Useful resources and inspiration for creative minds
