jQuery

javascript

【jQuery】要素の追加方法(要素内のはじめ、後ろ、要素外のはじめ、後ろや要素を包む方法も)

いつもjQueryで要素を追加する時に検索してトップに出てくるキータを見ています。 いつもいつもありがとうございます! そのキータのページではGIFかmp4で要素を追加した様子を流していてわかりやすいのですが 実際にボタンを押して動かす方が...
javascript

【jQuery】マウスのドラッグで横スクロールさせる方法

スマホでメニューなどを横スクロールする動作が一般的になり、PCでもそのままの動作させたい時 macだと「overflow:scroll」だけで、マウスでフリックするとそれっぽくなるけど windowsだとメニューバーを押して移動して~ってや...
javascript

【jQuery】コピペOK! on/offスイッチ|雑なUIと整合性が取れるチェックボックストグルボタン3つ!

ツイッターでこの「初めてのブログ」のURLでエゴサすることがあるんですが、数時間前に話題に上げてもらえたので速攻で作った雑なUIと整合性が取れる雑なチェックボックス(複雑すぎない)をご紹介します! ①ちょっと雑なトグルボタン onoff H...
javascript

【jQuery】トップへ戻るボタンをコピペで実装!

下へスクロールするとヒョイッとでてくる「トップへ戻る」ボタンをコピペで実装しよう! ボタンの形を複数作ったので好きなCSSをコピーして使ってね! ではまず共通のHTMLとjQueryです。 HTML <div class="up"> <sp...
javascript

【jQuery】隣の要素・兄弟要素の取得方法

ボタンを押したら、隣の要素にクラスを付けたり外したり色々便利な兄弟要素の取得方法のご紹介です! jQueryで取得する書き方が色々とあるので、それぞれの動きをデモで確認しよう! デモ 「ワタシ」から見て兄弟要素をアラートするよ ネキ(姉) ...
javascript

【jQuery】VRトラッキングみたいに、カーソルを丸くしクリックアクションを追加する方法

カーソル(cursor)を矢印ではなく丸くし、クリックでポワンっと広がるアニメーションを追加する方法を説明! この~。。。なんて言うんだろう? 「カーソルが好きな形に変化するや~つ(仮名)」がサイトに実装されてると「こだわってる!」感がある...
javascript

【jQuery】〇文字以上「…」をコピペで簡単設置!

ブログでよくある本文の省略機能だけど、自分で作ると結構手間だよね。 何かサービス作る時とかよく使うから、このページを覚えとくと便利! じゃ~まずデモだよ。 15文字以上はカットしてその後点々デモ 15文字以降は点々で切るからそれ以上は書かな...
javascript

【jQuery】カーソルで動く!人が歩くアニメ|コピペですぐ実行

カーソルに追随して動くアニメーションって楽しいよね♪ カーソルで動く要素がサイトに有ると、ついつい右行ったり~左行ったり~しばらく繰り返しちゃう。 そんなアニメーションを実現するjQueryのご紹介。 画像をダウンロードして、すべてコピペす...
javascript

【jQuery】パーセントの計算方法

特定数Aは特定数Bの何パーセントか? 特定の値は全体の何パーセントか? コーディングしていると、パーセントでの数値を求めたい時があります。 僕は根がバカなもので、中学校の数学の問題でも求め方が分からなくてしばらく検索しちゃう。 このパーセン...
javascript

【コピペOK!】ON/OFFスイッチのデザイン7個|iOS風スイッチもあるよ!

フォームやインタラクティブなサイトで使えるON/OFFのトグルスイッチのデザイン7つのご紹介。 シンプルなものなので様々な所で利用できるトグルスイッチ7つを作ってみたので ぜひぜひコピペして利用してくれたら嬉しいです! チェックボックスは見...
javascript

【jQuery】コピペでスクロール値を常に画面に表示させる

スクロールアニメーションを作る時に、スクロール値をコンソールで確認するのも良いけど そうするとHTMLやCSSがブラウザ上で編集しずらくなる。 それなら画面にスクロール値だけ表示しておけば便利じゃん!と思いました。 でもこれ最終的に消しちゃ...
javascript

【jQuery】特定クラスがリストの何番目にあるかを取得!

リストの特定クラスが何番目にあるのかの取得方法をご紹介。 var number = $('.sample').index('ul li'); 「$('.sample')」に番号を取得したい特定のクラスやIDを書いて、「.index('ul ...
javascript

【jQuery】パラパラ漫画の作り方|画像切り替え&スプライト画像アニメ

動画とかGifを複数個ウェブページに載せると容量がデカくなっちゃって、困る時がある。 デザインを変えようか、それとも何個か省いてページ作成するか....。 そんな状況の時に使えるのが、パラパラアニメーション! 容量を抑えるだけじゃなくココの...
javascript

【jQuery】iOS・iPadOSでスクロールすると発生するリサイズ処理を止める方法

iPhone(iOS)のSafariでスクロールするとリサイズ処理が走るのやめて欲しい。 実機でしか確認できないので、忘れる時があるから困っちゃう。 この厄介なリサイズ処理問題の原因は、スクロールすると Safariのアドレスバーが小さくな...
javascript

【jQuery】offset().topエラーになる原因

jQueryでトップからの位置を取得する「offset().top」ですが、 chromeの開発ツールで確認するとたまにエラーになる時がある。 ちゃんと取得してたはずなのに、なんでこんな表示が出てるの?って思うけど 気にしないでいいかなとも...
広告