scroll-behaviorでなめらかスクロールが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 06日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 06 日目 scroll-behavior でハッシュ付き URL とかでジャンプするときのスクロールをなめらかアニメーションさせることができます。 使い方 デモ：https://codepen.io/ginpei/pen/OJdrqPR JS でのジャンプにも利く scrollTo() 等でスクリプトからスクロールする際にも利きます。楽ちんですね。 ちなみに実行時オプションで CSS の設定を上書きできます。 アニメーション制御はなし ON/OFF だけです。速度とかはブラウザー次第。 あとブラウザーの気分次第で無視しても良いと仕様に書かれています。そうなんだ。 おしまい 昔はみんな頑張って JavaScript で計算してアニメーションさせてましたね。 参考 scroll-behavior – CSS: カスケーディ
どこのリンクから移動したかをわからないようにして個人情報を守る「Referer Modifier」レビュー
ウェブサイトは、訪問者がどのサイトからリンクをたどって移動してきたのかを、HTTPリファラの情報で知ることができます。これは裏返すと「自分がどういうリンクをたどって移動したのか知られてしまう」ということでもあり、場合によっては、参照元ページで付与されていた個人情報がわかるようなパラメータが意図せず漏れてしまうこともあり得ます。Firefox向け拡張機能「Referer Modifier」は、HTTPリファラの情報を削除したり書き換えたりすることで、情報を守ってくれます。 Referer Modifier – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/referer-modifier/ まずは上記URLにアクセスして「Firefoxに追加」をクリック。 「Referer Modifierを追加しますか
待望のアンカーリンクとオーディオ機能が登場！ Adobe XDでプロトタイプに役立つ新機能まとめ - ICS MEDIA
先日、Adobe XDの2020年3月の大型アップデートが公開されました。今回の目玉機能は「アンカーリンク」そして「オーディオの再生」です。これらのプロトタイプの可能性を拡げてくれる機能の使い方と注意点を紹介します。 その他にも「タップトリガーでの複数のアクション」「コンテンツに応じたエリア内テキストのサイズ変更のショートカット」「画像の置き換え」といった機能も登場しました。 Adobe XDを普段から使っている方には最新機能の復習として、使っていない方にはAdobe XDの進化を感じられる内容になっています！ アンカーリンク 同じページ上の特定のポイントまでスクロールするリンクの一種である「アンカーリンク」が登場しました。 プロトタイプモードでアンカーリンクしたい要素から、スクロール先にリンクを繋ぐだけで設定は完了です。同一ページ内でリンクを繋ぐと自動的にアクション「スクロール先」が設定
JavaScriptでページ移動前にアラートを表示する - EZOLAB - エゾラボ
キーボードの誤入力によりWebページが予期せず移動してしまう問題 ハロー、みなさん。エジソンです。 大抵のブログサービスにおける管理機能は、Webブラウザからアクセスする”Webアプリケーション”として提供されているはずです。ブログ記事の投稿もWebブラウザから実行することでしょう。そんな中、ブログ記事を書いている最中に、誤ってブラウザの戻るボタンを押下することで、編集中の記事が保存されずに消失してしまう事は、誰もが一度は経験することではないでしょうか。 ブログサービスだけではなく、Webアプリケーションとして提供されている全てのサービスの場合に、こういった編集中の内容が失われてしまうような、問題が起きやすいのではないかと思います。 ネイティブアプリ市場ではユーザーが成熟している？ 一方で、ネイティブアプリの場合にはこうした事故は発生しにくいかと思います。メモ帳やOffice製品の場合には
[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
![[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4521503cad1ef35e553783a3eb0c0ab4a4bc1361/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063007.png)
WordPress：ログイン後にダッシュボードには移動せずに、他ページヘリダイレクトさせる方法 - NxWorld
フォーラムで見かけて個人的にも覚えておきたいと思う内容だったので備忘録。 デフォルトのWordPressはログイン後にダッシュボードに移動しますが、それを任意のページにリダイレクトさせる方法です。 また、ダッシュボードへ移動できないのにメニューに「ダッシュボード」の項目が表示されているのはアレなので、これを非表示にする方法も併せて紹介します。 ログイン後に任意のページヘリダイレクトさせる 「ダッシュボード」にアクセスしようとした際に別ページへリダイレクトさせるには、functions.phpに下記のように記述することで実装できます。 add_action( 'admin_init', 'redirect_dashiboard' ); function redirect_dashiboard() { if ( '/wp-admin/index.php' == $_SERVER['SCRIPT
:target擬似クラスのまとめ
CSSの「:target擬似クラス」について調べてみました。 認識誤りがありましたらどこかでつぶやいてください。 １．:target擬似クラスとは :target擬似クラスはCSS3で追加されたセレクタです。 以下、とりあえず仕様の記載をもとに記します。 仕様は下記のリンク先にあります。 Selectors Level 3 - 6.6.2. The target pseudo-class :target フラグメント識別子（#）のついたURIは、同じHTML文書内の特定の要素にリンクされることがあり、これを「ターゲット要素」と呼びます。 次の例は、HTML文書内にあるfooと名付けられた要素を参照するURIです。 http://user-domain/index.html#foo ターゲット要素は:target擬似クラスで表すことができます。 URIがフラグメント識別子を持たない場合、その
Animsition
AnimsitionA simple and easy jQuery plugin for CSS animated page transitions.Download on GitHub Tweet 58 different animations Fadefade-infade-outFade Demo Fade upfade-in-up-smfade-in-upfade-in-up-lgfade-out-up-smfade-out-upfade-out-up-lgFade Up Demo Fade downfade-in-down-smfade-in-downfade-in-down-lgfade-out-down-smfade-out-downfade-out-down-lgFade Down Demo Fade leftfade-in-left-smfade-in-leftfade
[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems
タップするとナビゲーションがスライド。 MenuItemsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="menuitems/menuitems.min.css" /> </head> <body> ... コンテンツ ... <script src="jquery.min.js"></script> <script src="menuitems/menuitems.min.js"></script> </body> Step 2: HTML 各コンテンツはsection or div要素で実装し、それぞれに「.menuItem」を付与し、data属性でラベルを記述します。 <body> <section|div class="menuI
![[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems](https://cdn-ak-scissors.b.st-hatena.com/image/square/490093a26eeae705d029e62c12e65ec0e91614fc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120901.png)
[JS]ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors
通常のハッシュリンクと違い、#のすぐ後に「.」があります。これは、そのclassをもった最初の要素にリンクしています。 また、右端の「#.hello｜5000」はスクロールの速度を設定しています。 リンクのパターンはさまざまなものがあり、各所に利用されています。 Arbitrary anchorsの使い方 実装は簡単で、classのリンクやスピード調整だけでなく、通常のハッシュリンクでもアニメーションでスクロールさせることができます。 Step 1: 外部ファイル head内に、jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript
[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
さまざまな文書をPDFファイルへ変換、ページ移動や追加などの編集もできるフリーソフト「PDF24 PDF Creator」
PDFファイルの作成と結合・分割、ページの移動・追加・削除、PDFからPDFへのページ追加、PDFにある情報の変更、パスワード追加、スクリーンショットのPDF化など、さまざまなことができるフリーソフトが「PDF24 PDF Creator」です。PDF形式への保存だけでなく、PDF/X、PDF/A、PS、EPS、PCL、PNG、JPEG、BMP、PCX、TIFF、PSD形式にして保存もでき、Windows XP/Vista/7に対応しています。 ダウンロード＆インストール、PDF形式などへの変換、スクリーンショットのPDF化、PDFの編集については以下から。 Download of 100% Free PDF Creator http://en.pdf24.org/pdf-creator-download.html ◆ダウンロード＆インストール 上記サイトの個人用である「PDF24 Cre
ドロップダウンするページ内スクロール用の固定ナビゲーションを実装するjQueryプラグイン・fixedTOC - かちびと.net
個人的に使いそうなのでメモ。 よくあるページ内スクロールを 固定させてドロップダウン式に するjQueryプラグインです。 これはなかなか実用性があると 思います。 プラグインとしてはちょっと今更感あるかもですけど。 位置固定+ドロップダウン+アコーディオン+ページ内スクロール、みたいなやつです。結構いいんじゃないかなと感じました。 サンプル用意しました。 Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery.fixedTOC.js"></script> <script> $('#toc').fixedTOC({ menuOpens: 'click', // or 'mouseenter' scroll
ＰＨＰリファレンス（$_POST）
スポンサードリンク POSTメソッドでリクエストされたデータは、POST変数「$_POST」を利用し、取得します。 $_POSTには、連想配列でPOSTメソッドでリクエストされたデータが格納されます。 例１） POSTメソッドで送信したデータを取得する。 （１） フォームで、項目「post_data1」にデータ入力してPOSTメソッドで送信する。 「test_input.php」 <html> <body> <form action = "test_view.php" method = "post" > <input type="text" name="post_data1"> <input type="submit" name="POST送信" value="POST送信"> </form> </body> </html>
[JS]広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js
テーマ左上から、base、sunny、le-frog、ui-darkness 対応ブラウザは、下記の通りです。 iPadも対応というのはいいですね。 Chrome/Chromium Safari Firefox IE Opera iPad impress.jsからの移行 jmpress.jsは「impress.js」のjQuery版で、impress.jsの特徴全てと更に多くの機能を備えています。 impress.jsから移行するには、jquery.jsを加え、スクリプトをimpress.jsからjmress.jsにし、スクリプトの呼び出しを「$(selector).jmpress(); 」に変更します。 impressのデモをjmpress.jsで動かしたデモ jmpress.jsの使い方 HTML ルートとなるdiv要素に「id="jmpress"」をつけ、各コンテンツをdiv要素で配
文書の特定部分をハイライトする面白い効果を実装できるjQueryプラグイン:phpspot開発日誌
Highlight Links And Words Using Jquery 文書の特定部分をハイライトする面白い効果を実装できるjQueryプラグイン。 例えば、アイテムをクリックすれば、テキストが現れ、アニメーションしながらハイライトさせるべきテキストに近づいていきハイライトするという、面白いプラグインです。 単にハイライトさせるより明らかに分かりやすいハイライト効果が得られます。 説明が難しいのでデモを見ていただくのが一番でしょう。 毎回アニメーションするとあまりよくないかもしれませんが、キャンペーンサイトなどでの一種の演出として使えるかもしれませんね。 関連エントリ ページ内ハイライト検索が実装できるjQueryプラグイン「Plain Text Keyword Search」 ページ内のテキストを動的に分かりやすくハイライトさせられるjQueryプラグイン「highlight」 現
画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」:phpspot開発日誌
WordPress iPad Swipe WordPress Plugins 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」。 プラグインをダウンロードして有効化するだけで、スワイプが有効になります。 iPadやiPhone向けのブログで使い勝手を向上させる用に覚えておいてもよさそうです。 左にスワイプすることで、次のエントリ、右にスワイプで前のエントリに移動することが出来ます。 設定ページではiPad以外でも有効にするかどうかの設定（デフォルトはiPadのみ）や、ポップアップでスワイプが効くことをメッセージ表示できるのですが、そのメッセージを指定できます。 ブログを、ページをめくる要領でページ送りが出来るというのはタッチパネル型のデバイスではなかなか使い勝手がよいみたいです。 関連エントリ iPhone/iPad用サイト作成時に使えるスワイプイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WooCommerce: Login Redirect by User Role @ My Account
PHPとCookieでURLのクエリをページを移動しても保持させる | 910121