HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
gruntで快適JS/CSSビルド生活
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ この記事はgrunt version 0.2.x のもので、grunt 0.3 からはAPIが変更されています grunt というJS/CSSのビルドツールが便利だったので紹介します。(Mac/Linux) cowboy/grunt - GitHubこのgruntってのは、JS,CSSを全部まとめて繋げる、まとめてJS lintする、minifyする見たいのをタスクとして登録しておくと、それ実行すればちゃちゃっとやってくれちゃうやつです。さらにwatchっていう機能使えば、ファイルが更新されたらそのタスクをやってくれるみたいなのも。 似たモノで、MakeとかRakeとかCakeとかそういう
AngularJS 使って手軽でリッチな入力フォームを作ってみた - Can I do web?
意外とAngularJSを使った入力フォームのサンプルが無かったので作ってみました。 まず作ったものがコチラ AngularJSを使えば手軽にシンプルかつリッチな入力フォームを作ることができます。自前のJavaScriptを用意すればさらに凝ったものも作ることができますが、今回は自前のJavaScriptを使わないでもこれだけできます！というサンプルです。 個別のバリデーションチェック サンプルで行われているバリデーションは、全てAngularJSによるもので、JavaScriptによるコードの記述は一切書いていません。その代わりに、以下のような記述でチェックする内容を指定しています。 <form method="post" name="userInfo"> ... <input type="text" name="userName" ng-model="userName" ng-minl
MySQLの設定ファイル my.cnf をgithubにて公開しました & チューニングポイントの紹介 - blog.nomadscafe.jp
YAPC::Asiaのスライドで予告していた通り、実際に弊社のいくつかのサービスで使っている my.cnf を公開しました。 github: https://github.com/kazeburo/mysetup/tree/master/mysql 今回、公開した理由はMySQl Beginners Talksの発表の中でも触れている通りです。MySQLのソースコード中に含まれるサンプルのmy.cnfが最近のサーバハードウェアや運用に合わなくなって来ているという状況で、自分の設定にイマイチ自信が持てていない人は少なくないはず。そこで各社秘伝のタレ的な my.cnf をOpen & Shareすることで、モダンなmy.cnfを作り上げる事ができるんじゃないかという考えの下、今回 github にて公開しました。 ファイルは4つあり、それぞれ MySQL 4.0、5.1、5.5、そしてテスト中
自分用twitter bootstrapを管理する
ウェブ業界なんかだとデザイナーさんがいるので、「デザインがーーーーー」みたいなのはクリティカルな問題にはならないのかもしれないが、製薬系の研究所とかだと、研究所内のシステム構築のためにデザイナーを雇うとかまずあり得ないので、しょっちょう悩みます。 特に、イントラでウェブサービスやろうとか思ったらjQuery使って見ためを良くしたりとかユーザビリティとか考えて使いやすくしたりといったフロントエンドのスキルは必須。 つまり、モックを使ってできるだけ早く70点のユーザーインターフェイスを作るスキルが超重要なわけだ。 しかも、twitter bootstrapを使おうと思ったら、頻繁なバージョンアップに対応しないといけないわけで。 GitHub対応 GitHubハンズオンやったので、その時の@ishisakaの資料を参考にすればいいと思います。 とりあえず、本家からforkしたらcloneして、u
grunt始めてました。 - どこぞのエンジニアなマネージャーのブログ。
npm install -g gruntで、gruntをインストール js-minify さっそくjsをminify grunt.jsってのを作って開いて。 module.exports = function(grunt) { grunt.initConfig({ min: { dist: { src: ['./js/index.js'],//grunt.jsのカレントディレクトリから dest: './js/index.min.js' //minified file }, } }); grunt.registerTask('default', 'min'); };(minifiedってあってるのか?) で gruntってgrunt.jsのところでやると、minifyされます。 次に、css-minify css-minifyは、初期状態では出来ないようで、grunt-contribっての
GitHub直伝 プルリクエスト活用の3つのコツ
GitHubの特に重要な機能である「プルリクエスト」の活用方法についてGitHub社内でのノウハウが公式ブログの記事になっていました。GitHubが今回更新をしたAboutページの開発でも2ヶ月の間に10人のメンバーが130のコミットと91のコメントのやりとりがブランチ上で行われていました。 GitHubberによる講演などでもプリリクエストが重要な機能であると強調されているようです。 記事によるとプルリクエストは新しいアイデアについてのディスカッションを生み、協力してくれる人を見つける為のとても良い方法との事で活用するコツとして以下の3つの点を紹介しています。 プルリクエストはなるべく早く起こす プルリクエストは機能についての意見交換をする良いきっかけになります。コードの修正が終わっていなくてもなるべく早くプルリクエストをする事で、最後にまとめてフィードバックをするのではなく発展的にコメ
俺史上最強のiptablesをさらす - Qiita
#!/bin/bash ########################################################### # このスクリプトの特徴 # # 受信・通過については基本的に破棄し、ホワイトリストで許可するものを指定する。 # 送信については基本的に許可する。ただし、サーバが踏み台になり外部のサーバに迷惑をかける可能性があるので、 # 心配な場合は、送信も受信同様に基本破棄・ホワイトリストで許可するように書き換えると良い。 ########################################################### ########################################################### # 用語の統一 # わかりやすさのためルールとコメントの用語を以下に統一する # ACCEPT :
JavaScriptでのbuilt-in/DOM objectのprototype拡張 - monjudoh’s diary
@rosylillyが気にしていた のでまとめた。 built-in/DOM objectのprototype拡張による弊害 追加したプロパティ/メソッドがfor inで列挙される var obj = {a:1}; for (var i in obj) { console.log(i); } こうするとaだけ出るはずが、 Object.prototype.b=function(){}; こうした後だとa,bが出てしまうって奴ですね。 そのまま代入しないでObject.defineProperty/definePropertiesでenumerable:falseのプロパティとして定義すれば列挙されなくなるので特に問題ありません。 今回挙げるprototype拡張の弊害の内唯一これだけはECMAScript5時代になって解消されました。唯一これだけは。 built-in/DOM object
Greasemonkey で直接 CoffeeScript を書く方法 - Qiita
（追記1）Firefox 21 以降 E4X がサポートされなくなったため、現行の Firefox では本記事のコードは動きません （追記2）E4X を使わずに記述する方法に変更しました。 //;### // ==UserScript== // @name coffeetest // @namespace http://example.com/coffeetest // @include * // @grant none // @require http://coffeescript.org/extras/coffee-script.js // @version 1 // ==/UserScript== CoffeeScript.eval((function(){/* # coffeescript from here ### class User constructor: -> @name
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
