スクロールに応じて背景画像を徐々にblurさせる
Result jQuery$(function() { zoom = $('.feature').css('background-size') zoom = parseFloat(zoom) / 100 size = zoom * $('.feature').width(); $(window).on('scroll', function() { fromTop = $(window).scrollTop(); newSize = size - (fromTop / 3); if (newSize > $('.feature').width()) { $('.feature').css({ '-webkit-background-size': newSize, '-moz-background-size': newSize, '-o-background-size': newSize, '
jQueryスニペット：アニメーション付きの数字カウンター | かちびと.net
Result Webアプリなんかの登録者数アピール等やペラサイトのアフィリの類でよく見かけるやつです 0に戻してからeasingで元の数字に遷移させています jQuery$('.count').each(function () { $(this).prop('c',0).animate({ ｃ: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); });html<span class="count">2000</span>via
SVGとanimationで滑らかな動きの波っぽいやつ
Result ヒーローイメージに目が疲れない程度のアニメーションフレームを用意して注視を促し、訴求力向上を期待する的なやつ。向上するかは分かりません ユーザーにストレスないものが望ましいという事で癒されそうな波をSVGとCSSだけで表現するサンプルです まぁこれでもストレス感じる人がいないわけではないでしょうけども。 css.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
