スマホだと反応が遅れる :hover を心地良くする方法
スマホ向けにサイトを作っていると、ブラウザの挙動が遅くてUXを低下させてしまうことがあります。例えば、画面をタッチしたときの:hoverの挙動。あと、jQueryのanimate()の挙動。とか。 スマホブラウザはJavaScriptの実行速度が遅いので、animate()の挙動とかはCSSで書くのがベストです。これはよく知られているので、実装されているサイトも多いのではないでしょうか。（あ、具体的な実装はまた次回ご紹介したいと思います。） 今回はですね、あまり話題にならない:hoverのことです。 :hover がおかしい？ マウスカーソルを乗せたときのスタイルを設定するのが:hoverです。スマホだとタッチした瞬間に適用されると思いますよね。でも例えばiPhoneで:hoverを使うと、指を離したときにスタイルが適用されます。ですので、「もう押してないのに…」という場所が「押されたスタ
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
jQueryを使ってレスポンシブにロゴなどの画像を出し分ける方法 ｜ memocarilog
jQueryを使ったウィンドウサイズに応じてロゴなどの画像を出し分ける方法です。部分的にお手軽レスポンシブデザインができます。 「サンプル」も作りました。 HTMLのコード レスポンシブに出し分けたい画像の親要素にid又はclassを振ります。htmlにはモバイル用の画像を置きます。（※モバイルでのアクセス時、最初にPC用画像を読み込むとモバイル画像へ切り替えるのに時間がかかるため、最初HTMLではモバイル画像を読み込むようにコードを変更しました。） <div id="example"> <img src="mobile.png" alt="mobile"> </div> jQueryのコード head 内にjQueryの読み込みとコードを以下のように記入します。 var swichWidth に切り替えたいウィンドウのサイズを記入します。 var defaultImg はPCサイズ用の画
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
CSS vs. JS Animation: Which is Faster?
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point walkthrough of how JavaScript-based DOM animation libraries, such as Velocity.js and GSAP, are more perfor
アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素
【JavaScript】（基礎）親要素・子要素の取得・追加まとめ③ | unitopi - ユニトピ -
こんにちは！ unitopi新米ライターの、ケインでございます。 このシリーズも最終回。今回も、JavaScriptにおいて基本的だけど忘れがちな、JavaScript（jQuery）における「親要素・子要素の取得・追加（削除）」について、今回は「要素の追加と削除」のお話をさせていただきます！ ちなみに今回は、説明の仕方がこれまでの２回と異なるアプローチになっているので、その点ご承知おきください！（※なぜなら紹介する量が多そうだからです…） ※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね！ ※このシリーズのこれまでの記事は「その①」及びその②になります。まだご覧になっていない方で、合わせて勉強したい方はぜひご覧くださいね！ 【JavaScriptの場合】 jQueryに比べると少ないですが、それなりに表現方法の数がありますので、どんなものがあるか、一覧を
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
要素を立体的に回転させて動かすエフェクトTURNBOX.jsの実装方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ だんだんと秋の気配が近づいて過ごしやすくなりましたね。 なんだかゴロゴロしたくなってきます<( ˘ω˘ ┌┛)┌┛ ってなわけで今回は、要素を立体的にゴロンゴロン動かせるプラグイン TURNBOX.jsをご紹介しますc⌒っ´ʘ‿ʘ｀)っ それでは実装方法を解説していきます( ˘ω˘)☝ はじめに jQueryを呼び出す記述の後にturnBox.jsを読み込みます。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="/js/turnBox.js"></script> HTML divの中に表示させたい面の数の子要素を配置しましょう( ˘ω˘)
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
