背景を固定した状態でコンテンツをスクロールする
- 2016.10.24
- 背景固定
main要素をラッパーに、div要素でcontentを配置。 固定表示するコンテンツには「.cd-fixed-bg」、スクロールするコンテンツには「.cd-scrolling-bg」と入れ子のdivを加える。 <main> <div class="cd-fixed-bg cd-bg-1"> <h1>見出し</h1> </div> < […]
Coding
googlemapでクリックしたマーカーを地図の中心に移動
- 2016.10.24
- GoogleMap
google.maps.event.addListener(marker09, "click", function (e) { ib.open(theMap, this); // 地図の中心を移動 var movePos = new google.maps.LatLng(34.675345, 135.499509); theMap.panTo(movePos); });
重なり合う下の要素をクリックする
- 2016.10.24
- クリック
重ねたpng画像の下にボタンが入っている場合など、下の要素をを押したい場合には、上に重なる要素のマウスイベントを無効化する。 .hoge{ pointer-events: none; }
IEでdisplay: inline-blockを使う
- 2016.10.24
- IE7, inline-block
li { display: inline-block; *display: inline; *zoom: 1; }
テーブルをレスポンシブに対応させる
.tableMin{ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } }
マウスホバーで画像を回転させる
.rotatePhoto { width: 300px; height: 300px; overflow: hidden; } .rotatePhoto img { transition: 0.5s; } .rotatePhoto img:hover { -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -o- […]
マウスホバーで画像を拡大する
.scalePhoto { width: 200px; heght: 200px; overflow: hidden; img { -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear; -o-transition: -o-transform 0.3s linea […]
clearfix用のmix-in
- 2016.10.24
- clearfix
@include clearfix; @mixin clearfix{ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after {clear: both;} .clearfix { *zoom: 1; &:before, &:after { display: block; […]
スクロールに合わせて要素を表示する
- 2016.10.24
- スクロール
<script> $(function(){ var setElm = $('.scrEvent'), delayHeight = 100; setElm.css({display:'block',opacity:'0'}); $('html,body').animate({scrollTop:0},1); $(window).on('load scroll resize',funct […]
スクロール位置を取得する
- 2016.10.24
- スクロール
// スクロール位置取得 var scrollPosTop = $(window).scrollTop(); //ウインドウTOP var scrollPosUnder = $(window).scrollTop() + $(window).height(); // ウインドウ下部 取得は、ロード時、スクロール時、リサイズ時に行う $(window).on('load scroll resize' […]