POPSブログ

ブログ記事一覧: css3

jQuery レスポンシブ・クロスフェード処理2

Transitもどき、Pager コントロール設定可能なJSを、クロスフェード専用に修正しました。このJSの便利なところは、陰影処理をした場合に自由に左右に空白を付ける事が出来る。つまり画像は小さくなるが、余裕を持って配置できる事です。img要素を重ねた単純な構造で設置も簡単です。

≫ 続きを読む

jquery 2017/03/09 pops
タグ:html5 , css3 , Effect , jquery

jQuery レスポンシブ・Transitもどき3 コントロール付き

クロスフェードおよびスライドなどの各種エフェクト組み合わせのTransitもどきに、Pager コントロール等をつけました。画像の大きさは常に同じで、マスクの伸縮により表示範囲を変える特殊なものです。原則高さの無い画像専用です。

≫ 続きを読む

jquery 2017/03/05 pops
タグ:jquery , Effect , css3 , html5

jQuery レスポンシブ・Transitもどきコントロール付き

クロスフェードおよびスライドなどの各種エフェクト組み合わせのTransitもどきに、Pager コントロール等をつけました。「前ページ」の続きになります。

≫ 続きを読む

jquery 2017/03/02 pops
タグ:jquery , Effect , css3 , html5

jQuery レスポンシブ・Transitもどき処理

クロスフェード以外のエフェクトも簡単に出来る構造で、最も構造が単純でリサイズされた時の処理も簡素化されています。但し、TransitはCSS3処理では有りません。通常のjQuery animate()で数多くのエフェクトを組み合わせましたもので、余り見かけないものと思います。相違はデモで確認ください。

≫ 続きを読む

jquery 2017/02/27 pops
タグ:html5 , css3 , Effect , jquery

jQuery レスポンシブ・クロスフェード処理

2枚の画像を重ねればクロスフェードが実現します。レスポンシブ形式にして、コントロールボタン付き(内側)、サムネール表示の切り替えが出来る様に機能を拡張したものです。スライダーより構造および処理が簡単になっています。クロスフェード以外のエフェクトも簡単に出来る構造です。

≫ 続きを読む

jquery 2017/02/20 pops
タグ:jquery , Effect , css3 , html5

jQuery レスポンシブ・スライダー、外側にボタン配置

前頁のレスポンシブ・スライダーの改造です。コントロールボタン付き(外側)、エンドレスタイプ、サムネール表示の切り替えが出来る様に機能を拡張は同じです。通常のレスポンシブデザインHTML上でも動作します。コントロールボタンが外側についていますので少々メンドウですから余り使用されないようです。

≫ 続きを読む

jquery 2017/02/15 pops
タグ:jquery , Slider , css3 , html5

jQuery レスポンシブ・スライダー、エンドレスタイプ

前頁のレスポンシブ・スライダーは説明のために簡略しています。コントロールボタン付き、エンドレスタイプ、サムネール表示の切り替えが出来る様に機能を拡張してみました。通常のレスポンシブデザインHTML上でも動作します。その振る舞いなどを調べてみます。一言でいえば大変です。

≫ 続きを読む

jquery 2017/02/12 pops
タグ:html5 , css3 , Slider , jquery

jQuery レスポンシブスライダー処理

レスポンシブデザインで「TOP画像のスライド」処理等をレスポンシブ対応にしてみました。結構構造と設定などがメンドウですが、大変フシギな事に一応動作します。当然、baserCMSに限らず通常のレスポンシブデザインHTML上でも動作します。その振る舞いなどを調べてみます。

≫ 続きを読む

jquery 2017/02/07 pops
タグ:jquery , Slider , css3 , html5

jQuery CSS3 TextCarouselを回転する

CSS3 TextCarouselをjquery.transit.jsのtransitionアニメーションで回転させます。無理矢理応用していますが簡単に出来て便利です(本当ですか...怪しい)。表示に2つの形式がありますが、ここでは改造jquery.transit.jsを使用しています。

≫ 続きを読む

jquery 2015/11/19 pops
タグ:jquery , Transition , css3

jQuery CSS3 transition 3D正六面体Cubeを回転する

CSS3 で作った正六面体Cubeをjquery.transit.jsのtransitionアニメーションで回転させます。無理矢理応用していますが簡単に出来て便利です。当然少しクセが有りますが、ここでは改造jquery.transit.jsを使用しています。

≫ 続きを読む

jquery 2015/10/28 pops
タグ:jquery , Transition , css3

ブログ記事一覧

年別アーカイブ一覧



[1]