【JavaScript・CSS】タブの切り替えメニューを実装する方法｜複数箇所の場合も
今回はJavaScript・CSSを利用し、タブメニューを切り替えてコンテンツの内容を変更する例となります。 【JavaScript・CSS】タブの切り替えメニューを実装する例以下の例では、「Tab-A」「Tab-B」「Tab-C」のいずれかを選択して変更すると、その下のコンテンツの内容も変更します。 See the Pen JavaScript：Tab Switching by yic666kr (@yic666kr) on CodePen. HTMLの簡単な説明HTMLのマークアップの簡単な説明となります。 以下の箇所では、タブとタブを切り替えて表示するコンテンツの要素を、それぞれ3つ作成しています。 デフォルトでは、現在のタブがclassにis-activeをもつ「Tab-A」となり、コンテンツの要素は「Content-A」を表示しています。 「Content-A」の要素は、clas
[JS]実装が簡単で、操作も快適！スクロールに対応したコンテンツを実装できる超軽量ライブラリ -SimpleBar
スクロールバーをカスタマイズしてコンテンツを設置できるJavaScriptのほとんどは、スクロールの挙動が独自だったりします。ブラウザのネイティブのスクロール操作を使用し、快適に動作するコンテンツを実装できるライブラリを紹介します。 5kBの超軽量で、他スクリプトの依存はありません。また、IE9+対応なのも安心ですね。 デフォルトのスクロールバーをカスタマイズ 同系統のスクリプトの多くはJavaScriptでスクロールバーを模倣しますが、当スクリプトはデフォルトのスクロールバーを使用するので、パフォーマンスを損なうことはありません。 スクロールバーのデザイン スクロールバーはCSSでスタイルを簡単に変更できます。 5kBの超軽量スクリプト 他のスクリプトの依存はなく、超軽量の単体で動作するスクリプトです。 ネイティブのスクロール スクロール操作にJavaScriptは使用せず、ネイティブの
![[JS]実装が簡単で、操作も快適！スクロールに対応したコンテンツを実装できる超軽量ライブラリ -SimpleBar](https://cdn-ak-scissors.b.st-hatena.com/image/square/c05f7f05b6b7db411a8ec41b4abe63014f44478d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080704-00.gif)
JavaScriptで特定の要素に画像ファイルをドラッグ＆ドロップできる処理を書く - Qiita
#dropArea { overflow: hidden; padding: 40px 10px; background: #ddd; border: 3px #666 dashed; color: #999; font-size: 30px; font-weight: bold; text-align: center; } #dropArea.dragover, #dropArea:active { background: #cfc; border-color: #9c9; color: #9c9; } #fileInput { display: none; } #output img { display: block; margin: 15px auto; } document.addEventListener('DOMContentLoaded', function () { var
Tilt.js - Parallax tilt effect for jQuery
The most basic usage: Add <script src="tilt.jquery.js"></script> right before the closing </body> tag Mark your elements with <span data-tilt></span> Creating a parallax effect Add transform-style: preserve-3d to your tilt element. Add a transform: translateZ(20px) to your inner elements that have to pop out. Glare effect: Setting this option will enable a glare effect. You can tweak the glare val
日本のオンラインカジノ - Samuraiスロット
日本で最高のオンラインカジノを選ぶ際には、安全で、楽しく、実りあるギャンブル体験に貢献するいくつかの要素を考慮することが重要です。多くの選択肢がある中で、あなたの特定の要件を満たす適切なオンラインカジノを見つけることは、圧倒されるかもしれません。この包括的なガイドは、あなたが情報に基づいた決定を下し、日本で最高のオンラインカジノを選択するのに役立つ貴重な洞察力とヒントを提供します。 ライセンスと規制 オンラインカジノを選択する際に考慮すべき重要な要素の1つは、その運営を監督するライセンスと規制です。ライセンスを取得し、規制されているカジノを選ぶことで、あなたの個人情報や財務情報が安全であること、そしてゲームが公正で公平であることが保証されます。Malta Gaming Authority (MGA)、United Kingdom Gambling Commission (UKGC)、または
スマートニュースやグノシーのような、スワイプタブ切替機能を実装する ｜ Tips Note by TAM
グノシーやスマートニュース、日経電子版などのニュース系アプリでよく使われているUIで、スワイプで記事一覧が横スライドしていくものがあります。 大量の更新記事をカテゴリ毎に効率よく見せるのに非常に効果的なUIです。 webサイトではあまり使われている場面は多くないですが、ヤフーのニュース部分ではこのUIが採用されています。 今回はこのUIを、jQueryプラグインのbxSliderをうまく活用しながら実装してみようと思います。 完成系はこちらになります。GitHub上でコードも公開しておりますのでよければ使ってください。 ※iOS8.13以上 safari対応 ※Andoroid4.2.2以上 chrome・Android標準ブラウザ対応 DEMO ソース ポイントはタブの横スクロールの調整です。 タブが1画面におさまっていないため、コンテンツのスライド部分に合わせて表示位置を微妙に調整して
余韻を残してスクロールするようにするjQueryプラグイン-NiceScroll
スクロールする時に少し余韻を残してスクロールするようにするjQueryのプラグインです。ページ全体だけでなく、ページの一部にのみ使う事も可能です。最新記事のボックスなどに使ってみたいと思いました。 （！ご注意：こちらの記事では記事を書いた当時の使用方法をご紹介しております。現在の使い方などとは違っておりますので、ご使用の際はプラグイン配布元の使用方法をご参考いただくことをおすすめします。） divだけでなくフレームにも対応しています。 配布先とデモ 配布先：inuyaksa / jquery.nicescroll 上の方の”zip”というボタンをクリックでデモファイルも入った一式のセットがダウンロードできます。jquery.nicescroll.jsの項目かjquery.nicescroll.min.jsの項目でスクリプトのみのダウンロードができます。 使用方法 ヘッド内で下記のようにjQ
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
ページが読み込まれたら指定されたテキストフィールドにフォーカスを移す
ページ上の特定のエレメントにフォーカスを移すにはfocus()を使います。ページが読み込まれたら特定のテキストフィールドにフォーカスするには、window.onloadイベントが発生した際にフォーカス処理を行うようにします。サンプルではID名がuserIDのテキストフィールドにフォーカスするようにしています。 サンプルコード [実行] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>JavaScript Sample</title> <link rel="stylesheet" type="text/css" href="main.css
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
2013年新卒研修 JavaScript基礎
https://github.com/mixi-inc/JavaScriptTraining と http://alpha.mixi.co.jp/2013/11844/ とセットでご覧ください。
JavaScriptでアニメーションを書く初歩の初歩
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
横からスライドするドロワーメニューのjQuery、JS、CSS3のプラグインまとめ！
shuffle.jsで複数条件の絞り込み - Qiita
タブの切り替え方: JQuery + CSS + html の書き方 - Qiita
公式チュートリアルから始めるVue.js vol.2「Github コミット」
公式チュートリアルから始めるVue.js vol.1「Markdown エディタ」
anime.js