こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。 公式ページはこちら： https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ デモ まずは、下記リンクからデモをご覧ください。 https://211.125.65.24/demo/2013/10/effect/ ※現在はサービスを終了しています。 実装手順 使用するのは「jQquery」と「waypoints.js」の2つです。 まずはHTMLとCSSを用意します。 CSSの読み込み <link rel="styles
打造伴隨人們多年、一同成長的有趣產品從每日補水到每日走路、從記帳理財到待辦事項，我們的產品都是從生活中的小事情開始，讓小小的樂趣在生活中發芽。我們相信好的產品可以伴隨人們多年，進而影響大家的生活習慣。 我們的工作核心，就是將「樂趣」帶到每一個人的身邊。無論是外地工作的女兒，透過《Walkr》收到父母的能量記錄來確認彼此健康；《植物保姆》陪伴小女孩在醫院裡枯燥的治療時光；或是透過《記帳城市》學習理財，真實地在現實生活完成了夢想。 我們知道，一定還有很多有趣又動人的故事默默發生在這千萬人中。 一個充滿樂趣的產品，伴隨著人們長大，成為回憶的重要核心。我們都相信，這些故事都是這千萬使用者中，最重要的那些體驗，是我們和我們的使用者們共同擁有的回憶。
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
