[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/9777d3ddb94171e6f761197ff33a27f86a16ce31/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
無料で使えて勉強になるHTML5/CSS3テンプレート 50
Webサイトを効率良く作成する時に便利なテンプレート。最近ではHTML5/CSS3のテンプレートが多く公開され、無料で使用出来るのにレスポンシブだったりデザインのクオリティも高いものが多いです。今回はそんな無料で使えて勉強にもなるHTML5/CSS3のテンプレートを50個集めてみました。 ※基本的に無料でダウンロード出来るテンプレートばかりですが、規約は各テンプレートによって違います。使用する際は規約に注意してください。 1. Minima Demo / Download 2. Aerial（Responsive） Demo / Download 3. Beautiful and Clean Demo / Download 4. Brushed（Responsive） Demo / Download 5. Woo（Responsive） Demo / Download 6. Type &
HTML5 Experts Works
All Works HTML5 JUMBOTRON by 大津谷亮祐 2,580 node-hue-remote by 吾郷 協 2,198 MySQL Console by 田中洋一郎 2,958 ChromeMyAdmin by 田中洋一郎 2,982 HTML5杯 by 面白法人カヤック 2,694 dialog element demo by えーじ 2,279 wri.pe by 増井 雄一郎 2,174 StyleStats by 石本 光司 2,632 csv2table by 高橋 登史朗 2,965 ccchart by 高橋 登史朗 3,582 Hue Video Ambilight by 吾郷 協 2,690 Caption Phone / 字幕付きボイスチャット by 仲 裕介 3,865 WebRTC Chat on SkyWay by 小松 健作 3 jsdo.
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
JavaScriptライブラリの気になる実装をどうやって見ていくか
はじめに 毎日新しいJavaScriptライブラリが登場していると思いますが、それらがどういう実装になっているかを知ることはライブラリを使う以上に大事かもしれません。 ソースを全部読めば分かるかもしれませんが、それをやるには時間が足りません。 JavaScriptに限った話では無いですが、今回はJavaScriptを例に”特定の機能はどうやってるんだろ?”という事を調べる方法についてです。 探す前にドキュメントに載ってないかを見るのが手間がなくて一番よいですが、書いてない場合は実装を見ます。 Vue.js 今回はVue.jsというAngularJSやKnockoutのようなViewとModelのデータバインディグを行うライブラリを例に、データバインディグはどうやっているのかを2つの方法で調べてみたいと思います。 コードをステップで見ていく これはよく見る方法で皆さんもやったことがあると思い
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ぺちこです。 先日水族館に行ったら「ペンギン12種模型セット」なるものをショップで発見し、危うく買うところでした。 Suicaペンギンのモデルはおそらくアデリーペンギンですが、私が愛してやまないのはジェンツーペンギンです。どうでもいいですね。（興味をもった人はみんな友達） さて、以前にデザイナーのせいとくんが Sassの導入方法と Sassの基本テクニックについてまとめてくれていましたが、今回はそれらを踏まえて、コーディングに役立つextend＆mixin集を作ってみました！ 日々ちょこちょこと作っては使いまわして・・を繰り返しており、あると便利なものは先にまとめておけば楽ではないかと、やっと気付きました。 サンプルで作ったhtmlとscssファイルを一式ダウンロードできるようにしていますので、そのまま使っても良し、各自（各社）毎のコーディングルールに合せて改良しても良し、要ら
2013年 : 無料で使えるクオリティの高いWordPressテーマ 100 « nanomal
今年もあと40日ほど。毎年この時期に無料で利用できるクオリティの高いWordPressテーマを紹介しています。3回目となった今回も2013年に公開されたテーマを中心に、無料で使えるクオリティの高いWordPressテーマを100テーマ集めてみました。 WordPressで新しくサイトを作る際や、気分転換でテーマを変えてみようと思っている方の参考になれば嬉しいです。 2015年版を公開しました。よければこちらもご覧ください。 2015年 : 無料で使えるクオリティの高いWordPressテーマ 120 Old Post 過去のWordPressテーマまとめです。 2012年 : 無料で使えるクオリティの高いWordPressテーマ 100 無料で使えるクオリティの高いWordPressテーマ 150 Category 01. Magazine 02. Blog 03. Portfolio 0
AngularJSのスゴさが伝わるデモ
当サイトの趣旨 AngularJS のキモは動的なデータバインディングにあり、データを変えたら View が動的に変わるということです。これをクライアントサイドのみでのデモで実感するのは難しい ところがあります。そこで当サイトではサーバーサイドとの通信をまじえた実用的な AngularJS のデモを構築しました ソースコードなどを見たりしつつ、あそんでみてください。 (このデモサイトのサンプルコードは AngularJS と node.js で記述されています。) サインアップフォーム 簡単な管理画面風のデモ こちらのコードは github.com/tokuhirom/demo.64p.orgで確認できます こんなデモもいれてよ、みたいな提案があれば p-r で送っていただければホスティングします。 ここを見て! AngularJs のキモは、データをかえるといいかんじに HTML がかき
[JS]異なる高さのパネルを高いものに揃えたり、指定した高さに揃えるスクリプト -Equal Column Heights 2.0
Demo 7: 高さを変更する際にさまざまなスタイルを加えることができます。 ここでは背景色をグレーに変更。 Equal Column Heights 2.0の使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 各パネルを内包するラッパーを用意します。 <div class="hoge"> <div>パネル</div> <div>パネル</div> <div>パネル</div> </div> Step 3: JavaScript jQuery
無料でしかも高品質！1ページで構成されたサイトを作るためのWordPressのテーマファイルのまとめ
キャンペーン、ギャラリー、ポートフォリオ、アプリ紹介、ランディングページ、個人ブログなど、1ページで構成されたウェブサイトを作成するWordPressのテーマファイルを紹介します。 全て無料で、レスポンシブ対応です。
固定ヘッダーを簡単に実装可能なJavaScript「On Scroll Header Effects」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。 公式ページはこちら： https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ デモ まずは、下記リンクからデモをご覧ください。 https://211.125.65.24/demo/2013/10/effect/ ※現在はサービスを終了しています。 実装手順 使用するのは「jQquery」と「waypoints.js」の2つです。 まずはHTMLとCSSを用意します。 CSSの読み込み <link rel="styles
rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
もう XAMPP / MAMP はいらない！
Vagrant で作る PHP 開発環境
7. エンジニアSさん (c) 2013 Masashi Shinbara @shin1x1 1162 <VirtualHost *:80> 1163 ServerName candycane.local 1164 DocumentRoot "/Users/shin/sandbox/demo/candycane/app/webroot" 1165 </VirtualHost> 1166 1167 <VirtualHost *:80> 1168 ServerName demo.local 1169 DocumentRoot "/Users/shin/sandbox/demo/20130601_phpcon" 1170 php_value vld.active 1 1171 </VirtualHost> 1172 1173 <VirtualHost *:80> 1174 ServerName
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://impulse.luster.io/examples.html
無料で高品質！レスポンシブ対応のWordPressのテーマファイルのまとめ
プラグインやチュートリアル 25
Bootstrap 3.x対応、ミニマルから1ページで構成されたサイトまで高品質な無料のテーマファイル7つ -Black Tie
マウスオーバーエフェクト Creative Link Effects