[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
スクロールベースのページを実装する時にぴったり！ ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト
Animated Border Menus | Codrops
A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps. The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today
Webデザイナーやコーダーの方でも知っておきたいPHPの便利な使い方
この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇
Responsive Web Css
HTMLとCSSのファイルは「page.zip」として一つのファイルで、自動ダウンロードされます。 ファイルの中身は、下記のようになりました。 HTML HTMLのスケルトンです。 必要最小限のもののみの構成です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="generator" content="Responsive Web Css (www.responsivewebcss.com)" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="Stylesheet" href="index.html.css" /> </head> <bod
[WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 参考にしたサイトも掲載！ | stryhのchangelog
どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボタンを設置しました。 設置したのはちょっと前なので既に当ブログをご覧になられている方は気付いているかと思います。 以前から設置はしていたのですが、それはプラグイン、外部サービスのJSファイルを読込み設置していました。 それでも良かったのですが、ソーシャルボタンの表示が小さいアイコンになってしまい、それとデザインに自由がきかなかったのであまり納得はしてませんでした。 そんな理由もあり納得のいくボタンを設置したいと思いかなり経つのですが、今回設置しました。 その備忘録でごあす。 表示箇所 PC PCの場合は以下、2箇所です。 エントリーページの最初 左サイド（少しスクロールするとアニメーションで表示されます） iPhone iPhoneの場合は以下に表示してます。 エントリーの最初と最後 iPhoneの場合、画面が小さい
![[WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 参考にしたサイトも掲載！ | stryhのchangelog](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd4745fea06edf119cb036c7f7e5eb754d1991c5/height=288;version=1;width=512/http%3A%2F%2Fstryh.com%2Fwp-content%2Fuploads%2F2013%2F05%2Fwordpress-sns.jpg)
WordPress サイトを静的 HTML に変換するプラグイン StaticPress - dogmap.jp
実は WordPress サイトを静的 HTML に変換するプラグイン StaticPress をリリースしていました。 ダウンロードは、WordPress 公式プラグインディレクトリからお願いします。 WordPress › StaticPress « WordPress Plugins このプラグインを使用することで WordPress で作成されたサイトを丸ごと静的ファイルに変換することができます。 また、変換時にサイトのパーマリンク構造を変換することができるため、http://wp.example.com/ というオリジナルサイトを http://www.example.com/static/ というサイトとして公開するための html を作成することも可能です。 完全に静的ファイルを作成するため、コメントやサイト内検索・コンタクトフォームの設置などはできません。 それらについては
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA