「リードエンジニアから学ぶMedPeerのプロダクト開発」( https://medpeer.connpass.com/event/181835/ )の登壇資料です。 【発表概要】 もはや若手ではなくなったアラサーエンジニアに頭を擡げる問題はさまざまあります。 技術者としての成長限界(35歳定年…

jQueryで横幅いっぱいのコンテンツスライダー、jQuery Full-width Sliderというプラグインをつくりました。 トップページのメインビジュアルとかで使えると思います。というか昔の案件で使ったものをブラッシュアップしたものです。画像以外も使えます。 jquery.fullwidthslider.1.0 デモ:http://demo.torounit.com/fullwidthslider/ 2012-02-09:デモのCSSを修正。IE対応。 デモの写真はFree.Stockerのを使わせて頂いています。良い写真いっぱいありますよねここ。 使い方 js [js] $(function(){ $(".slide").fullWidthSlider({ width:640, height:480 }); }) [/js] html [html] <div class="sli
これらの設定値を変更することでもろもろ調整が可能になっています。 スクリプト全体はあまりシンプルと言える構成ではありませんが、少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。 設置の際の簡単な注意点としては、HTML構成上このコンテンツスライダー要素全体を囲うブロック要素があった場合は、 その要素の幅は100%になっている必要があります。 併せて、この形状のコンテンツスライダーを1ページ内に複数設置することはあまりないかと思いますが、複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。 ※2016/01/09 改定 カスタマイズに関しては、jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり、CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。 ページネーショ
bell賞味期限切れコンテンツ この記事は公開または最終更新から1703日くらい経過しています。 このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。 レスポンシブにも対応していて、スマホなどのタッチデバイスによるスワイプ操作にも対応したコンテンツスライダーです。 触ってみたらなかなか良い感じだったのですが、日本語の情報が少なかったのでメモ。 Swiperの主な特徴 レスポンシブ 横スライドだけじゃなくて縦スライドにも対応 フリーモード(自分で動かした分だけしかスライドしなくなる) カルーセルモード jQueryなしで単体動作させることもできる(jQueryで発火させることも出来る) コンテンツスライダーなので画像だけじゃなくてなんでも詰め込める などでしょうか? 他にもたくさんありますので、公式サイトのFeaturesを読んでみ
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記(2012/02/04):クロスブラウザに対応しました。
##スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 ##一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じな
Apr 27, 2013Download as PPTX, PDF140 likes50,831 views
調べる方法を知る JavaScriptは調べるとやり方が見つかることが多い 古いものと最近のものがまざってる ごく最近〜未来のものは見つけにくい 以下の総集編的な内容 海外のJavaScript情報を見つけよう 世界のJavaScript情報を読もう 今からRSS購読すべきタグと検索結果 ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ Webの動きはとても早いので、調べ方を知る
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
This is a Slippy Repository You can find the sources for this application on github, and browse the available slide decks in the list below. 5/31の授業内課題回答例 Download 2010-05-30 @ The Internets WEBデザイン学科 WEBプログラミング まとめ1 Download 2010-05-30 @ The Internets WEBデザイン学科 WEBプログラミング Vol.013 Download 2010-05-30 @ The Internets WEBデザイン学科 WEBプログラミング Vol.012 Download 2010-05-30 @ The Internets WEBデザイン学科 WEBプログラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く