IBM DeveloperIBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
jQueryでTwitterのトップページのように一定のタイミングでコンテンツをスライドさせる
Posted: 2011.02.25 / Category: javascript / Tag: jQuery, Twitter Twitterのトップページは人気のツイートが次々とスライドして表示されてますね。 この記事ではjQueryを使用して見た目のスライドするだけの部分を再現してみたいと思います。 ベースとなるhtml+css Twitterの場合は裏でajax的なことを色々やっているのだと思いますが、見た目しか再現しないのでプレーンなhtmlを使用します。 html <div id="slide"> <ul> <li> <strong>2011.02.01</strong> 最初です。最初だけどむしろ最後です。 </li> <li> <strong>2011.02.12</strong> Twitterのトップページのようにコンテンツを一定の時間でスライドさせてみます。<br /
第17回 アニメーションの基礎 | gihyo.jp
こんにちは、太田です。3回ほどJavaScriptの基礎的な内容が続いたので、今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと、難しい・応用的なイメージがあるかもしれませんが、JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで、そのポイントを抑えれば中身は単純なものです。 アニメーションの前提知識 HTMLにおける通常のアニメーションを構成するのは、「特定の要素」に対して、「そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で、「ある値からある値に操作」する、といった要素です。 特定の要素と、CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。 まず、単純にインクリメントするだけというサンプルを見てみましょう。 良くないアニメーション var y = 0;
こてさきAjax:クールなMVCを実現するフレームワーク Angular.js の紹介 - livedoor Blog（ブログ）
先週＆今週は、出張でアメリカ西海岸。そんな折、先週の金曜日（16日）の夜に BayJax meetup が Yahoo! 本社で開催されるということで、参加してきました。 BayJaxは、シリコンバレー地区のAjax & Javascriptに関するMeetUp。大体、半年おきに開催されているようです。今回参加したMeetUpの形態は、Conference形式（勉強会ののりに近い）。日本との勉強会との違いは、最初にピザを食べてお腹が満たされたところで勉強会が始まることと（こっちの考え方の方が、確かにリーズナブル）、質問が活発なこと（海外では一般的なことですが）。とても、楽しい時間を過ごすことが出来ました。 その中で講演された AngularJS について、今回は紹介します。 AngularJS AngularJSは、とてもシンプルにWeb Appを書くことができる軽量な MVC フレームワ
AngularJS ― Superheroic JavaScript MVC Framework
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement. Visit angular.io for the actively supported Angular. Why AngularJS? HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resu
JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ
JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
JSAPI - JavaScript Reference Manual
This is yet another JavaScript reference manual viewer. The source document was taken from MDN wiki. The keys are working if the search field has focus or your mouse cursor is in the navigation area. ESC key is global. UP - Previous category / Previous item DOWN - Next category / Next item ENTER - Open category / Load selected item ESC - Clear search field and set focus
世界のJavaScriptを読もう @ 2012
調べる方法を知る JavaScriptは調べるとやり方が見つかることが多い 古いものと最近のものがまざってる ごく最近〜未来のものは見つけにくい 以下の総集編的な内容 海外のJavaScript情報を見つけよう 世界のJavaScript情報を読もう 今からRSS購読すべきタグと検索結果 ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ Webの動きはとても早いので、調べ方を知る
海外のJavaScript情報を見つけよう
今、Webは変化してる時だと思います。現状、その変化を見るためには日本だけでは不十分だと思います。 オススメのJavaScriptなどについてのブログ What to Read to Get Up to Speed in JavaScript – Rey Bango に書いてあるBlogsはかなりレベル高い人たちがまとまってる。 上と重複するけど、JSMentorsのMentorsにそれぞれの紹介ページがあるので、その人たちのサイトを見ておいて損はないと思う。 追記: Ecmazing JavaScript Blogsも見ると著名な方のサイトが分かって便利 JavaScript情報配信サイトなど JavaScript Weekly: A Free, Weekly JavaScript E-mail Newsletter 週間JavaScript。メールマガジンで毎週ハイライト的にまとめた情
2012年のJavaScript～PCからモバイルの時代へ | gihyo.jp
あけましておめでとうございます。一昨年、昨年に引き続き、今年も昨年のJavaScriptを振り返りつつ、JavaScriptの近い未来についてちょっとだけお話させて頂きます。 それでは早速、昨年の予想を振り返りつつ、最近までのJavaScript界隈の動きを振り返ってみましょう。 2011年のJavaScript界隈でのニュース 昨年の記事で私は2011年はウェブアプリの普及に向けて、JavaScriptの開発環境とテスト環境がキーになると書きました。まずはこの2つの視点から見てみましょう。 JavaScriptの開発環境 2011年のJavaScriptの開発環境に関する大きなニュースといえば、Ruby on Railsの3.1にCoffeeScriptがデフォルトで採用されたという一件があります。Railsは非常に人気の高いウェブアプリケーションフレームワークで、多くのフレームワークに
JavaScriptでの日付の処理が超便利になる「Moment.js」:phpspot開発日誌
Moment.js - A lightweight javascript date library JavaScriptでの日付の処理が超便利になる「Moment.js」 以下にできることをまとめてみます 文字列からパースして日付オブジェクトを生成 UNIXのタイムスタンプから日付オブジェクトを生成 「Dec 25, 1995」みたいな文字列から日付オブジェクトを生成 日付オブジェクトに時間を簡単に を加算・減算 指定日時からの経過時間を取得 オブジェクトをベースにフォーマットして出力する moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a"); phpにもdateという関数やstrtotimeという関数があったりしますが、そういう便利機能をJSでも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
スマホ最適化でやったこと
※Androidでアクセスされた方は使用感をいただけると幸いです。 （サイトトップ） 先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。 同時に、基本的なスマホ最適化もおこなっています。 ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。 ちなみに、このサイト自体はまだまだ作りかけでして… そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑） （IE系ではちゃんと表示されません…そのうち手入れします。すみません） どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。 では、以下にスマホ最適化でおこなったことをまとめてみました。 （ちなみに対象としているスマートフォンはiOSデバイス（iPh
プログラミング経験者が JavaScript を学ぶためのリソース - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20110721.html
コア・JavaScript ( JavaScript. The Core. ) - oogattaの勉強日記
この文章は、 Dmitry A. Soshnikov さんの、 ECMAScript に関する優れた記事 "JavaScript. The Core." を許可を得て翻訳したものです。世の中に、 JavaScript のブラウザ API や、実装系に関する記事は多々あれど、 ECMAScript の仕様に則って、ここまで詳しく説明してくれている記事は殆ど無いと思います。今回は翻訳できておりませんが、文中で参照されている Dmitry さんの ES3 シリーズも、読み応えのある（ ECMAScript3 の仕様の副読本としても読める）素晴らしい内容ですので、是非チャレンジしてみてください！（ご要望があれば訳します翻訳許可を頂いたので、この記事内で参照されている章から逐次翻訳を進めます！）。 ちなみに Dmitry さんは、計算機科学や数学にも明るい方でらっしゃいます。が、私は違います。極力
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mapee.jp
Learn to Code - for Free | Codecademy