Mimoeのメモ帳 -2ページ目

コンテンツの高さをそろえる。

文字数が違ったり、写真の大きさが違った場合でも、横のコンテンツの高さをそろえたい。

様々なプラグインがあるが、jQueryのバージョンを変えたりした際に、合わなくなってしまったりしてしまうので、js/jQueryだけでかけないかと考えてみた。

以外と短い行数で書けるものを見つけた！

<ul class="items">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

<style>
.item{
float: left;
width: 300px;
}
<style>

$(function(){
var item = $('.item');

function setHeight(n){

var itemL = item.length;

item.height('auto');

for(var i = 0; i < Math.ceil(itemL / n); i++){

var maxHeight = 0;

for(var j = 0; j < n; j++){
var itemHeight = item.eq(i * n + j).height();

if(itemHeight > maxHeight) {

maxHeight = itemHeight;

}

for(var k = 0; k < n; k++){

item.eq(i * n + k).height(maxHeight);

}

setHeight(3);

});

</script>

例えばこんな感じ。
setHeightという関数は、"nの数字が横に並ぶ数"という条件で動く。
例えば"3"なら、横に3つずつ、4つめが下に折り返し、4列めは10つめのブロックのみの状態。

簡単に解説。
itemというclassを持っている数を数える。
itemの数をnの数で割って、繰り上げした数ループする。(縦に並ぶ列の数。ここでは4)
maxHeightの高さを0に設定する。
その中で、n回ループする。(4列の中の1列で、左からn個)
その中で、もし、maxHeightがそのitemの高さより小さかったら、上書きする。
これをn回繰り返したら、この列のheightにmaxHeightを設置する。
これを列(ここでは4)の回数繰り返す。

レスポンシブなど、可変に対応させる場合。
setHeightの関数を分岐する。

$(window).on("load resize",(function(){
var item = $('.item');

function setHeight(n){
・・・
}

var winWidth = $(window).width();
if(winWidth > 1000){
setHeight(3);
}else if(winWidth <= 1000 && winWidth > 768){
setHeight(2);
}else if(winWidth <= 768 ){
item.height('auto');
}

});

</script>

このような感じ。
一番狭いとき(横には1つしか並ばず、全て下に並ぶ場合)は、この関数を使う必要がないので、heightはautoに設定する。
関数の最初に"tem.height('auto');"と書いたのは、可変をしたり、クリックした後などに関数を使う場合、設置されたheightではなく、元々のheightを取得するため。

[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートの

[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニック

http://coliss.com/articles/build-websites/operation/css/css-folding-button-by-hornebom.html

後で読む

2014年後半、現在これからのWebデザインのトレンドと制作動向を知る26のキーワード
http://coliss.com/articles/build-websites/operation/design/improving-on-existing-web-design-trends-by-onextrapixel.html

「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法

http://kadoppe.com/archives/2012/09/max-width-100-img-aspect.html

初めてhtml5のcanvas使ってみた

参考サイト
いっぱいありすぎて…覚えているのはこちら
http://www.html5.jp/canvas/index.html
http://yoppa.org/taumedia10/2065.html
http://tech.kayac.com/archive/canvas-tutorial.html

歯車を描いてそれが回ったらかっこよくない？
かっこいい！！
gifアニメでつくっても、なんか物足りないな…
canvas使ってつくってみよう！

みたいな軽いノリではじめました。

でも、思ったよりも簡単にできたかも。

しかし、デザインが変わって、実際は使わなくなりました。(´・ω・`)

歯車を描くアニメーションは途中までしか描いてなかったのが唯一の救いかな？w
あ、でも、最後までやってないけど、割と簡単に書けますよぉ～

できたもののスクショ

canvasで歯車の絵をつくって、その場で回転します。

ソース一式。どーーーーーーん

<!DOCTYPE html>

<head>

window.onload = function() {

// FPS計算 ---------------------------------------------

var FPS = function(target) {

this.target = target; // 目標FPS

this.interval = 1000 / target; // setTimeoutに与えるインターバル

this.checkpoint = new Date();

this.fps = 0;

};

FPS.prototype = {

// checkからcheckまでの時間を元にFPSを計算

check: function() {

var now = new Date();

this.fps = 1000 / (now - this.checkpoint);

this.checkpoint = new Date();

},

// 現在のFPSを取得

getFPS: function() {

return this.fps.toFixed(2);

},

// 次回処理までのインターバルを取得

getInterval: function() {

var elapsed = new Date() - this.checkpoint;

return this.interval - elapsed > 10 ? this.interval - elapsed : 10;

}

};

// メイン処理 ------------------------------------------

var canvas = document.getElementById('canvas');

var cc = canvas.getContext('2d');

var theta = 0.0;

var rectWidth = 140;

var rectHeight = 140;

// 30FPSでアニメーション

var fps = new FPS(30);

var loop = function() {

fps.check();

cc.save();

// キャンバスをクリア

cc.beginPath();

cc.clearRect(0, 0, canvas.width, canvas.height);

cc.beginPath();

// 回転の中心は原点なので、

// 一度図形の中心を原点に移してから回転させて

// 元の場所に戻す

cc.translate(canvas.width / 2, canvas.height / 2);

cc.rotate(theta);

cc.translate(-rectWidth / 2, -rectHeight / 2);

//歯車生成

//内側

//丸

cc.beginPath();

cc.lineWidth = 1.5;

cc.arc(70, 70, 50, 0, 360 * Math.PI / 180, false);

cc.stroke();

//中

cc.beginPath();

cc.lineWidth = 1;

cc.arc(70, 70, 10, 0, 360 * Math.PI / 180, true);

cc.stroke();

//横棒

cc.moveTo(60, 70);

cc.lineTo(80, 70);

cc.stroke();

//縦棒

cc.moveTo(70, 60);

cc.lineTo(70, 80);

cc.stroke();

//外側

//上

cc.moveTo(60, 20);

cc.lineTo(60, 10);

cc.lineTo(80, 10);

cc.lineTo(80, 20);

cc.stroke();

//右

cc.moveTo(120, 60);

cc.lineTo(130, 60);

cc.lineTo(130, 80);

cc.lineTo(120, 80);

cc.stroke();

//下

cc.moveTo(60, 120);

cc.lineTo(60, 130);

cc.lineTo(80, 130);

cc.lineTo(80, 120);

cc.stroke();

//左

cc.moveTo(20, 60);

cc.lineTo(10, 60);

cc.lineTo(10, 80);

cc.lineTo(20, 80);

cc.stroke();

cc.lineWidth = 1;

cc.rotate( 45 * Math.PI / 180 );

//右上

cc.moveTo(90, -50);

cc.lineTo(90, -60);

cc.lineTo(110, -60);

cc.lineTo(110, -50);

cc.stroke();

//右下

cc.moveTo(149, -10);

cc.lineTo(159, -10);

cc.lineTo(159, 10);

cc.lineTo(149, 10);

cc.stroke();

//左下

cc.moveTo(90, 50);

cc.lineTo(90, 60);

cc.lineTo(110, 60);

cc.lineTo(110, 50);

cc.stroke();

//左上

cc.moveTo(49, -10);

cc.lineTo(39, -10);

cc.lineTo(39, 10);

cc.lineTo(49, 10);

cc.stroke();

cc.restore();

theta += 1 * Math.PI / 180;

if(Math.PI * 2 < theta) {

theta = 0;

}

setTimeout(loop, fps.getInterval());

};

loop();

};

</script>

</head>

<body>

</body>

</html>

楽しかったからいいや♪