[B! javascript][css] satoudosuのブックマーク

縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！

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

satoudosu 2012/06/19

リンク

Status Message Design with CSS

satoudosu 2012/06/06

リンク

[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js

iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。リンクページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。アドレスバーページがロー

satoudosu 2012/05/22

リンク

これが決定版？フォルダを監視してCSS/JavaScript/HTMLを生成·Fire.app MOONGIFT

Fire.appはフォルダを監視してSass/Compass/CoffeeScriptを自動変換するソフトウェアです。最近はCSS/JavaScript/HTMLをそのまま書くのではなくSassやCoffeeScript、Haml/Markdownを使ってそれぞれのフォーマットに変換するのが当たり前になってきています。そこで使ってみたいのがFire.app、自動ファイル変換ソフトウェアです。起動します。メニュー常駐型です。設定画面です。 Growlを使った通知に対応しています。 Livereloadに対応しています。履歴です。フォルダを指定しました。プロジェクトテンプレートを生成してくれる機能があります。生成しました。後は修正すると自動的に別フォーマットファイルを生成してくれます。 Fire.appはSass/CompassからCSSを、Haml/ERB/Markdownか

satoudosu 2012/05/15

リンク

Learn HTML5, CSS3, Javascript - video style tutorials

Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch

satoudosu 2012/05/14

リンク

7 Amazing Interactive Infographics Created With HTML, CSS and Javascript

7 Amazing Interactive Infographics Created With HTML, CSS and Javascript Introduction Infographics (Information graphics) are graphic visual representations of information, data or knowledge. These graphics able to let us absorb the information in an effective way. In real life, we can easily find some in our surrounding, for example, maps, train route, signs and so on. On the internet, we can fin

satoudosu 2012/01/18

リンク

[JS]CSSファイルに変更を加えてもリフレッシュ無しで反映させるスクリプト -CSSrefresh

CSSファイルに変更を加えてもページのリフレッシュ無しで変更を反映させるスクリプト（とブックマークレット）を紹介します。 CSSrefresh - automatically refresh CSS files [ad#ad-2] CSSrefreshは制作時に役立つスクリプトで、CSSファイルに変更を加えて保存すると、ページのリフレッシュ無しで変更を反映させます。 CSSrefreshの使い方使い方は簡単で、2通りあります。 CSSrefreshをインクルードする使用するページにCSSrefreshを外部スクリプトとして記述します。 <head> <link rel="stylesheet" type="text/css" href="css/site.css" /> <script type="text/javascript" src="js/cssrefresh.js"></sc

satoudosu 2011/12/28

リンク

HTMLとJSとCSSだけでスクリーンセーバーが作れるHTMLScreenSaverBuilderを作った - kurainの壺

作った表題のとおりで、HTML と JavaScript と CSS の知識があればMacのスクリーンセーバーを作れるツールを作りました。Xcode も不要です。 html でできることは大概できるので、flash 貼るとか audio ダグで音をならすとか、WebGLで3Dで遊ぶとかかなり何でも出来るのではナイかと思っています。ダウンロード下のリンクからどうぞ！HTMLScreenSaverBuilder 本体と、サンプルで作った ScreenSaver が入っています。 HTMLScreenSaver.zip 作り方 HTMLを準備全画面表示されても、綺麗に表示されるような HTML を書きます。必ず名前は index.html にしてください。例として、はてなフォトライフの人気の写真を表示する HTML を書きました。 https://github.com/kurain/Ho

satoudosu 2011/10/24

リンク

『HTML5 Web Applicationのつくりかた』

1 pixel｜サイバーエージェント公式クリエイターズブログサイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。はじめまして。サイバーエージェントでフロントエンドの開発をしております原(@herablog) です。スマートフォン版アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり