[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory
デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides"> <li class="js_slide">1</li> <li class="js_slide">2</li> <li class="js_slide">3</li> <li class="js_slide">4</li> <li class="js_slide">5</li> <li class="js_slide">6</li> </ul> </div> </div> Step 2: CSS
![[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1cb6498582cf16c5feffd074f068f12f4d958a9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040901.png)
[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
AngularJSのディレクティブ機能でHTMLテンプレートを使いこなそう
はじめに AngularJSでは最初から多くのディレクティブ機能が備わっています。このディレクティブ機能を使ってHTMLテンプレートを記述していきますが、慣れないとどのようなディレクティブがどのような動作をするのかがわからなく、リファレンスとコードを行き来することになります。 また、リファレンスでは用途ごとの整理されているわけではないので、分かりにくい一面もあります。そのため、今回は基本的なディレクティブ機能と制御に関わるディレクティブ機能に限定し紹介します。 対象読者 jQueryなどを使っている開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（39.0）、IE11、Firefox（35.0）、Safari（8.0.
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
runstant
Aboutrunstant とは, ログイン不要, サーバー通信不要で コーディング, 実行, 保存ができる世界一簡単にプログラミングを始められるツールです. 嘘です. いや世界一以外はホントです. 結構便利です♪ Usage右側にコードを書く`save` ボタン(Command+S) を押す左側に実行画面が表示されますURL にコード情報が保存されますOther右上の html/style/script でそれぞれ編集を切り替えることができます右上の setting でタイトルや詳細の設定ができます右上の share で短縮URLをコピーしたり, twitter や facebook でシェアしたりダウンロードできます.要望や不満, お気付きの点などありましたらこちら @phi_jp の方までご連絡ください. あっあと一応 tmlib.js 公式エディタなので tmlib.js のことも
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。 さてみなさん「Node.js」って知っていますか？ 僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。 ▼2020年最新版はこちら！ Node.jsとは 一言で言うとアツいJavaScriptです。 通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。 例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスし
今日から始めるCoffeeScript - KAYAC Engineers' Blog
こんにちは。毎年花粉症になりかけている飯塚です。 最近のNode.jsの普及などによってサーバサイドJavaScript界隈が盛り上がっています。 そんなホットなJavaScriptをラクにかつエレガントに書くためのCoffeeScriptという言語をチュートリアル風に紹介します。 何かしらのライブラリを自分で書く程度にJavaScriptで開発している人は絶対に使ったほうがいいと思います。 JavaScriptを知っていれば1-2時間程度で十分駆使できるようになります。 （2011/6/28：@m_satyr様にご指摘頂いた箇所を修正しました。） 目次 CoffeeScriptとは？ インストール Hello World 構文 関数 変数展開 Objectの生成 ループ 存在チェック ヒアドキュメント thisのバインド クラス 無名関数 {var} Tips ?の使い分け 存在チェック
AngularJSでMVCプログラミングをはじめよう
対象読者 jQueryなどを使っているJavaScript開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（36.0）、IE11、Firefox（31.0）、Safari（7.0.5）の環境で確認を行っています。 サンプルアプリケーションの概要 今回作成するアプリケーションは、単純な「タスク管理」のアプリケーションです。次のような3つの画面を作ります。 タスク（件名とメモ）を登録する画面 登録したタスク一覧を表示する画面 登録したタスクを参照する画面と、削除する為の画面 ページ遷移はシングルページアプリケーション形式で作成します。シングルページアプリケーションとは、jQuery Mobileなどでも使われている方式であ
Webアニメーションを高速化するために知っておくべき10のこと（後編）
Webアニメーションを高速化するために知っておくべき10のこと（後編） 斉藤 祐也（株式会社リッチメディア） 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
Facebookみたいにtextareaの一部を強調する - Qiita
Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね（gif画像参照）。 これのやり方を解説します。 TL;DR textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ textareaの中にDOMを入れても表示されない パッと考えるとtextareaの中にDOMツリーを入れるとそれが表示されるんじゃないか、と思うかも知れません が、ぜんぜんそんなことは無くて、そのまま文字列が表示されてしまいます。 ご存知のようにtextareaやinputは、他の要素のように子要素を表示するのではなく、自身のvalue属性の値を画面に表示する働きをします。value属性は文字列を格納するためのものなのでDOMを入れられないわけですね。 強調用のDOMを重ねあわせる textareaにはDOMをそのまま入れられないので、仕方がなく周り
モバイルブラウザでもサクサクに動作する最適化6つのノウハウ
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
フォームでユーザーにヘルプをツールチップで実装するjQueryプラグイン・jQuery FormHelp
割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。 フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。 動作サンプルです。HTMLを普通にマークアップするだけで自由にツールチップ内に実装できるのは楽ですね。 コード 本体とプラグインを読み込みます。 $.formHelp();コールします。 <input id="input-email" type="email"/> <span class="helptext" data-for="#input-email"> <p>ここにツールチップ</p> <hr> HTMLが自由に使えます <ul> <li>One<
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
JavaScriptでアニメーションを書く初歩の初歩
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング - あのねノート。
2013-08-24 200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング やり方 はじめに この前enchant.jsでぷよぷよ by おっ立ち野郎を作って公開しました。 enchant.jsで作ったHTML5+JavaScriptな「ぷよぷよ」を公開しました これを知り合いR君に紹介したところ、嬉しい事に「僕もぷよぷよ作りたい！」といってもらえました。それでぷよぷよの解説サイトをネットで見つけて紹介しようと思いました。 しかし、テトリスの解説サイトは山ほどあるのに、ぷよぷよプログラミングの解説サイトが全然ありませんでした。特に完成まで解説しているサイトは見つけられませんでした。テトリスはあるのに。 ということで、今回ぷよぷよプログラミングの完成までの解説を書いてみました。これはenchant.jsの基礎をひと通り勉強された方におすすめです。クマをちょこちょこ動かすだけ
IPアドレス・クッキー・JavaScript・UAなどを使わずユーザーを個別に追跡する方法
by Vernon Swanepoel ウェブサイトのユーザーがどれぐらいページを見てくれているのか、訪問頻度はどれぐらいなのかといった情報を追跡するのにはクッキー(Cookie)やJavaScriptなどが使用されますが、そうやって追跡されるのがイヤだということでCookieを受け入れないように設定したり、JavaScriptをオフにしているという人もいるはず。しかし、それでもユーザーを個別に追跡する方法があります。 Lucb1e.com :: Cookieless Cookies http://lucb1e.com/rp/cookielesscookies/ これはオランダ在住でコード・セキュリティ・ネットワークを愛しているというlucb1eさんが明らかにしたもの。手法としては新しいものではなく、多数のサイトで使われているにもかかわらず、そのことを認識している人はほとんどいないというも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJS入門 ｜ シリーズ ｜ Developers.IO
IDEA * IDEA
IDEA * IDEA
