あなたが作成した様々なデータが販売できる「データのフリーマーケット」!
 

                 

  あなたの様々なデータは本当は価値があるのです!

  動画、写真、イラスト、デザイン、キャラクター、電子書籍、文章、音楽、ゲーム、

  素材、アプリケーション、ソースコード、zip、アニメ、officeデータに各種テンプレートなど

  すべてのデータを簡単に販売でき、1ポイント=1円で現金に交換できます!

 

気軽に様々なデータを販売しよう。めざせ1日1アップロード!

販売は・・・データをアップロードして、価格の設定をするだけで販売開始!

購入は・・・商品を見つけたら、ポイントを確認してカートへ入れるだけ!

 

ログイン

初めての方

 

CSSアニメーションを使って要素の変化を滑らかにする

こんにちは、Fujibaba.com管理人です。
今回はCSSアニメーションを使って、要素にアクションを加えた時の動作を滑らかにする方法をご紹介いたします。
リンクにマウスをホバーした時の色の変化と背景色の変化がわかりやすいと思いますので、これらで説明していきます。

まずは、以下のHTMLを用意してください。以下のソースコードをコピーして、テキストエディタで保存してもらえればOKです(拡張子はhtmlにしてください)。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<title>HTML演習</title>

</head>

<body>

<div id="main"><a href="http://fujibaba.com">動画、イラスト、電子書籍、その他デジタルコンテンツを収益化するFujibaba.com</a></div>
<div id="sub">Fujibaba.comであなたの作品を収益化しませんか?</div>

</body>
</html>

 

続いて、上記HTMLと同じディレクトリ内にstyle.cssというファイルを保存してください。ここからはstyle.cssを変更していきます。

 

・基本となるスタイルの指定
まずは、マウスホバー時の色の変化を指定しましょう。以下のようにstyle.cssに記述してください。

a:link{
color:blue;
}

a:hover{
color:orange;
}

#sub{
background:yellow;
}

#sub:hover{
background:red;
}

 

リンクの色は青、マウスホバー時はオレンジ、2行目のdiv要素には通常時の背景色を黄、マウスホバー時の背景色を赤に指定しました。
この時点ではブラウザで開くと、マウスホバー時はパッと変化しますね。

 

・アニメーションの指定
CSSでアニメーションを追加するには、transitionプロパティを使います。
transitionプロパティには、いくつか種類があります。

「transition-property」
transitionを適用するプロパティを指定します。allと指定すればすべてのプロパティに対して有効になり、widthやbackground等の特定のプロパティを指定すると、指定したプロパティのみアニメーションが有効になります。

「transition-duration」
transitionの変化する時間を指定します。単位はs(秒)で、1sなら1秒、0.5sなら0.5秒です。

「transition-timing-function」
transitionの動作を設定します。指定できる値は以下の通りです。

ease:開始と完了が滑らか
linear:一定のスピード
ease-in:開始が遅く、徐々に速くなる
ease-out:開始が速く、徐々に遅くなる
ease-in-out:開始と完了が遅い
cubic-bezier(4つの数字をカンマ区切りで指定):3次ベジェ曲線で指定

「transition-delay」
transitionの変化が始まるタイミングを指定します。値はtransition-durationと同じようにsで指定します。

これらの値はまとめて指定することができますので、今回はまとめて指定したいと思います。transitionを指定する時は変化する前のセレクタに対して指定をします。なお、transitionはCSS3の機能で、現時点ではプロパティをtransitionと記述しても動作しないと思いますので、ベンダープレフィックスをつけましょう。

《ベンダープレフィックスについて》
ベンダープレフィックスとは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。

将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。 ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子でブラウザの種類を特定します。

CSS3で採用される予定の機能が各ブラウザで先行実装されているのですが、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。

主要ブラウザのベンダープレフィックス
-moz- : Firefox
-webkit- : Google Chrome、Safari
-o- : Opera
-ms- : Internet Explorer

 

ちょっと横道に逸れてしまいましたが、アニメーションを指定しましょう。今回はGoogle Chromeを使っているので、ベンダープレフィックスは-webkitをつけていますが、お使いの環境に合わせてつけてください。

a:link{
color:blue;
-webkit-transition:all 1s ease 0;
}

a:hover{
color:orange;
}

#sub{
background:yellow;
-webkit-transition:all 1s ease 0;
}

#sub:hover{
background:red;
}

 

変化する前のセレクタに対して、それぞれ"-webkit-transition:all 1s ease 0;"という指定をしています。値は、左からtransition-property、transition-duration、transition-timing-function、transition-delayの順に指定しています。すべてのプロパティに対して、1秒使って、開始と完了を滑らかに、すぐに変化を開始させる、という意味になります。

いかがでしたか?値の組み合わせを色々と変えて、変化の違いを試してみてください。
アニメーションを使いこなせるようになると、かなりデザインの幅が広がると思いますので、ぜひ覚えましょう。

このエントリーをはてなブックマークに追加

商品を出品したら、FacebookやTwitterなどで広めよう!

上記の”いいね”や”ツイート”ボタンをクリックするとこのページをみんなに紹介できるよ。
出品していなくてもオススメの商品をみんなに紹介しよう。

 

ログイン  初めての方へ
価値のあるデータを無料共有していませんか?

価値のあるデータ(動画や写真といったファイル全般)を共有サイトに無料アップロードしていませんか?
価値のあるものは、閲覧数やコメント数の伸びがよく、広告収入もあるかと思います。

その価値あるデータをもっともっとダイレクトにダウンロード販売して収益化できるのがFujibaba.comです。
違法ダウンロード刑罰化が進む中、Fujibaba.comでは違法なデジタルコンテンツは許可していません。

違法ダウンロード刑罰化の対象にならないデジタルコンテンツなので、購入される方も安心して利用できるシステムになっております。

 

動画,写真,イラスト,デザイン,キャラクター,電子書籍,漫画,アニメ,文章,音楽,ゲーム,Office(Word、Excel、PowerPoint),素材,アプリケーション,ソースコード,ZIP,各種テンプレート,など様々なデジタルコンテンツのデータを、法人も個人もダウンロード販売できるサイトです。!副業をするならFujibaba.com

 

動画のダウンロード販売
動画のダウンロード販売とは、あなたが撮影した動画、あなたが著作権を持っている動画をダウンロード販売することができます。おもしろ動画や、奇跡の瞬間動画や、スゴ技・神業動画や、講習動画や、自作のドラマ・アニメの動画や、普段は体験できない動画や、コマ撮り撮影の動画や、再生回数の多い動画シリーズや自作の音楽・ライブ動画や、情報動画や、その他かわいい動物の動画や、かわいい赤ちゃんの動画などなど、様々な動画がダウンロード販売できます。動画をアプロードするだけで副業ができます。

静止画(写真・画像)のダウンロード販売
静止画(写真・画像)のダウンロード販売とは、あなたが撮影・作成した静止画(写真・画像)、あなたが著作権を持っている静止画(写真・画像)をダウンロード販売することができます。静止画(写真・画像)とは、写真やイラストなどの画像の事を総称して静止画(写真・画像)と言います。素材として使用したり、壁紙に使用したりする写真や画像をダウンロード販売できます。写真や画像で簡単に副業ができます。

ファイルのダウンロード販売 
ファイルのダウンロード販売とは、動画や静止画(写真・画像)を含むあらゆるデータでもダウンロード販売できます。zipに写真をまとめてダウンロード販売したり、PDFで書籍をダウンロード販売したり、自作のゲームやアプリケーションをダウンロード販売したり、様々な用途に使用できる著作権フリー文章のテンプレートをダウンロード販売したり、エクセルの書式のテンプレートをダウンロード販売したり、漫画本や小説その他の様々な原稿データをzipに圧縮してダウンロード販売したり、おもしろ料理や絶品料理の説明書をテキストやメモ帳でダウンロード販売したり、アフィリエイトの成功方法や成功する投資方法などの情報商材をダウンロード販売したり、PowerPointでプレゼン資料のテンプレートをダウンロード販売したりなどなど、ダウンロード販売の可能性は無限大にあります。便利なデータを販売アップロードするだけで副業できます。

動画、静止画(写真・画像)、ファイルのダウンロード購入
 Fujibabaポイントを使用して動画、静止画(写真・画像)、ファイルをダウンロード購入できます。制限カテゴリーに著作権フリー、商用利用の禁止、加工の禁止の3つあるので購入する時に確認ください。

詳しくは、初めてのFujibaba.comダウンロード販売方法お買物方法ポイントについてFujibaba.comの魅力をご覧ください。

 


ダウンロード販売とは?
ダウンロード販売(ファイル販売とも言いえます)とは、動画、静止画(写真・画像)、ファイル、文章等のデータファイルを販売することです。ダウンロード販売の魅力は大きく3つに分けてご紹介します。

①ダウンロード販売の魅力は、どのようなデータでも販売できます。
ダウンロード販売の魅力は、動画、写真、画像、officeファイル、ソフト、アプリケーション、文章など、幅広いジャンルの物が販売できるという事です。パソコン上のデータであれば、ジャンルを問わずデータを販売できます。よくある例は、起業が写真をHPや企業の広告用に利用するための素材として販売していたり、動画や写真を加工するソフト、パソコンの環境を良くするためのソフトの販売などがあります。Fujibaba.comでは、企業で販売したり、個人で販売もできます。つまり、誰でも様々なデータファイルの販売が可能なのです。

②製品は自分次第で、様々な製品が販売でき、様々な製品が購入できる。
製品は自分のパソコンにある自分のデータであればどのようなデジタルコンテンツも販売できます。何気ない旅行の写真や、自分で考えたデザイン、偶然とれた奇跡の瞬間の動画、分で作ったゲーム、自分で作ったマンガ、自分で作成した文章など、考えだしたらきりがないほど様々あります。つまり、自分の個性を最大限に活かした販売が可能になるのです。つまり、誰でも副業ができるのです。自分の個性を最大限に活かした販売が可能という事は、様々な人の個性を購入でき、それを活用する事もできます。 Fujibaba.comでは、著作権フリー、商用利用の許可、加工の許可などをカテゴリーごとに分けていますので、販売されている製品をそのまま活用したり、独自に加工して活用することもできます。

③1度販売すると、在庫の心配がなく半永久的に販売可能です。つまり、何もしてないかのようで副業ができます!
物品の販売では、購入された商品は、代金と引き換えに物を渡します。ダウンロード販売では、購入された商品は、代金と引き換えにダウンロードできるようにします。つまり、オークションや中古品の販売では1度きりの販売で終わってしまうのですが、ダウンロード販売では、所有権、著作権等がある限り、半永久的に販売が可能なのです。1度販売すると、デジタルコンテンツの価値は100円にも、100万円にもなる可能性があるのです。Fujibaba.comでは、購入の代金をポイント制とし、販売で得たポイントは、好きな時に現金への交換ができます。

④収益化
今まではネットで収益化することはとても大変でした。アフェリエイト中心に広告収入でしたが、ダウンロード販売をすることで直接的な収益化が期待でき副業になります。Fujibaba.comを使用することで動画・写真、ファイルといったあらゆるデジタルコンテンツで収益化ができます。電子書籍、テキスト、アプリといったファイルも販売できるので、収益化できるデータはお客様次第!
費用無料でできる副業は限られていますが、Fujibaba.comなら簡単に誰でも副業ができます。

ダウンロード販売の魅力がわかって頂けましたでしょうか?Fujibaba.comでは、誰でも、個人でこの魅力をご活用いただけます。
まずは、自分の動画、写真などを販売してみてはいかがでしょうか?Facebookに自分の製品を告知する事もできます。アカウントを登録して、Fujibaba.comを活用してみましょう!※FacebookとTwitterアカウントでのログインもできます。

動画、静止画(写真・画像)、ファイルのダウンロード販売 Fujibaba.com(ふじばば.com、フジババ.com)

 


法律・マナーの順守

          販売する方は著作権や肖像権を侵害しないようお願い申し上げます。
 
  ダウンロード販売する側の注意点、制限タグ
   ・著作権フリー:著作権フリー、商用利用可能な場合チェックを付けてください。
   ・商用利用の禁止:商用利用を禁止する場合はチェックを付けてください。
   ・加工の禁止:加工を禁止にする場合はチェックを付けてください。

  購入する側の注意点、制限タグ
   ・著作権フリー:著作権フリー、商用利用できます。
   ・商用利用の禁止:商用利用できません。
   ・加工の禁止:加工禁止です。

Fujibaba.comではデータのダウンロード販売以外にも、コメントのやり取りやブログの公開等、ソーシャルメディアとしてご活用いただくことも可能ですが、誰かが不快に思うような内容は決して書き込まないようお願い申し上げます。
詳しくは利用規約著作権をご参照ください。
Fujibaba.comはすべてのユーザーが安心してデータのダウンロード販売をできるよう鋭意していきます。
 
動画・静止画・ファイルのダウンロード販売
Fujibaba.com

 

feedback