pops さん プロフィール

  •  
popsさん: POPS WEB KOUBOU
ハンドル名pops さん
ブログタイトルPOPS WEB KOUBOU
ブログURLhttp://pops-web.com/main/index
サイト紹介文jQuery.AS3.BaserCMS.関連情報を発信、一つの作品として制作しています。そのほか関連リンク。
参加カテゴリー
更新頻度(1年)情報提供28回 / 365日(平均0.5回/週) - 参加 2012/05/17 13:41

pops さんのブログ記事

  • jQuery レスポンシブ・クロスフェード処理2
  • Transitもどき、Pager コントロール設定可能なJSを、クロスフェード専用に修正しました。このJSの便利なところは、陰影処理をした場合に自由に左右に空白を付ける事が出来る。つまり画像は小さくなるが、余裕を持って配置できる事です。img要素を重ねた単純な構造で設置も簡単です。 jQuery レスポンシブ・クロスフェード処理2のテスト「前々ページ」に掲載のTransitもどきのJSを修正して、クロスフェード専用にしたも [続きを読む]
  • jQuery レスポンシブ・Transitもどき処理
  • クロスフェード以外のエフェクトも簡単に出来る構造で、最も構造が単純でリサイズされた時の処理も簡素化されています。但し、TransitはCSS3処理では有りません。通常のjQuery animate()で数多くのエフェクトを組み合わせましたもので、余り見かけないものと思います。相違はデモで確認ください。 jQuery レスポンシブ・Transitもどき処理のテスト色々なエフェクト処理を内包したものです。CSS3処理では有りませんので [続きを読む]
  • jQuery レスポンシブ・クロスフェード処理
  • 2枚の画像を重ねればクロスフェードが実現します。レスポンシブ形式にして、コントロールボタン付き(内側)、サムネール表示の切り替えが出来る様に機能を拡張したものです。スライダーより構造および処理が簡単になっています。クロスフェード以外のエフェクトも簡単に出来る構造です。 TOP画像レスポンシブ・クロスフェード処理のテスト「前々頁」のレスポンシブ・スライダーを、クロスフェード用に改造しただけです。 [続きを読む]
  • jQuery レスポンシブ・スライダー、外側にボタン配置
  • 前頁のレスポンシブ・スライダーの改造です。コントロールボタン付き(外側)、エンドレスタイプ、サムネール表示の切り替えが出来る様に機能を拡張は同じです。通常のレスポンシブデザインHTML上でも動作します。コントロールボタンが外側についていますので少々メンドウですから余り使用されないようです。 TOP画像Slide処理エンドレスタイプ(外側にボタン配置)のテスト前頁のレスポンシブ・スライダーを、すこし機能拡 [続きを読む]
  • jQuery レスポンシブ・スライダー、エンドレスタイプ
  • 前頁のレスポンシブ・スライダーは説明のために簡略しています。コントロールボタン付き、エンドレスタイプ、サムネール表示の切り替えが出来る様に機能を拡張してみました。通常のレスポンシブデザインHTML上でも動作します。その振る舞いなどを調べてみます。一言でいえば大変です。 TOP画像Slide処理エンドレスタイプのテスト前頁のレスポンシブ・スライダーを、すこし機能拡張しただけで、原則的に構造など代わりは [続きを読む]
  • jQuery レスポンシブスライダー処理
  • レスポンシブデザインで「TOP画像のスライド」処理等をレスポンシブ対応にしてみました。結構構造と設定などがメンドウですが、大変フシギな事に一応動作します。当然、baserCMSに限らず通常のレスポンシブデザインHTML上でも動作します。その振る舞いなどを調べてみます。 TOP画像Slide処理のテスト画像のレスポンシブ表示の知識をえて、スライド(アニメ)処理を行ってみます。実際に色々作り、その差異を調べてみます [続きを読む]
  • baserCMS4.0系 TOP画像のエフェクト処理3
  • baserCMS4.0系レスポンシブ対応の「TOP画像のエフェクト処理」の続きで、ブラウザ幅一杯に画像を表示するタイプで「Transitionもどき」で処理してみます。CSS3処理ではないので、余りブラウザを問いません。実際画像は大きいがスマートフォンでは当然小さく表示するのが難点ノドアメです。 1. ブラウザ幅一杯に画像を表示するので、PC用として大きい画像を用意します。(幾分小さめでも拡大しますが、当然ぼやけて表示品 [続きを読む]
  • baserCMS4.0系 TOP画像のエフェクト処理2
  • baserCMS4.0系レスポンシブ対応の「TOP画像のエフェクト処理」の続きで、少し簡略化にしてみました。また通常のjQueryを使用して「Transitionもどき」でどれだけ処理できるかもテストしてみます。CSS3処理ではないので、余りブラウザを問いません。 baserCMS4.0系 TOP画像のエフェクト処理2のテストmax-widthで処理しているため、少々複雑な面もありますが、まだIE系でも見るために単純なことしか出来ません。CSS3では [続きを読む]
  • baserCMS4.0系 TOP画像のTransition処理
  • baserCMS4.0系レスポンシブデザイン「TOP画像のTransition処理」画像分割処理をレスポンシブ対応にしてみました。「Transition処理」部分の縮尺変更で対処します。動作にはHTML5ベースが条件です。 baserCMS4.0系 TOP画像のTransition処理のテスト「Transition処理」部分をmax-widthで処理出来ないため、縮尺変更で対処しているのが特徴に成ります。「Transition処理」については当方の記事を参照ください。jquery.tran [続きを読む]
  • baserCMS4.0系 TOP画像のエフェクト処理
  • baserCMS4.0系をローカル環境にインストールしたレスポンシブデザインでテーマの「TOP画像のエフェクト」(アニメ)処理をレスポンシブ対応にしてみました。結構構造がメンドウですが、一応動作します。 baserCMS4.0系 TOP画像のFadeおよびSlide処理のテスト画像のレスポンシブ表示の知識をえて、次はエフェクト(アニメ)処理を行ってみます。構成などは前ページの技法を踏襲します。実際に色々作り、その差異を調べてみま [続きを読む]
  • baserCMS4.0系 TOP画像のレスポンシブ表示
  • baserCMSが4.0系レスポンシブデザインでの、TOP画像のレスポンシブ表示等のテストをします。クラス化して設定変更出来る様にも工夫します。 TOP画像のレスポンシブ表示のテスト画像のレスポンシブ表示とTOP画像のエフェクト処理の2つについて考えて見ますが、先にTOP画像のレスポンシブ表示よりテストしてみます。「無料レスポンシブHTMLテンプレートNo.028」#mainImgと同じになりますが1箇所のみの使用になりますので、クラ [続きを読む]
  • baserCMS4.0系 レスポンシブデザインのテーマ制作2
  • baserCMS4.0系をローカル環境にインストールし、レスポンシブデザインでテーマを制作テストして問題点などを探ってみます。前ページの続きで主に各種「固定ページ」「ページテンプレート」「その他」の説明になります。 Apacheのlibssh2モジュールの警告が出る場合、ブログの新規追加でエラーが出る場合は、下記ページ最終段「MySQLのsql_modeとApacheのlibssh2モジュールについて」を参照ください。【参照】当方の記事 [続きを読む]
  • baserCMS4.0系をローカルにインストールする
  • baserCMSが4.0系にバージョンアップしました。ローカル環境にインストールしてみました。以前の3.0系とはサイト管理系統が全く違う仕様になっています。レスポンシブデザインでテーマを制作テストして問題点などを探ってみます。また、PHPのバージョンの関係で、前頁で説明の通りVertrigoServを複数設置してインストールしています。 ● Apacheのlibssh2モジュールの警告が出る場合、ブログの新規追加でエラーが出る場 [続きを読む]
  • VertrigoServを複数使用する
  • PHPのバージョンの関係で、ローカル環境に構築しているVertrigoServを複数使用したいので、インストールフォルダを換えて最新バージョンのVertrigoServをローカルに構築する。簡単に複数のVertrigoServ使用が可能です。これは、当方でbaserCMS4.0系をローカルでテストする準備のためである。 VertrigoServを複数使用するテストCMSで有るBaserCMSが4.0系になり、PHPのバージョンの関係で。VertrigoServを複数設置しなけ [続きを読む]
  • SVG.js filter.image()、image.filtererについて
  • SVG.js プラグインsvg.filter.js(v2.0.2)にバージョンアップに伴い各種Filter処理がやり易くなりました。マニュアルも充実されています。filter.image()、image.filtererについて詳しくテストします。 SVG.js filter.image()、image.filtererについてテスト各種Filter処理は「SVG.js プラグインsvg.filter.jsのFilter処理」で説明しましたが、filter.image()、image.filter、colorMatrixのアニメーションについて少し詳しく調 [続きを読む]
  • SVG.js colorMatrix シミュレーション
  • SVG colorMatrixは直感的に判り難いのでシミュレーション形式で画像加工出来る様に工夫してみました。svg.filter.js(v2.0.2)を使用しています。ローカル画像で処理出来ますので加工の結果が判り易いと思います。 SVG.js colorMatrix シミュレーションテストDEMO 画像のcolorMatrixフイルター加工 シミュレーションご注意、Chrome.Firefox.IE11等、モダンブラウザでご覧ください(Chrome推奨)。 シミュレーション結果の例 [続きを読む]
  • SVG.js プラグインsvg.filter.jsのFilter処理
  • SVG.js プラグインsvg.filter.js(v2.0.2)にバージョンアップに伴い各種Filter処理がやり易くなりました。マニュアルも充実されています。但しまだ未対応の部分も有りますが工夫しながらテストします。 SVG.js プラグインsvg.filter.jsのFilter処理テスト各種メソッド、クラスなど明らかになりましたので、および各種filterの表示とDropShadowの追加などのテストを行ってみます。DropShadowのみの場合は「前ページ」を参照くだ [続きを読む]
  • SVG.js プラグインsvg.filter.jsバージョンアップでDropShadowを処理
  • SVG.js プラグインsvg.filter.js が去る、2016/03/02、v2.0.2 にバージョンアップしていました、以前のJSでは、DropShadowが処理できませんでしたのが修正され、マニュアルも充実されています。 SVG.js プラグインsvg.filter.js DropShadowのテスト各種メソッド、クラスなど明らかになりましたので、DropShadowおよび各種filterの表示テストを行ってみます。ご注意、Chrome.Firefox.IE11(一部機能しません)などSVGに対応した [続きを読む]
  • SVG.js GradientとPatternについて(追加)
  • SVG.js GradientとPatternについては別ページでも書いているが、同心円Gradientなど追加の事柄である。当方独自の方法をも取りますが、一応正常に可動します。何も知らない者が「SVG」を触るのですから大変無謀なことです。 SVG.js GradientとPatternについて(追加)の表示のテスト ご注意、Chrome.Firefox.IE11(一部機能しません)などSVGに対応したブラウザでご覧ください。Chromeを推奨します。このページは下記ページ [続きを読む]
  • SVG.js viewbox() bbox()とIconの表示
  • SVG.js SVG.js viewbox()とbbox()、SVG Iconの表示について調べてみます。当方独自の方法をも取りますが、一応正常に可動します。何も知らない者が「SVG」を触るのですから大変無謀なことです。 SVG.js viewbox()とbbox() Iconの表示のテスト ご注意、Chrome.Firefox.IE11(一部機能しません)などSVGに対応したブラウザでご覧ください。Chromeを推奨します。 SVG.js 使用の基本的な説明基本的な説明下記ページ参照く [続きを読む]
  • SVG.js matrix()と3D風Carousel
  • SVG.js matrix()について調べてみます。一部当方独自の方法をも取りますが、一応正常に可動します。何も知らない者が「SVG」を触るのですから大変無謀なことです。 SVG.js matrix()のテストSVG.js matrix()について調べてみます。マニュアルにサンプル無しなので、大変苦労します。ご注意、Chrome.Firefox.IE11(一部機能しません)などSVGに対応したブラウザでご覧ください。Chromeを推奨します。このページのJSは「IE11」では [続きを読む]
  • SVG.js siblings()とposition()
  • SVG.js siblings()、position()について調べてみます。一部当方独自の方法をも取りますが、一応正常に可動します。何も知らない者が「SVG」を触るのですから大変無謀なことです。 【記事更新のお知らせ】家族が認知症のため介護の必要が生じ、よって今後、記事の更新などが思うように捗りませんのでご理解ください。届出と雑用などが多くこの記事も2ヶ月ぶりの記事になります。SVG.js siblings positionのテストSVG.js sibli [続きを読む]