波紋が広がるリップルエフェクトボタンの作り方（CSS・Javascript）
CSS .ripple { position: relative; overflow: hidden; } .ripple .rp-effect {/*エフェクト*/ position: absolute; border-radius: 50%; opacity: 0.35;/*波紋の濃さ*/ transform: scale(0); background: #FFF;/*波紋色*/ animation: ripple 700ms; pointer-events: none; } @-webkit-keyframes ripple { to { opacity: 0; transform: scale(2.0); } } @keyframes ripple { to { opacity: 0; transform: scale(2.0); } } Javascript (function(
jQuery Bracket
jQuery Bracket library [server] jQuery bracket is a jQuery plugin that lets users create and display single and double elimination brackets for tournament play. NEWNeed a tool for round-robin tournament groups? Check out the new jQuery Group library that's under development! Installation and project sources You can use npm or bower to install the library as a dependency to your project. npm instal
Pikabu – Flexible Framework for Off-Canvas Flyout Panels | Mobify
Pikabu A speedy, flexible framework for off-canvas flyout panels. Simple markup Few containers and classes means implementation is a breeze. Native scrolling Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don’t support it. Customization No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs. Compatibility This thing works
hammer.jsの使い方 | まとめーたー
photoBy: http://s3.bitelia.com/files/2012/07/hammer-js-800x436.jpgjquery で スワイプやタッチジェスチャーを可能にするライブラリまずはダウンロードとご紹介http://eightmedia.github.io/hammer.js/ からダウンロードできます。 スマートフォンにマルチタッチ機能をつけることができます。 jquery.hammer.min.js は https://github.com/hammerjs/jquery.hammer.js からダウンロードできます。 使い方 スワイプで実行 jquery、hammer.js は読み込み済み #hoge を swipe で #hogeの テキストを取得 読み込む順番を逆にしないと動かない場合がある <script src="/app/webroot/js/jqu
カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2）|WD Online
2016.01.04 課題解決のためのUI実装講座 Web Designing 2016年1月号 カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2） スワイプ対応タブメニューを実装してみよう Text：町田なつみ、古川佑太朗 スワイプに対応したタブメニューの事例から、そのメリットや気をつけるべき点が把握できたところで、サンプルを使って実装例を解説していこう。 サンプルファイルダウンロードのご案内 このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。 ［SWIPE TAB 01］タブ部分を配置し横スクロールに対応させる それでは、スワイプ対応タブメニューをつくってみよう。コンテンツ部分のスワイプ時に連動して、タブメニューをスクロールさせ、常にカレントのタブが表示されるようにする。さ
フロントエンジニア必見！フロントエンド界隈で注目を集めるRiot.js入門資料まとめ
JavaScriptのフレームワークはReact、Angularなどが人気ですが、ここ最近フロントエンド界隈を中心にRiot.jsが注目を集めています。 軽量でHTMLに似通った文法を採用しており、扱いやすいJSフレームワークとして人気急上昇中です。 そこで今回は、これからRiot.jsを始めるエンジニア、Riot.jsに興味のあるエンジニアに向けて、Riot.jsの入門資料（記事・スライド）をまとめました。 比較的扱いやすいJSフレームワークなので、難しく考えずにまずは使ってみてください。 JavaScript案件を提案してもらう Riot.js入門記事 Riot.js — A React-like user interface micro-library http://riotjs.com/ja/ Riot.jsの日本語公式サイトです。 ガイド、FAQ、APIなど、各メニューが日本語化
Accelerated Mobile Pages Foundations | Google Codelabs
1. Overview In this codelab, you'll learn how to build Accelerated Mobile Pages – or AMP for short. To achieve this you will implement a simple news article web page that conforms to the AMP specifications while incorporating several typical web features commonly used on mobile news sites. What you'll learn How AMP improves the user experience of the mobile web. The foundations of an AMP site. AMP
Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA
スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。 プッシュ通知のデモ プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。 「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows
モバイルページ読込を高速化するAMPを三ヶ月間運用してどうだったのか - ICS MEDIA
※AMPは画像を遅延読み込みする機能が存在するため、ファーストビューでの転送容量が少なくなる傾向があります。当サイトもHTTP/2やリバースプロキシーを利用するなどWordPressを極限まで早くするようチューニングしていますが、AMPページではそれよりも高速に表示されています。 筆者はモバイルブラウザでのページ読み込み高速化によって、アクセス数が伸びる、SEO的に有利になる、エンゲージメントが向上する、といったことに期待していました。 AMP対応の効果は今のところ局所的 結論からいうと、AMP対応して得られたメリットは局所的なものでした。一部の記事がバズったときに、アクセス数の向上を確認できたというものです。まずアクセス数の数値から、AMPの状況を見ていきましょう。次のグラフはAMP対応してから現在までのアクセス数の記録です。 ▲アクセス解析はAMPページのみに絞り込んで表示 上位1位の
wrap()関連まとめ - Qiita
wrap(),wrapInner(),wrapAll(),unwrap()がごっちゃになるのでメモとしてまとめました。
ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ - NxWorld
既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。 そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。 一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。 image hover 63 effects イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。 HTMLもシンプルでエフェクトはすべてCSSで実装されています。 Css3 Transform rotate, sc
jQuery.getScript( url, callback ) - jQuery 日本語リファレンス
HTTP(GET)HTTP通信(GET)で、ローカルのJavaScriptファイルを読み込み、実行する。 jQuery1.2以前では、getScriptは同ドメイン内のスクリプトを読み込むだけだったが、jQuery1.2では別のドメインのJavaScriptを読み込む事もできるようになった。。 【注意】Safari2とそれ以前のバージョンでは、global context 内でスクリプトを同期で評価することはできないので、後で呼び出すこと。
jQueryを利用したDOM操作 要素の追加メソッドまとめ - Qiita
はじめに jQueryでの要素追加メソッドをよく忘れるので、それのメモです。 似たような記事はもう沢山あると思いますが、すぐに思い出せるようコードベースで動きを確認できるようにしています。言葉での説明はあえて省きます。Don't think feel ! なお実際の動作は↓で確認ができます http://nekoneko-wanwan.github.io/demo/jquery/dom/ とりあげるメソッド append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() wrap() wrapInner() wrapAll()
Codrops | Useful resources and inspiration for creative minds
Explore 500+ free demos Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Webzibition An exhibition of standout websites that caught our eye, curated for you. Fresh frontend news plus dev & design inspiration delivered to your inbox 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, webs
jQueryでaタグのtarget属性を「_blank」に設定する手順:特定のリンク文字列を対象にする方法｜DAD UNION – エンジニア同盟
現代のウェブデザインとウェブ開発の領域では、一貫したユーザーエクスペリエンスを提供するためにさまざまな技術やツールが活用されています。特に、大規模なウェブサイトや複数のページを持つサイトでは、リンク属性を一斉に変更する必要が生じることがあります。 この記事では、jQueryの.attrメソッドを使用して、ページ内のaタグのtarget属性を一括で「_blank」に変更する方法を詳しく解説します。 .attrメソッドを利用したJavaScriptの記述 最初に、必要なjQueryライブラリをページにインクルードします。以下のコードは、GoogleのCDNからjQueryを読み込む例です。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jquery.gracket.js - A JQuery/Canvas approach to creating single elimination tournament brackets
Responsive Sidebar Navigation | CodyHouse
Hammer.JS - Hammer.js
301 Moved Permanently
offset() - jQuery 日本語リファレンス