ricopinxのブックマーク - はてなブックマーク

ricopinx id:ricopinx

ブックマーク / 9-bb.com (5)

CSSで背景画像のシームレスパターンを無限スクロールさせるアニメーション | 9ineBB
CSSのアニメーションを使って、シームレスなパターンで背景を無限スクロールさせる背景画像がシームレスパターンの時に使えるテクニックです。シームレスパターンなパターンをbackgroundで背景画像に利用し、background position で背景画像を動かすアニメーションを繰り返すものです。背景画像は自動でrepeatで敷き詰められるのを利用しています。ー CODE ー HTML <section> <h1>BACK GROUND SCROLL</h1> </section> CSS body { margin: 0; padding: 0; } section { height: 300px; margin: 100px 10px; background-image: url(bg.png); -webkit-background-size: 500px; background
ricopinx 2016/12/13
background

アニメーション

CSS

シームレス
リンク
メガネのレンズがあるところだけクリアに画像が見えるCSSの画像フィルターblurを使ったアイディア | 9ineBB
メガネを使えばこんなに綺麗見れますよっていう宣伝につかったり、メガネの部分を虫眼鏡にして遊べるWebサイトを作ったりと使えそうですね – CODE – HTML <div class="background-image"></div><div class="workspace"><div class="lens"></div></div> CSS body { height: 100%; width: 100%; margin: 0; cursor: none; overflow: hidden; background: #000; } .background-image { position: absolute; top: 0; left: 0; background: #bada55 url(http://thehomesitter.com/wp-content/uploads/201
ricopinx 2016/10/18
css3

jQuery

svg

フィルター
リンク
jQueryを使ってクリックでタグ（要素）を削除する色々なパターン | 9ineBB
jQueryで簡単に要素を削除する方法 jQueryの.click(function)でタグがクリックされた時に色々な動作を与えることが出来ます Webサイトに色々なアクションを付けるのがこれで簡単になります今回は色々な消え方のDEMOを作りました HTML コード <div class="sample1"> <p>クリックで消滅自分が消滅</p> <p>クリックで消滅自分が消滅</p> <p>クリックで消滅自分が消滅</p> </div> <div class="sample2"> <p>クリックで親ごと消滅</p> </div> <div class="sample3"> <p>クリックで下の文が消滅</p> <span>消える文字</span> </div> <div class="sample4"> <p>右ペケをクリックで閉じる<span>×</span></p> </d
ricopinx 2016/06/10
jQuery
リンク
CSSのopacityとtransition を使ってフェードイン・フェードアウトの効果を作ってみよう！ | 9ineBB
WEBサイトにアニメーションを設定すると、WEBサイトが少しリッチになります(過剰な演出はちょっとウザくなります)、ということで今回はopasityを使って、画像やテキストがスーーーっと消えたり現れたりするアニメーション効果を作ってみようということです。 transitionの書き方 CSSのtransf ormの書き方です各ブラウザに対応させるためにベンダープレフィックスとうのをそれぞれつけています、基本形は一番下の行のものです all ですべての変化をアニメーションの対象にします。0.3sで0.3秒かけて変化します、さらに変化の具合も追加出来ますベジュ曲線で指定することもできるし、最初から準備されたアニメーションを指定する事もできます。また省略可能です。上のコードでは省略しています省略している場合は初期値のeaseが使われます ease、ease-in、ease-out、linea
ricopinx 2015/09/30
アニメーション
リンク
CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要 | 9ineBB
jQueryを使うと簡単にアコーディオンを実装する事が出来るのですが、CSSでもアコーディオンの作成が可能です CSSだけでアコーディオンを作成 HTML コード <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> <label for="Panel12">ボタン2</label> <input type="checkbox" id="
ricopinx 2015/08/19
css3だけで実装

スマホ対応

アコーディオン
リンク
1