[JS]面白いコンテンツが作れそう！動画とCSS3アニメーションを同調させるスクリプト -charlie.js
ダウンロードできるデモファイル ローカル環境でデモファイルを見る時は、Chromeでは「file://」で読み込むとフレームレートの変更する時のバグがあるため動作しません。オンラインかFirefoxでご覧ください。 実装は、詳しいドキュメントが公開されていませんが、コードを見ると簡単にできそうです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="charlie.js"></script> Step 2: HTML まずは、動画をvideo要素で配置。 <video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" muted> <source id="mp4" src="http://media.w3
MacでWebサイトデザイン・コーディングするための、黒い画面と仲良くなりながらの環境構築手順メモ | Gatespace's Blog
タイトル長いですが。 これまでGUIアプリで操作してきたことをコマンドラインで操作出来るようにするMacでのセットアップメモ。 いつも忘れるので、現時点での覚え書きです。 自分の手順だけをざっくり書くので、わからなかったりエラーが出たらその内容で検索して調べてください。 2018.11.7 update やることリスト Xcode（iPhoneやiPadのエミュレーターなど） Homebrew（パッケージ管理ツール） Node.js、Grunt、gulp.js Sass + Compass（cssプリプロセッサ） Jekyll + bundler（スタティックウェブサイト） Git（バージョン管理） wp-cli （WordPressをコマンドラインから操作） Virtualbox、Vagrant（仮想マシン・サーバー） bash-completion（ssh実行時のホスト名の補完など）
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
HTML5のプレースホルダをもっと良くする「JVFloat.js」:phpspot開発日誌
maman/JVFloat.js GitHub HTML5のプレースホルダをもっと良くする「JVFloat.js」。 inputの中にグレーで入力するもののヒントを表示できるプレースホルダですが、入力しちゃうと、あれ、これなんだっけ？となる場合がありそうです。 入力数が多くて、曖昧な入力が多いと、使い勝手が悪くなってしまうかも。というわけで、プレースホルダはそのまま表示しつつ、テキストを入力すると、入力したものの上にラベルでヒントを表示してくれるようにするJSライブラリです。 内容を入力すると、ヒントが小さくなって入力したものの上に表示されて分かりやすい また一歩、フォームが進化したかもしれないと思いました。 関連エントリ フィールドへの適切な入力文字数を分かりやすく教えてくれるjQueryプラグイン「wChar」 次世代のクレジット番号入力を提供するプライスレスなJS「Skeuocard
SSHの仕組み!ぼんやりとした理解だったものをすっきりさせようの会 - nigoblog
特にシリーズ化を目論むわけではないですが、 完全に理解しているわけではないけど、使える。 みたいなものってありますよね。 そういうのはよくないのでしっかりと理解しよう! というテーマでやります。 今回はSSHの仕組みについて書いていこうと思います。 参考記事 概要 ~SSHとは~ SSHの仕組みを理解するための用語 鍵交換方式の仕組みと実際のコマンド 便利なオプション まとめ このような流れで書いていきます。 参考記事 こちらを参考にします。(ぶっちゃけこれだけ見ればオッケーな気も。。。) 公開鍵暗号について理解が足りていなかったのでメモ - かせいさんとこ 鍵交換方式による認証 概要 ~SSHとは~ SSHはSecure Shellの略で、あるマシンに別のマシンからアクセス , ログインするというイメージです。 主にサーバー(リモート)にクライアント(ローカル)からアクセスするときに使い
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
17qm.cn-主营企业,商号,行业域名出售转让-domain for sale
合适的域名 是建立品牌的开始 大企业往往选择与品牌名称相契合的域名，而很大一部分中小企业却不重视域名，往往随便注册一个，可不知却在无形中拉低品牌形象，降低客户的信任度，得不偿失。一个好的域名可以降低营销费用，提高企业形象，提升客户的信任度，不用过多的宣传，自然而然能被客户熟识接受。 01. 通过电话、短信、邮件、QQ 、微信方式联系我们，确定购买意向，商谈并确定域名价格。 02. 您可以通过域名注册商站内带价PUSH、淘宝、支付宝、微信、银行付款、对公转账或各大域名平台中介交易。 03. 收到买家款项后，会立即向买家进行域名过户操作，如买家要求转移注册商，我们可提供域名转移密码。 04. 如您需要可提供交易合同，普通纸质发票，交易完成，期待再次合作！顺祝商祺！ 在线沟通
デザイナーが選ぶデザイナーのための無料写真素材サイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エンジニアの王です。 そもそも「素材」というのは「何かを作るための原材料」ですから、デザイナー・グラフィッカーなどにとっての「写真素材」とは、新しい何かを作るためのもととなる写真であって、ほぼそのままアイキャッチとして使ったり、記事内で使ったりするものではありません！ 同じ「写真素材」とは言っても、使い方によっては向き不向きっていうのがありますからね。今回は特にデザイナー向けの無料で使える写真素材サイトをご紹介します！ 私は「デザイナーに優しい写真素材」とは以下のような特徴を持っていると考えています。（もちろんすべてのケースに当てはまるわけではないが） 被写体が明確 背景が単純 同じオブジェクトを複数のアングルから撮っている テクスチャ系 切抜き済み そのため、今回は以上の特徴を多く持っている写真素材サイトだけに焦点をあてて紹介したいと思います！ おすすめ順で列挙していきますので、上位にき
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK
ソーシャルボタン設置コードの注意点 今回の記事で掲載する設置コードは、「スクリプト部分」（JavaScript）と「表示部分」を分けています。 もし同じソーシャルボタンをページ内に複数設置する場合は、各「スクリプト部分」は1度だけ記述すればいいです。その方が読込み時間も短縮できて、表示速度の高速化もはかれます。「表示部分」は設置数だけ配置してください。 「スクリプト部分」の設置場所は、5種類のソーシャルボタンとも、</body>タグの直前がオススメです。もちろん<head>タグ内でもいいけど、前者の方がボタン以外の表示は速くなります。 さらなる高速化をめざしたい方は、5種類のソーシャルボタンのスクリプトを1つにまとめる方法も記事にしていますので、ぜひ参考に読んでみてください。 ツイッター/Twitterの設置コード スクリプトのコード 上でも書きましたが、配置場所はどこでもいいです。ページ
ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」:phpspot開発日誌
ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 2013年09月19日- jInvertScroll - A lightweight jQuery horizontal Parallax scrolling plugin ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 パララックスというと最近よく見ますが、殆どはたて型のスクロールですよね。 横にスクロールすることでまた違った印象を与えることができそうです。jQueryプラグインなので超簡単に実装が可能です 横スクロール型にすることで２DアクションゲームのようなWEBサイトにしてみても面白いかも。 関連エントリ レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 パララックスなスライダーを実装
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
簡単で高機能！デザイナー必見の汎用性が高いjQueryプラグイン7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの傾向を泣く泣く変えました。嵐の相葉君をお手本にこれまで頑張って参りましたが、相葉君には近づけませんでした。無念。 さて、今回はさまざまなシーンで活用できる、汎用性の高いjQueryプラグインを7つほどご紹介させていただきます。簡単＆シンプルで優れた機能のものばかりなので、ぜひご覧ください。ダウンロードできる本家サイトのほかに、日本語で分かり易く解説してくださっているサイト様のURLも合わせて載せておきます。 1.世界一使いやすいスライダー”bxslider.js” カスタマイズ豊富で、設置の仕方も超簡単！弊社CTOづやさんのオススメでもあります。 フリック、スワイプも対応しています。最強すぎます。 ダウンロード：bxslider様
紙・布・デニム・皮・草・木などシームレスなパターン素材のまとめ
草・木をはじめ、ざらっとした紙、デニム地、布地、皮、ライトとダークな繊細な柄など、シームレスなパターン素材をWeb Designer Labから紹介します。 素材は全て個人でも商用でも無料、リンクなども必要なしで、もちろんリンクしてくれる分には大いにありがたい、とのことです。
高速なCSSアニメーションをJSで制御できる「animo.js」:phpspot開発日誌
animo.js ? Labs by Big Room Studios 高速なCSSアニメーションをJSで制御できる「animo.js」。 jQueryベースで利用でき、$(element).animo(args)として簡単に利用が出来ます 個人的にはCSSよりもとっつきやすいなぁという印象です。CSSアニメーションはハードウェアアクセラレーションで環境によっては速いですしね。 コード例。 関連エントリ バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 画像にマウスオーバーでリアルに立体化する3Dアニメーション実装デモ 光ながらアニメーションさせるエフェクト作成jQueryプラグイン「Flare」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 フラットだけど立体的なCSS
もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -
構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
iOS/Android/PCで使えるパララックスページ作成用jQueryプラグイン「skrollr」:phpspot開発日誌