ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

珈琲の抽出をJqueryアニメーションで

f:id:php-7com:20191231195743j:plainf:id:php-7com:20191231195803j:plain

デモ

Jqueryでコーヒー豆をひいて、抽出して、コーヒーができるまでをJqueryのアニメーションで作成してみました。時間をかけてじっくりセブンイレブンとかのコーヒーマシーンの待機中に表示されるようなアニメーションを作りたかったのですが、明らかに時間が足りなくなったので、後半かなり手抜きです。ご容赦を!

 いろいろありましたが、結局良い一年だったと思います。

2019年12月31日も残りわずかです。

本年は大変お世話になりました。

来年もよろしくお願いいたしますね。

良いお年を!

CSSで曲線のドロワーメニュー

f:id:php-7com:20191230203446j:plain

CSSで曲線のドロワーメニューを勉強しました。

年末休みを利用して、色々勉強もしたいのですが、なかなか捗りませんねー。

Androidアプリの制作とか、人工知能で有名なPythonなんかも学びたいのですが、野暮用で、ちょっとCSS勉強した程度です。

デモ

CSSのみでドロワーメニューが出来ているわけですが、動きが滑らかで良いですねー。

jquery ドラッグアンドドロップ

f:id:php-7com:20191210181214j:plain

Jqueryで要素をドラッグアンドドロップする処理です。

デモ

デモサイトの 要素 No.1 ~No.5 を下のテキストボックスにドラッグアンドドロップして、送信ボタンで値を引き渡すという処理のサンプルです。

セレクトボックスで選択させるのも野暮ったいし、値を直接テキストボックスに入力させるのは尚更NG というときに、ドラッグアンドドロップさせたいのですが、本来WEBシステムでは苦手な処理だと思いますが、Jquery UI で割と仕組みを作りやすくなったんですね!

これは行けるね!

 

jqueryでドラッグアンドドロップ

f:id:php-7com:20191208134036j:plain

要素をあるエリアにドラッグして、それをデータベースに保存する機能を作ることになりました。出来ますよーっと顧客には、お話しましたが、さて。どうするか?

Jqueryで要素を ある要素にドラッグインしたり、ドラッグアウトしたりすることから勉強しました。

デモでは、鱒を囲いにマウスで移動させれば、それを感知するところまでは、分かりました。

デモ
次は、これをどうデータベースに格納するかですが、Ajaxとか使いますか?

頑張ってみます。

スマホでは出来ませんので、あしからずでっす。

鱒の画像も一から描きたかったのですが、鱒を描く時間も無いため、購入しました。