htmlでなにか作りたい

htmlというかcssというか
最近のサイトみたいにアニメーションさせたり凝った構造にしたりってのを一から作ってみたい
個人じゃ無理かな？

テトリス

アニメーションはGIF置いておけばそれっぽくなるよ
ただ読み込みが少し時間かかるかな？

アニメーションは一昔前前みたいにFLASH作ったりしなくてもCSS3とかjQueryとかで簡単に実装できるようになったからとりあえずググってみろ
コピペだけでもそれなりにできるよ

作ってみたいと思った時がチャンスなんで頑張ってほしいね
少しはアドバイスするからさ

>>3
できるだけ軽くしたい
それにGIFだと高DPIのディスプレイでぼやけるし

>>4
マジで？じゃあちょっと調べてくる

ところでHTMLとCSSはちょっと弄ったとこあるからまだわかるんだけどjQueryって何ができるの？

html5でアニメーション作れる

え？htmlでも作れるの？

>>6
HTML5とCSS3は最近の需要に合わせて刷新されたHTML/CSS
HTML4/CSS2から大きく変わったのは、HTMLが文書の意味付け、CSSが見た目の装飾というふうにHTMLとCSS役割がはっきり別れたこと
あと、HTML5からは<video>タグ(いわゆる「HTML5による動画再生」)みたいな最近の需要に合った要素が追加されたりした
CSS3 animationもその一つ

jQueryはJavascriptの拡張ライブラリ
Javascriptで書くとクッソ長くなるコードを簡単に書ける
アニメーション関係のプラグインがいっぱい転がってるからそれ読みこませれば簡単にオシャンティーなアニメーションできるよ
導入方法も簡単でググればすぐわかる

jQueryのさらに拡張ライブラリであるjQuery UIってやつを使うと自分で書いて好きにアニメーションさせることも可能
これについては興味があったら「jQuery animate」でググってくれ

>>8
勘違いしがちだけど>>9に書いたようにHTMLは文書の意味付けしかしないからHTML5でアニメーションというのは不可能
そういうのはCSSやJavascriptでやってねってことになってる

オパソキヌス
基本的なアニメーションはCSS，激しいのはjQuery　でいいのかな
Html5のサイトにゲーム作ってるのがあるけどあれもjQuery？

いや、jQueryはUI向けだからゲーム作るには向いてない
ゲームではゲーム用のライブラリ使ったり、素のJavascriptで書いてたりするよ
もっとも、どんなゲームを作りたいのかによっても違うけど

Flashに変える存在になるのかな

>>12
jQueryUIがあるのにjQueryもUI向けなのか…
マリオとかもJSで作れるのかな？
とりあえずいろいろ見てくる
マジオパソ

SMIL使えばsvgで宣言型アニメーションも可能だよ
でもウチのブラウザだと動いてくれないorz

マリオみたいな箱型2Dグラフィックなら
canvas要素にpixi.jsみたいな2Dライブラリを使うのが楽だとおも

pixi.jsはwebGLだったわスマン

0から勉強すると時間かかりそう
でも他のサイトからパクれば一瞬

>>13
もうAdobeも脱Flashに向ってるみたいだからこれから変わるよきっと

Flashは無くなるべきだよね

ゲームならenchant.jsとかが簡単そう

とりあえず練習用のページ作った
http://iwashiland.web.fc2.com/index.html
ねる

railsのほうが簡単じゃね。長い目でみて身になるかどうかはともかく

railsでググったら超絶わかりやすい解説が出てきた
http://openbook4.me/projects/92

ブラウザでMMDのモデル表示させれるのって今のとこThreeだけ？

>>22にCSS当てたぞ！

>>25
軽く調べたけどThree.js使ってるのしかなかったからたぶんそう
前に小さいブログパーツとかあったような気もするけどあれもThreeなのかな

回ってる

ease-inで加速してそのままの状態を保ちたいんだがどうすりゃいいんだこれ

いわし時計とかできる？

>>29
それたぶんjavascriptないとできないでしょ
システムから現在時刻受け取らないと
意味もなく時計盤の上で等速回転運動し続けるいわしならたぶん作れる

>>28
やってみた
https://jsfiddle.net/6bd3t5fr/

でも時間計測の実装がブラウザ次第なので再現度は低い
スマホじゃまともに動かないわ

>>31
うひょー出来るのかありがてぇ
スマホでもちゃんと動いたぞ(sleipnir)
あとで試してみる

>>31
ソースを見る限り意味もなく時計盤の上で等速回転運動し続けるいわしなんだけどこれは果たして時計と言えるのだろうか

うーん、適用してみたんだけどうまく動かないな
http://iwashiland.web.fc2.com/index.html

まわすすボタンを押すと最初の処理は実行してくれるんだけどsecond-spinが息してない

まわすすボタンってなんだよ

>>34
second-spinをspinにしてみて

おお動いた
そしてsecond-spinの定義を忘れていることに気づいた

とりあえずいわしが回ったので今日はここまで
皆オパソな
オパソキヌスって何回も使ってると逆に恥ずかしい

あーやっと出来た
javascriptで回転制御するようにしてみた
これで中途半端なところでもいわしを停止できるようになったぞ！

参考にしたサイト
https://css-tricks.com/controlling-css-animations-transitions-javascript/

>>39
すばらしい

やっつけおしごと
http://i.imgur.com/vFH6TN6.png

なんかいわしだらけになってる

イワシが回らなくなってる!?!?

スマホとかchrome系だとpauseの効き方がおかしくて動かないみたいだけどよくわからんので放置
それとも回しっぱなしでいいかなもう

AndroidのChromeだけど回るし止まるぞ

ちょっと待ったら回ったわ
ごめんごめん
ちなみに勘違いの原因はボタンをダブクリするとイワシがいきなり変な方向向いたまま固まるからだった
だぶん仕様

自分はMSEdgeだけどanimation-nameが重複してると
上手く動かんみたい

ああ、両方spinにしてるせいか・・・
あとで直す

そもそもCSSアニメーションはキーフレームから一旦生成されると
DOMからの操作は限定的にしか受け付けないみたい

この辺はブラウザ実装が鋭意改善中だから
今後に期待かな

直したぞ
ついでにjsも修正
if(this.innerHTML === "まわす")
{
this.innerHTML = "とめる";
spinIwashi.classList.add("spinstart");
spinIwashi.classList.add("spinstart2");←追加
spinIwashi.classList.remove("spinstop");
} else {
this.innerHTML = "まわす";
spinIwashi.classList.add("spinstop");
spinIwashi.classList.remove("spinstart2");←追加
}
runningとpauseが同居しないようにした
これで正常に回るようになったかな

ところでさあ・・・・なんで鰯を回そうと思ったの？

CSSでアニメーションさせたくて調べて最初に開いたのが回転の解説ページだった

はあああこれもっと楽に制御する方法あったんか
<input type="button" value="Start" onclick="document.getElementById('a1').style.animationPlayState='running'">
<input type="button" value="Stop" onclick="document.getElementById('a1').style.animationPlayState='paused'">
jsいらないじゃん・・・

>>53
勉強が目的なんだから無駄にはならないよ大丈夫

それもそうか
挙動に差異がないならこのままでいいね、各ブラウザに対応させると結局長くなるし

leftとtopでボタンの位置調整したんだがこれってまずいよなたぶん
配置の仕方を覚えねば

回転だけだと寂しいからなんか他のも付け加えようぜ
ttp://daneden.github.io/animate.css/

>>56
マージン使うといいよ

http://iwashiland.web.fc2.com/test.html
マージンに変えてみたけどautoが使えないのとIEだと崩れちゃうのがよくわｋらん
回転以外の要素はもうちょっとページ整えてから

iwashitopに包まれてるから指定方法にそこまで煩くならなくてもいい様な
横幅を狭めた時の挙動を一致させれば十分だと思う

深く考えず行きあたりばったりで突っ込んできたからなー
無駄なのいっぱいあるわたぶん

IEで崩れるのはdisplayをinitialからinlineにしたら直った
IE11はinitialに対応してないのかそれとも挙動が違うのか

IE対応は泥沼

IE11でもまだそんな感じなのか

MSも2つのブラウザ開発に注力するのは厳しいだろうから
これから更に格差が広まって行く気がする

はぁ構成どうしよう
どこかのサイト参考にしてみようかな

ちょっと忙し

あげ

なぜいわし

いわしと言わして

scssとか言うのが便利そう

明日いじる

floatがよくわからん
使いこなせたら楽しいってことはなんとなく予想できる

float指定で一旦通常の配置から抜けて右又は左に回り込む
clearで解除して特定の枠内に収める

そう言えば本とかあるからそっちで勉強した方がよくね

調べれば大概出てくるし本買わなくても何とかなると思う
昨日は調べないで挙動確認してた

インライン要素は左詰め
ブロック要素は上詰め
この原則を破るならfloatってイメージでやってる

http://iwashiland.web.fc2.com/
なんとかなった
けど肝心のコンテンツをどうするかまだ考えてない

難しいかもだけどゲームとかはどう？

ダンおにの譜面ぐらいしか作れない
曲提供してくれれば作るよ

結局どうなったんだ

どうしようかな
方向性決めてからスレ立てれば良かった
本来は一人で進めるんじゃなくてNeppersBlogsみたいなのやりたくて立てたんだけどね

electronみたいなデスクトップアプリに手を出せば裾野広がるよ

HTML+CSS+Node.jsでアプリを作れるんだっけ？
どこまで出来るのか知らんけどちょっとやってみようかな

拡張機能ベースも面白いと思う
chromeアプリとかandroid版firefoxアプリなら敷居も低い

あれもjsだったのか
とりあえずelectron使ってみる
jsまったく勉強してないけど・・・

html5アプリで遊ぶ仲間が増えると嬉しい
こっちもやる気が出る

保守大変だからこっち落としてねっぷらに立てる

ねっぷらに移動しました

スレが見つからない…

まだ立ててないよ

tateta
HTMLでなんか作ろ
http://next2ch.net/test/read.cgi/news4viptasu/1456304806/