縦や横に長いサイト「高級ペライチ」1度は見ておきたい超定番演出のまとめ32個！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/06/19 1735 users KAYAC DESIGNER パララックス Blog 愛称

HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介... 続きを読む

東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します - Liner Note

2014/12/20 1220 users Liner Note パブリックドメイン SVGファイル

illusratorを使って、東京圏の交通路線図を作りました。 現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマートフォンなどタッチ端末だとそこそこ見られると思います。 東京 鉄道路線図 なお、AIファイル・SVGファイルはパブリックドメイン(CC0)としますので、配布・改... 続きを読む

若者はリンクもスクロールも嫌――記事の体裁が新鮮すぎる「BuzzFeed Kawaii」に聞く、ミレニアル世代のネットメディアへの接し方 - INTERNET Watch

2019/04/09 836 users 体裁 BuzzFeed Kawaii ミレニアル世代 若者

続きを読む

海外旅行で便利：iPhoneの「Google Maps」アプリでオフライン用に地図をキャッシュする方法 | Touch Lab - タッチ ラボ

2013/07/17 772 users 使い物 ズーム iOS向け コマンド iPhone

iOS向けの『Google Maps 』で、オフライン用に地図データを保存しておく方法があるそうです。 地図アプリには元々一ダータをキャッシュしておく機能がありますが、ズームやスクロールなどで一度も表示していない画面のデータは保存されておらず、電波の入らない場所ではあまり使い物になりません。 しかしながらちょっとした「コマンド」を使うだけで、明示的に地図データをオフライン用に保存することができます... 続きを読む

スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net

2011/07/06 694 users NIKE パララックス効果 パララックス メモ 複数

最近ちょくちょく見かけるようになったので 調べた事をメモ。スクロールすると、複数 要素が、それぞれアニメーションするような Webデザイン。視差効果を生み出すような パララックス効果を取り入れたものや、ユニ ークにアニメーションするものなどなど。 以前見たNIKEのプロモーションサイトでちょっと心惹かれたんですけど、特に最近よく見かける気がするのでいくつか参考にしたいサイトを探してみました。単なる... 続きを読む

アップル - Mighty Mouse

2005/08/04 686 users Mighty Mouse しっぽ アップル ワイヤレス マウス

すべてを備えているマウスをさらに良くするには、しっぽをなくせばいい。というわけで、スクロールの概念を変えたMighty Mouseが今度はワイヤレスになりました。シームレスなタッチセンサー搭載の360度スクロール対応マウスはどこにでも持って出掛けられます。 しっぽは不要 安定した信頼性の高いBluetoothテクノロジーを採用したWireless Mighty Mouseはお好きな場所で使えます。... 続きを読む

レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス

2016/03/04 662 users DESIGN フォント トリミング スワイプ コリス

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet... 続きを読む

あのイライラが解消、「Googleマップ」で嬉しい仕様変更 | アプリオ

2016/11/23 521 users 朗報 ウェブサイト 意図通り アプリオ 地図

すべてのスマホユーザーとウェブサイト制作者に朗報です。Googleマップの埋め込み地図でスマホ向けの操作仕様が変更されています。 新仕様では、スマホでウェブサイトに埋め込まれたGoogleマップの上を1本指でスクロールしても、埋め込み地図がスクロールせず、意図通りに画面全体をスクロールできるようになっています。 埋め込み地図のスクロールには、代わりに2本指での操作が要求されます。当然、過去に埋め込... 続きを読む

無料でしかも高品質！1ページで構成されたサイトを作るためのWordPressのテーマファイルのまとめ | コリス

2013/10/21 478 users コリス Demo scrollorama エフェクト 高品質

キャンペーン、ギャラリー、ポートフォリオ、アプリ紹介、ランディングページ、個人ブログなど、1ページで構成されたウェブサイトを作成するWordPressのテーマファイルを紹介します。 全て無料で、レスポンシブ対応です。 Minimable Bootstrapをベースにしたテーマファイルで、Scrolloramaを使ったスクロールのエフェクトを楽しむことができます。 Demo -Minimable P... 続きを読む

スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクトがかっこいいっ！ | コリス

2014/05/27 445 users アニメーションgif コリス センス 最初 エフェクト

ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるか... 続きを読む

CSSでフッタ位置をレイアウトする （CSS Sticky Footer） - youmos

2007/06/18 407 users youmos fixed ブッダ CSS position

CSSテクニックで非常にシンプルだが、是非実践したいのがフッタ位置の調整。フッタの表示位置をCSSのみで調整して、画面の下に表示してくれるようにするテクニック。 画面下に固定表示（position:fixed）ではなく、コンテンツ量が多いときは、スクロールした一番下に表示する。逆にコンテンツ量が少なく、スクロールが発生しない場合でも、きちんと画面の下にフッタが表示される。わかってしまえば、簡単に実... 続きを読む

どうしてブラウザで長文が読めないのか - コトリコ

2009/04/11 400 users コトリコ 長文 スクロールバー ブラウザ 反応

日本語, コンピュータ今日の日記は長いです。 スクロールバーの問題どうしてブラウザで、長文が読めないのでしょうか。今回はスクロールという機能に限定して、考えてみましょう。 スクロールの問題スクロールには様々な問題点があります。その中で、長文が読めない理由と関連が深いのは、下記の三点です。 スクロールバーから得られる情報が少ない スクロールさせる方法が何種類もある 同じ操作で返ってくる反応が異なる次... 続きを読む

[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic | コリス

2014/03/09 381 users コリス パララックス jQuery スクリプト エフェクト

スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロール... 続きを読む

Windowsで作業効率を上げたいならウィンドウ管理ツール『Preme』 : ライフハッカー［日本版］

2013/04/29 376 users ライフハッカー ソフトウェア Windows ウィンドウ 普段

Microsoft , Windows , Windows 8 , 最新テック Windowsで作業効率を上げたいならウィンドウ管理ツール『Preme』 2013.04.29 21:00 Windows：『Preme』はWindowsのウィンドウ管理オプションを追加できるソフトウェアです。「ウィンドウをクリックしなくてもスクロールを可能にする」をはじめ、どのオプションも普段の作業効率をあげるのにも... 続きを読む

Macの調子が悪くなって遅くなった時にディスクの修復をしたら一発で治った | ごりゅご.com

2012/11/24 367 users 修復 ディスク Mac 調子 ご.com

昨日から？もっと前から？なんかイマイチ思い出せないんだけど、どうもMacがやたら遅い感じがしておりました。 パソコン全体が遅いんじゃなくて、どうもFinderだけやたら遅い。 フォルダを開くだけでレインボーマークが発生するし、まともにスクロールも出来ない感じ。 再起動しても全然治らなくて、どーしたものかと思ってたときに思い出したのが「ディスクユーティリティ」の「ディスクの検証」 アクセス権の検証と... 続きを読む

[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr | コリス

2012/05/06 366 users パララックス skrollr コリス head href

skrollrのデモ：ウェブページ skrollrの使い方 skrollrはHTML5+CSS3で実装します。 基本書式 skrollrを使用する際の基本書式は下記のようになります。 「skrollr.css」はskrollrを使用する際のCSSの基本セットが記述されています。 <!DOCTYPE html> <html> <head> <title>タイトル</title> <link href... 続きを読む

「スクショはメモ代わり」「リンクもスクロールも面倒くさい」若者のスクショ文化の理由と実態(高橋暁子) - 個人 - Yahoo!ニュース

2020/07/09 349 users スクショ 高橋暁子 アシスタント スクリーンショット 実態

最近、20代のアシスタントが参考資料をスクショで送ってきて困るというツイートが話題となった。若者はスクショ、つまりスクリーンショットを好んで使用するという話は定期的に話題になる。改めて、実態と理由について見ていきたい。 何でも「スクショ」する若者たち若者世代は何でもスクショする。ある女子高生は、友人... 続きを読む

[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ | コリス

2012/02/23 348 users jQuery コリス パララックス 面白いエフェクト バス

パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。 scrollorama スクロールに合わせて、 [...] 続きを読む

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

2018/09/27 343 users コリス ビューポート エフェクト CSS Apple

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えること... 続きを読む

jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法｜Webpark

2015/10/27 334 users Ｔｒａｎｓｉｔｉｏｎ jQuery Webpark デモ １度

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました... 続きを読む

タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS - かちびと.net

2011/09/15 332 users タブ 実装 ツールチップ net ページスクロール

たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり... 続きを読む

2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ | コリス

2015/04/22 323 users ポパー コリス グリッド フレームワーク フレンドリー

制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material De... 続きを読む

レンダリングを意識したパフォーマンスチューニング

2013/06/24 316 users パフォーマンスチューニング レンダリング 感触 コスト web

レンダリングを意識したパフォーマンスチューニング Presentation Transcript TalkNote × Frontrendレンダリングを意識したパフォーマンスチューニング @pocotan001Hayato Mizuno なぜ最適化が必要か Webの閲覧時はあらかたレンダリングにコストをかけている（スクロール、他ユーザー操作など） ユーザーはOSとの感触が大きく違うものに違... 続きを読む

最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ | コリス

2015/10/28 313 users チェ 主流 レイアウト コリス 前提

最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェ... 続きを読む

[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal | コリス

2014/05/26 307 users アニメー ScrollReveal コリス スクリプト パワー

先日紹介した「Ani.js」の作者様から、更にパワーアップしたスクリプトをつくったよ、と連絡を受けたので紹介します。 jQueryは無しで、縦長ページ用のスクロールに連動したさまざまなアニメーションが簡単に実装できます。 ScrollReveal ScrollReveal GitHub ScrollRevealのデモ ScrollRevealの使い方 ScrollRevealのデモ デモをアニメー... 続きを読む