はじめに こんにちは、ピクトリンク事業部開発部サーバサイド開発課のkitajimaです。弊社サービスピクトリンクは、システム再構築の一環として
FURYU Tech Blog-フリューテックブログ | Furyu Tech Blog
はじめに こんにちは、ピクトリンク事業部開発部サーバサイド開発課のkitajimaです。弊社サービスピクトリンクは、システム再構築の一環として
CSSと少しのJSで作るページスクロールできるモーダルウィンドウ
某案件で対応したモーダルウィンドウ実装が中々曲者だったので、同じような実装を強いられた時に使いまわせるように自分用のメモとして残しておきます。 レスポンシブ対応 モーダルウィンドウ内でスクロール出来る 複数設置対応 基本動作はCSS3で対応（古いIE非対応） スクロールバーの関係で少しJS使う デモ・ダウンロード 何はともあれ、まずはサンプルをご確認下さい。CodePenやサンプルページからもコードを確認可能です。 See the Pen scroll modal window by tokumewi (@tokumewi) on CodePen. Demo zipファイルをDownload 全ソースコード 全ソースコードを載せた後に個別で解説していきます。テキストはスクロール対応を見せるためなのでなんでも良いです。 HTML <!DOCTYPE html> <html lang="ja"
画像のポップアップ表示【JavaScript 動的サンプル】
写真などの画像をクリックすると大きく表示される機能のJavaScriptです。 拡大する速度（ゆっくり、早く）や大きさ、枠、影なども指定することができます。
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
【JavaScript】スムーススクロールをjQueryを使わずにシンプルに実装する【Vanilla JS】 – ノーズブログ
わかった事 試してみた所、アニメーションを作る時には、まずイージングが大変だという事がわかりました。 スムーススクロールのオプションとしてイージングを色々選択できるようにしようと思うと、プレーンなJavaScriptでシンプルなコードを書くのはどうしても無理があります。 逆に、イージングさえ絞ってしまえば、後は大して難しい記述は無いので、なかなかシンプルに書くことができます。 よく考えてみたら、今までスムーススクロールごときでサイト毎にイージングを変えるような事もしなかったし、 jQueryのデフォルトのイージング”swing”で、クライアント側から文句を言われたこともありません。 という事で、jQueryのデフォルトのイージング”swing”だけに限定して、コードを書いてみました。 jQueryのデフォルトのイージング”swing”限定のスムーススクロール 念のための使い方の説明ですが、
モバイルにも対応！完璧なLIGHTBOX「PHOTOSWIPE」をJQUERYプラグイン化しました。
一言まとめ LightBoxは時代にそぐわなくなってきた。その最有力候補として浮かび上がってきた PhotoSwipe だが、導入する作業が煩雑なため、jQueryプラグインにした。 JavaScriptのギャラリーライブラリといえば「LightBox」です。むしろ「LightBox」が一種の代名詞にもなったくらい一世を風靡したのです。 しかし、時は2016年。もっとモダンな「Lightbox」はないのか… と、誰もが願うものです。 そして、そんな願いを完璧に応えてくれるライブラリが現れた… それが「PhotoSwipe」です。百聞は一見にしかず、まずはPhotoSwipeの公式サイトのデモをご覧下さい。 圧倒的な人気度 GitHubで言語をJavaScriptに絞って、「gallery」で検索した後、さらにソート順を「Most stars」にした結果。 「PhotoSwipe」のスター数
[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js
ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。 単体で動作し、しかも1KBの超軽量スクリプトです。
![[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/cfd16f6b3cf9495ffab4b2256010a83797a2cf0d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110801-02.png)
jQueryにはもう頼らない！スムーズスクロールを素のJavaScriptで書いてみると…
jQueryって便利ですよね。特に普段JavaScriptを書かないWebデザイナーにはとっつきやすい書き方が魅力。でも素のJavaScriptを書ければ、もっと軽量で使い勝手のいいスクリプトが作れるかもしれません。 本記事はAdrian Sandu、Chris Perry、Jérémy Heleine、Mallory van Achterbergが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者の皆さんに感謝します。 スムーズスクロールは、デフォルトでページ内のスムーズなナビゲーションを実現するユーザーインターフェイスの1つです。リンクが設定してある箇所にカーソルを合わせクリックすると、リンク先URLのハッシュフラグメントで指定した移動先までのスクロールをアニメーション付きで示します。 スムーズスクロールは随分前から知られている方法なので
jQuery速度比較 css vs show / hide vs addClass / removeClass｜Javascript｜開発ブログ｜株式会社Nextat（ネクスタット）
top > 開発ブログ > Javascript > jQuery速度比較 css vs show / hide vs addClass / removeClass jQueryで要素を非表示にする時に使う .show()と .hide()、及びにjQueryによるCSSの指定に関する考察です。 以前、.css()で直接指定したほうが.show() .hide()よりも速いという記事を見かけたりしたこともあり、 調べても詳しい情報がなかなかないので実際に手元の環境でどう書けば速くなるのか計測してみました。 環境 OS: Windows 7 Home Premium SP1 (64bit) CPU: Intel Core i5-2410M @ 2.30GHz RAM: 8GB ブラウザ：Google Chrome 30, Opera 16, Mozzila Firefox 24, Inter
jQuery高速化！処理速度を10倍上げるテクニック20選
Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers
JavaScriptで正規表現（エスケープ編） - Qiita
正規表現で文字列の置き換えを纏めてみました。 あまり自身ないんで、「おかしいよ」「こうした方がいいんじゃない」っていうのがあったらコメント下さい なお、簡単なテストは通していますがすべてを網羅しているわけではありませんので、ご使用になる際にはご自身で十分検証の上ご利用下さい JavaScriptで正規表現（文字列制限編） JavaScriptで正規表現（文字列置換え編） JavaScriptで正規表現（数字操作編） JavaScriptで正規表現（エスケープ編） この投稿 参考サイト 6. TERASOLUNA Server Framework for Java (5.x)によるセキュリティ対策 Closure Templatesのオートエスケープが最強すぎる件 XSS対策:JavaScriptのエスケープ(その2) /** * HTMLエスケープ * * @param {String}
静的HTMLで、インクルードを実現するためのJavaScript - on the center line.
ローカルディスク上に存在する静的HTMLで、外部ファイルをインクルードするためのスクリプト（つまり、XMLHttpRequestオブジェクトの代わり）。 以前にも同じようなエントリを書いたのですが（http://d.hatena.ne.jp/kenpoco/20080228/1204198090）、いくつか不具合があったので修正してます。 IE6,7に対応（前回はFirefox2のみ）。 インクルードするファイルの拡張子が.HTMLと.TXTで動作が異なっていたので、その対応。 インクルードした後で、その内容を変更するための仕組みを追加。 最近HTMLを作る機会が多いので自分で使ってみてるのですが、けっこう重宝してます。全ページに同じようなヘッダー部分がある場合なんかに、ヘッダー部分を１ファイルにまとめておけるので、その後の修正がかなり楽。 【使用例】 ------------------
CSSファイルを<head>内ではなく</body>直前で読み込む - Qiita
Webページの表示は少しでも高速化させたいですね。 そのために我々はいろいろな方法を使いミリ秒単位の短縮化を頑張るわけですが、そのテクニックの一つをメモします。 Webサイト表示高速化の一つの方法として、レンダリングをブロックさせるCSSとJavaScriptをHTMLの<head></head>内ではなく</body>タグの直前に読み込ませるというものがあります。 JSは普通に</body>タグの直前に書けばいいのですが、CSSは残念ながら<head>~</head>の中にしか書けません。 HTMLの仕様が変わって書けるようになったそうです！教えてくれたmyakuraさんありがとうございます。コメント欄参照 それでもどうしてもCSSも</body>タグの直前に書きたいという場合はJSを利用し以下のように書くことが出来ます。 <head> ... </head> <body> ... <s
サイトのコピーライトで「現在年」を表示する方法（Javascript ＆ PHP）｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
サイトのフッターコピーライトで、2007 – 2013 のような年号を記載する場合もあると思いますが、年が変わるたびに年号を手打ちで更新するのは面倒なので、Javascript で現在年を自動表示する方法を紹介致します。 WordPress のようにPHPのサイトの場合は、Javascript とはまた違った方法で現在年を自動表示させることができますので、そちらの方法も合わせて紹介致します。
モーダルウィンドウ（ポップアップウィンドウ）をjQueryとCSSで簡単に作る手順
プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも開けますし、何と言っても簡単です。 モーダルウィンドウのコンテンツもHTMLソースなので、画像も動画も貼れるし、モーダルウィンドウ内からのリンクも可能です。 こちらが jsソースをゲットさせていただいたサイト「jQuery.lab」さんです。 jQueryでモーダルウィンドウを作る方法 | jQuery.lab ソースコードに初心者でもわかる丁寧なコメントを付けてくださっていてとっても親切。 ありがとうございます！ jsは、こちら↑から完全コピペさせていただいて、デモページを作りました。 デモのHTMLの構成と、CSSの必須
App Framework, Zepto.js 1.0 と jQuery との互換性 - メモ用紙
2013年12月12日に Zepto.js 1.1.2 がリリースされました (リリースノート)。v1.1 以降は IE10 に対応するなど、動作が異なる可能性があります。 App Framework は jQuery 互換のライブラリとして作られた jqMobi から派生し、改良を加えながら現在に至る。 GitHub - 01org/appframework: The definitive HTML5 mobile javascript framework また Zepto.js は、2013年3月4日に 1.0 正式版がリリースされた。Bootstrap との組み合わせなど、jQuery との互換性を強く意識して改良が行われているようだ。 Zepto.js: the aerogel-weight jQuery-compatible JavaScript library ファイルサイズ
ページ内リンクをスマートにするsmoothScroll.js[to-R]
ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#
![ページ内リンクをスマートにするsmoothScroll.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
ページ Top に減速しながらスクロールして戻ります
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 サンプルページの画面を下の方に移動して▲ページ Top に戻る を押してください。 スルスルっとスクロールアップしてページ最上部に戻ってきます。小気味好いですよ。 今のブログで満足ですか？ FC2レンタルサーバーLiteでホームページを作る！ サンプルソース <html> <head> <title>ページ Top に減速しながらスクロールして戻ります。</title> <script language="JavaScript"> <!-- function Scr_updown() { var Doc=document; //横スクロール位置取得,このスクリプトでは使いません //var Scr_x=Doc.body.scrollLeft |
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
About Dynamic HTML
Lightbox_Plus test03