コンパイラかく語りき

import { Fun } from 'programming'

jQuery

Reactが怖いので、まずはReact風なjQueryを書いてみる②

これの続きです。 chuckwebtips.hatenablog.com 前回は、jQueryでもオブジェクトを使うことによって、状態の記述を分離できるよという話でした。 今回は、session storageを利用して、状態をある程度保存してみます。 作ったDEMOがこちら。 http://chuck0523…

ロシアップ ver2.3 「ドロップダウンメニュー」

ドロップダウンメニューを実装しました。 前々から存在してはいたのですが、Bootstrapでの実装だったんですよね。それを自作しました。 「自分で作れるものは自分で作る」です。あと、Bootstrapに頼ると余分なHTMLが入ってしまうので…。 これがBootstarpによ…

【jQuery】スピードテストの結果、いまさらCDN読み込みに乗り換えました

chuckです。 みなさん、jQueryをどのようにインクルードしてますか?? 僕はローカルにダウンロードしたものをインクルードしていました。しかし、どうやらCDNでインクルードした方が良いっぽいので、調べました。 基本的なことはこちら。 e-words.jp 仕組み…

【CoffeeScript】DOMにクリックイベントを付与する

chuckです。 coffeeScriptでDOM要素にクリックイベントを付与しましたのでメモ。 書いたコードがこちら。 gist6e54466675e57d07851e 今回の新発見を羅列していきます。 thisを@で表すことができる 便利です。 ただしDOMとしてのthisは $ ( @ ) でないといけ…

【coffee×jQuery】eachの中でindexを使う

chuckです。 現在、cofeeScript中でjQueryを使っています。そこでeachを使った処理を書いているのですが、each内でindexを使用したのでメモ。 とは言えカンタンです。 ary = ['a', 'b', 'c'] ary.each (index) -> console.log index このとおり。 eachの引数…

CoffeeScriptでjQueryを使う

chuckです。 今日初めてcoffeeでjQueryを使ったのでメモ。

【HTML】画像を動画っぽく表現してみる

chuckです。 オシャレなサイトを発見しました。こちらです。 www.startup50.jp こちらのTOPページの背景画像が動いている(ように見える)んですよね。 面白いなーと思ったので、自分なりに再現してみます。

CSS3とjQueryでつくるルーレット(っぽいやつ)

どうも!chuckです。CSS3で作るシリーズですヽ(=´▽`=)ノ こちらの続きになります。 CSS3でつくる立体8面体(福引のガラガラみたいなやつ) - コンパイラかく語りきchuckwebtips.hatenablog.com あっ、この前Androidを持ってる友人に↑のやつを見てもらったんで…

文系プログラマーがRailsでロシア語アプリケーションをつくる⑦

どうも!chuckです。 引き続きロシア語単語帳を作っていきます。が、今回はちょっとRailsから外れます。どちらかというと、JavaScriptや文字列操作のお話かも。 文系プログラマーがRailsでロシア語アプリケーションをつくる⑤ - コンパイラかく語りきchuckweb…

CSSのfont-familyを一覧から選べる!FontPickerを作った(改修編)

どうも!chuckです。前回fontPicker(フォントピッカー)というfont-family選択ツールを作りました。が、不具合がありましたので改修しました。 CSSのfont-familyを一覧からカンタンに選べるツールを作った - コンパイラかく語りきchuckwebtips.hatenablog.com…

CSSのfont-familyを一覧からカンタンに選べるツールを作った

どうも!chuckです。 みなさん、cssのfont-familyってこだわってますか?それともぜんぜん気にしてない?? 僕自身、font-familyはいつもどれを使うか迷います。で、いつも「CSS font-family 一覧」なんて検索しちゃってます。 というわけで今回は、font-fam…

jQueryとCSSで作るスライド画像

どうも!chuckです。 いま会社でスマホサイトの制作を行っています。その中で画像のスライドを作成しているので、ここでも手法を記録しておきます。 ちなみに、まだスワイプ操作に対応しておらず動きもショボイですヽ(´Д`;)ノアゥア… 挙動の洗練化はまた後日!…

jQueryでposition leftの値を取得する時は、.css( )よりも.position( )を使う方がいい理由

どうも!chuckです。 コーディングしていて気づいたことがあるのでメモ。DOM要素のposition : leftの取り方について。(あるいはtopも同様)

HTML5のvideoタグが使えたよー!ついでに再生・停止ボタンとスマホ対応も実装

どうも!chuckです。 前回こちらの記事でHTMLのvideoタグについて書きました。 HTML5のvideoタグを試してみるも、敗北する - コンパイラかく語りきchuckwebtips.hatenablog.com まー、使ってみたはいいものの動かないw しかし今日はリベンジに成功したので…

CSS3とjQueryで回転するフォトギャラリーを作った

どうも!chuckです。 タイトルの通り。CSS3の勉強がてら、回転するフォトギャラリーを作りましたのでお披露目ヽ(=´▽`=)ノ

CSS3とjQueryでボックスをぐるぐる回す解説。

どうも!chuckです。 前回、こちらの作品を紹介しました。 http://chuck0523.github.io/graduationPage/rotateAnime.html <a href="http://chuckwebtips.hatenablog.com/entry/2015/06/28/000000" data-mce-href="http://chuckwebtips.hatenablog.com/entry/2015/06/28/000000">jQueryとCSSでぐるぐる回るボックス - コンパイラかく語りき</a>chuckwebtips.hatenablog.com …

jQuery風にCSSアニメーションが実装できる「Velocity.js」を使ってみた

どうも!chuckです 昨日参加したTriton.jsにて、Velocity.jsというプラグインが紹介されていました。 なかなか面白そうだったのでさっそく試してみました! &lt;a href="http://chuckwebtips.hatenablog.com/entry/2015/06/12/180000" data-mce-href="http:/…

日付を扱うJavaScriptプラグイン「moment.js」を試す + jCanvasを使ってカンタンなアナログ時計を作った

どうも!chuckです。 先日はてブでこちらの記事を拝見しました。 &lt;a href="http://b.hatena.ne.jp/entry/www.hoge256.net/2007/08/64.html" data-mce-href="http://b.hatena.ne.jp/entry/www.hoge256.net/2007/08/64.html"&gt;はてなブックマーク - JavaS…

jQuery風にcanvasを扱える、その名もjCanvasを触ってみた

どうも!chuckです jCanvasを触ってみたのでメモ。 ○jCanvasとは jQuery風にHTML5のcanvasを操作することができます。 公式↓↓ <a href="http://calebevans.me/projects/jcanvas/" data-mce-href="http://calebevans.me/projects/jcanvas/">jCanvas | jQuery meets the HTML5 canvas</a>calebevans.me 使い方はjCanvas.min.jsをダウンロードしてHTMLファイルにインクルードす…

パララックスサイトの練習1

どうも!chuckです。 本日からパララックスサイトの練習を始めました。 かっこいい見た目のサイトを作るための練習です(`・ω・´)ゞ お世話になったサイト様↓↓ <a href="http://webdesignmagazine.net/javascript/parallax1/" data-mce-href="http://webdesignmagazine.net/javascript/parallax1/">パララックスサイトの基本的な作り方 1/2! « Web Design Magazine</a>webdesignmagazine.net ○スクロ…