当ブログデザインは、IE6以前のブラウザには対応していません。 できれば、お使いのブラウザを新しいものへ更新してください。 Windows Internet Explorer 8: ホーム JavaScriptでページ読み込み中に画像等を表示する方法の紹介です。 下の画像のようなものを読み込み中のみ表示させます。 読み込み完了時の処理にはJavaScriptのonloadを使用します。 そのonloadで読み込みが完了したとき、JavaScriptからスタイルを指定して非表示にします。 今回はHTML、JavaScript、CSSを利用し作成します。 では早速HTMLに書く内容から書き始めます。 赤字は各々で変更してください。(書いてあるURLに飛べばどんな内容か分かると思います) HTML <body onLoad="init()"> <script type="text/javascr
Beautiful transition effectsNivo Slider offers 16 transition effects ranging from slicing and sliding, to fading and folding, making your galleries interactive and fun. No coding skills neededCreate a beautiful experience when playing your gallery of images without any advanced coding. Include the image slider in your posts and pages using a simple shortcode. Automatic image croppingNivo Slider cr
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 ・prev/nextボタンを付ける ・画像と画像の間に12pxのpaddingを挿入する ・画像の幅、高さを設定する ・画像が切り替わる間隔(ミリ秒) ・1画面に表示させる画像の数や画像の総枚数を設定する などの細かいオプション設定は下記のように引数に記述します。 $(function() { $('ul#user_interaction').carouFredSel({ prev: '#prev', //id="prev"をもつDOM要素にprevを設定 next: '#next',//id="next"をもつDOM要素にprevを設定 padding: [0 12px 0 0],//画像と画像の間に12pxのpaddingを挿入 items: { visible: 1,//1画面に表示させ
コピペで簡単にできる、複数サムネイル(画像)の左右スライダーを表示するjquery.carouFredSel.jsをご紹介します。 複数サムネイルの左右スライドショーを表示するJavaScriptの記述 ※jquery-1.6.2.js、jquery.carouFredSel-2.5.6-packed.jsファイルを読み込みます。$(‘スライドエリア’).carouFredSel({オプション})を記述します。オプションでは自動再生、スライド枚数、次へ・前への表示等を設定します。 <script type="text/javascript" src="js/jquery-1.6.2.js"></script> <script type="text/javascript" src="js/jquery.carouFredSel-2.5.6-packed.js"></script> <scri
Caroufredselという、結構人気なプラグイン があるんですが、このプラグインの開発者が 応用例をサンプルソース付きでまとめてくれ ていましたのでご紹介。1つのプラグインで ここまで出来るってちょっと凄いですね。 もう少し軽量になってくれると嬉しいんです けど・・ カルーセル系プラグインの定番的なライブラリ、Caroufredselの応用例を開発者さん本人がまとめてくれていました。もともと沢山例があったんですが、更に一歩進んだ使い方を紹介してくれています。サンプルはダウンロードできます。
バナーをたくさん貼りたいけど、あまりベタベタたくさん貼りたくない場合によく使う手なのですが、バナーをスライド風にして、自動でローテーションさせたりします。そんな時にこのjQueryカルーセルプラグイン「CarouFredSel」が便利です。オプションでいろいろな動き方を設定できますので、これ一つでいろいろな場面で使えますよ! 【更新履歴】 2013年02月22日 WordPressへの使い方追加 2013年09月05日 トップイメージによく使うオプションcrossfadeを追加 jQueryプラグインのダウンロード Circular, Responsive jQuery Carousel – CarouFredSel (機械日本語訳はこちら) 上記サイトよりプラグインをダウンロードして下さい。 「jquery.carouFredSel-*.*.*.js」もしくは「jquery.carouF
今回は、かなり使えそうなjQueryプラグイン「carouFredSel」というものをご紹介します。 カルーセルやスライダーにもなるということで、以前、bxSliderというプラグインを紹介しましたが、そちらよりも、機能はあるかもしれません。(その記事はこちら) こちらのプラグインでできることを簡単にあげますと、 ・オプションが豊富で、自由にカスタマイズできる ・スライドを自動/手動、マウスホイール、スワイプ等で設定可能 ・レスポンシブやリキッド等のレイアウトに対応 ・ページネーション、次へ、前へのボタンの設置が可能 ・スライドの向き(上下左右)、エフェクト(9種類)、イージング(5種類)から設定可能 ・スライド毎の横幅、縦幅が別でも伸縮してスライドしてくれる ・動的に、スライドを追加したり、削除することが可能 とこんな感じです。 なにより、高さが違うものをスライドできるのは、
<$MTEntryTitle$> Illustratorで手軽にカッコイイデザインを作ってみる【その3】です。 今回はタイポグラフィを作成していきます。 Illustratorの3D機能を使う事で表現が可能となります。 やり方は以下の通りになります。 1 テキストを用意する。 今回は私のアーティストネームであるdisQを使って組み上げていきます。 まず初めに、任意のテキストを用意して下さい。 1文字ずつ加工していくので、1文字ずつ用意して下さい。 白を基調としていきますので、背景に黒のレイヤーをおいて、文字は白としましょう。 2 3D機能を使う。 [1]で用意したテキストに対して3D効果を適応していきます。 3D効果といっても、正体は押し出し・ベベルなので気負う事はありません。 メニューバーの[効果] > [3D] > [押し出し・ベベル]を選びましょう。 3 効果の設定確認。 今回は上記
●○● オレ流 イラレ道場 ●○● Illustratorの道場、イラレ道場のブログでーす(^_-) みんなでイラストレーターを、サクサク使えるようになっちゃおうぜ! ブログテーマ一覧 目次 ( 1 ) イラストレーターの使い方 イラレ講座 ( 203 ) イラストレーターのレッスン 使い方 ( 18 ) パターンスウォッチ ( 2 ) バージョンアップ ( 1 ) InDesign情報 ( 1 ) パソコン情報(^。^) ( 16 ) おしらせ ( 34 ) イラレ日記 ( 39 ) プログラミング ( 1 ) シェイプアップ ( 2 ) 3D ( 19 ) ドラマと映画 ( 16 ) GAME ( 0 ) 買って良かった物コーナー ( 4 ) イラレちゃん成長記 ( 6 ) モバイル情報 ( 2 ) お奨めのプリント用品\(^。^) ( 1 ) お奨め周辺機器 ( 2 ) お奨めの
今回も前回とよく似た光沢のあるボタンを作ってみる。 今回はボタンを作るのがメインではなく、光沢感を出すためのグラデーションの一つとしていつでも使えるようになってもらうのが目的。 ではどうぞ。。 1.ベースボタンを作る 説明するまでも無いがまずはボタンを作る。 矩形シェイプにドロップシャドウをかける。 色は今回は何でもよい。 2.光沢感を入れる 次にボタンに効果をつける。 ここが今回のメイン。 グラデーション効果を入れる。 Web2.0風ボタンのときに説明したけれど、 光沢感を出すには反射している感じを出すためにグラデーションの段階を途中で大きく変える。 説明しにくいのこんな感じ。 でもって、ボタンはこんな感じになる。 これだけでも光沢感があるけれど、今回はもう一手間加えよう。 直接当たる光のほかに反射してくる光の影響も考えるとちょっとリアルになる。 どういうことかというと、今回は上から光が
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く