軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML:背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D
今回の目標 読める+書ける=学べる 2時間ちょっとでいきなり書けるようになる訳はありませんが,書いてみないと覚えられないので,2時間かけて触ってみて独学できるようにします. 最初に,1+1=2の原理を覚える必要はないので,2=1+1でも 2=2*1 でも 2=1/2*4 でもいいので,やりたいことをやってみるのが一番です. やること jQueryセレクタをつかってみよう 要素をブン回してみよう スライドショーの動きを追ってみよう 開閉メニューの動きを追ってみよう やらないこと プログラムの基本(習うより慣れる) JavaScriptの構文(書きながら覚える) jQueryPluginの使い方(オプションをいじる以上のことをやろうと思うと難しい) thisなんてしりません $.eachなんてしりません 変数とかIFなんてわかりません jQueryを使えるようにする Downloading j
壁紙・写真8953 webデザイン3925 デザイン3291 絵画・イラスト・アート2193 動物1745 3D1724 UI1291 photoshop1083 フリー1004 風景834 自然821 かわいい689 wordpress679 素材652 テーマ632 チュートリアル626 フォント617 幻想的548 動画530 お洒落524 建築物501 犬430 テンプレ400 イラスト397 psd396 猫384 ロゴ331 jquery297 ブラシ296 プレミアム285 プラグイン274 テクスチャ260 CSS249 ミリタリー221 タイポグラフィ217 名刺213 gif212 都市風景210 インテリア206 宇宙203 エフェクト200 SF188 ポスター186 ファンタジー186
こんにちは。毎年花粉症になりかけている飯塚です。 最近のNode.jsの普及などによってサーバサイドJavaScript界隈が盛り上がっています。 そんなホットなJavaScriptをラクにかつエレガントに書くためのCoffeeScriptという言語をチュートリアル風に紹介します。 何かしらのライブラリを自分で書く程度にJavaScriptで開発している人は絶対に使ったほうがいいと思います。 JavaScriptを知っていれば1-2時間程度で十分駆使できるようになります。 (2011/6/28:@m_satyr様にご指摘頂いた箇所を修正しました。) 目次 CoffeeScriptとは? インストール Hello World 構文 関数 変数展開 Objectの生成 ループ 存在チェック ヒアドキュメント thisのバインド クラス 無名関数 {var} Tips ?の使い分け 存在チェック
Illustrator や Photoshop のペンツール。 初心者の頃は、きれいな曲線が描けなくて悩んだものでした。そんなペンツール、パスの初心者さんのための、ペンツールできれいなベジェ曲線を描くコツを、一連の操作方法とともにまとめてみました。 ペンツールに挫折しちゃった人も、もう一回チャレンジしてみるきっかけになればうれしいです! ペンツール初心者さんが対象の記事です。 Photoshop や Illustrator のペンツール … はっきり言って私はへたっぴーです。ペンツールは切り抜きをするときやイラストを書く時など、絶対に使いこなしたいツールですよね。ペンツールで描く曲線をベジェ曲線、アンカーやハンドル(後述)も含めてパスって呼んだりもしますが、この曲線が初心者さんにはとにかく難しい …。初心者さん向けの Illustrator の本や Webサイトを見ても、ペンツールできれい
複数の異なるエレメントを組み合わせて、複雑で繊細なテクスチャを作成するPhotoshopのチュートリアルを紹介します。 Textured backgrounds in Photoshop ※クリックで拡大 [ad#ad-2] 上記の繊細なテクスチャは複数のレイヤーに、異なるエレメントを組み合わせ、異なるレイヤーの不透明度とモードが使用されています。 Photoshopでのレイヤーの状態は下記のようになります。
NOTE: If you would like some Python development done, my company, Stochastic Technologies, is available for consulting. This tutorial is available as a short ebook. The e-book features extra content from follow-up posts on various Python best practices, all in a convenient, self-contained format. All future updates are free for people who purchase it. Preliminary fluff So, you want to learn the Py
The goal of this book is to provide an Informatics-oriented introduction to programming. The primary difference between a computer science approach and the Informatics approach taken in this book is a greater focus on using Python to solve data analysis problems common in the world of Informatics. The sample code and data files for the book is here: Code Samples. Other courses / web sites using th
CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。 CSS3リファレンス 有名なサイトですね。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。 CSS-EBLOG 各ブラウザで先行実装しているCSSプロパティがまとめられています。 CSS3 Files 【2010.4.25 追加】海外サイトですが非常に見やすいです。各ブラウザの対応状況の載っていて重宝します。 次にブラウザごとの対応状況を確認するサイトを紹介。 HTML5 & CSS3 READINESS HTML5とCSS3のブラウザごとの適応状況を視覚的に見ることができます。2008年からの年別でも見ることができます。 HTML5 & CSS3 Support こちらもブラウザごとの対応状況がまとめられています。CSS3はプロパティ、セ
A JavaScript blog. Twitter | Feed Subscribe by Email Editor Alex Young Contributors Ric Roberts Oleg Podsechin Justin (Gus) Knowlden Search Sponsors Swirrl. Make the most of your data: tools for working with your data online. Get free email and IM reminders with Deadline Welcome to part 14 of Let’s Make a Web App, a tutorial series about building a web app with Node. This series will walk you thro
2009年1月18日日曜日 モダンJavaScript チュートリアル集 JavaScript (ECMAScript) のチュートリアルを集めました。 2009-10-05、1件追加しました。 合計で 17 件あります(コアJavaScript のみカウント)。 目次 コアJavaScript ~ 知恵を身につける ~ クライアントサイドJavaScript ~ DOM, Ajax ~ サーバサイドJavaScript ~ 言語統一の野望 ~ 開発ツール ~ 多様な開発ツールたち ~ 関連リンク コアJavaScript ここに集めたチュートリアルの何本かに目を通してみて下さい。 クライアントサイドJavaScript、サーバサイドJavaScript のいずれでも、 ここで身につけた “知恵” が大いに役立つハズです。 日付 記事 リファレンス JavaScript MDC
最近では企業における機械学習の認知度も高まっていてエンジニアの求人募集でも「望ましいスキル:機械学習」というのをよく見かける。特にweb系の企業だと当たり前のように機械学習を活用した魅力的なサービスが生み出されているようだ。 そんなわけで先日書いた機械学習の入門記事もそれなりに好評で末尾の教科書リストも結構参考にしていただいた様子。ということで、これから機械学習をはじめる人のためにオススメの教科書を10冊ほどピックアップしてみた。 幸いにして機械学習の分野には良書が多い。5年前はナイーブベイズすら知らなかった私も、これらの教科書のおかげでなんとか機械学習を使えるようになりました!(個人の体験談です。効果には個人差があります) 参考: 機械学習超入門 〜そろそろナイーブベイズについてひとこと言っておくか〜 - EchizenBlog-Zwei 最初に既存の機械学習の教科書まとめを挙げておくの
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは? そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目:導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体(JavaScriptファイル)は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
Photoshop持ってないんだけど...という方は、ひとまずトライアル版(30日の期限つき)をダウンロードしましょう。Photoshop買うお金なんてないよ! という方でも、ここで紹介する機能は、Photoshop以外の画像編集ソフトでも使えるものが多いので、参考にしてみてください。 ■ツールバー すべてのツールは紹介しませんが、なるべく多くをカバーします。まずは、写真を探して、さっそく編集してみましょう。 移動ツール(キーボード:V) キャンバス上のどこかをクリックし、ドラッグすると、レイヤーを移動できます。 マーキー(キーボード:M) キャンバス上の一部分を特定の形で選択できます。デフォルトでは長方形(シフトを押しながら行うと正方形に)となっていますが、形は円などにも変更可能です。 ラッソ(キーボード:L) 手動で領域を選択できます。点を打っていくことで、その点を角とした図形の形で選
本のページをめくるエフェクトを実装したい。 そんな方におすすめなのがCanvasを使用した本のページめくりの実装方法を記載した「Case Study: Page Flip Effect from 20thingsilearned.com」という記事のご紹介。 このHTML5RocksというサイトはGoogleが作成したサイトで、 HTML5に関する文書やチュートリアル、APIの使い方をまとめたサイトです。 記事を書いている方もGoogleの中の人のようで非常に勉強になります。 動作デモ ページめくりの動作は ドラッグする事でめくる動作と、クリックでページがふわふわ舞う動きの2パターンがありました。 実際の動作はこちらから見てみてください。 HTMLは非常に単純に出来ており、sectionタグに各ページの本文を記載しているだけのようです。 JavaScriptは本のサイズ取得からアニメーショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く