jQueryを使わずにスライドメニューを実装しよう
2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など
タッチデバイスも完全サポート！さまざまなスライダーをシンプルなコードで実装できる軽量JavaScript -Tiny slider
デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。 バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作します。 HTMLは非常にシンプルで、外部ファイルと数行のコードで実装できます。 Tiny Slider -GitHub Tiny Sliderの特徴 Tiny Sliderのデモ Tiny Sliderの使い方 Tiny Sliderの特徴 Tiny SliderはOwl Carouselにインスパイアされた、多目的用の軽量スライダーを実装するJavaScriptです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 シンプルなスライダーも下記のようなアニメーションを使ったスライダーも、非常に簡単なコードで実装できます。 多目的用のスライダー シンプルなスラ
THREE Image Transition
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js
デモページ 物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定し、アニメーションを設定します。 elは要素、el内のプロパティはアニメーションさせるプロパティと値、typeはアニメーションの種類、frequency, frictionはアニメーションの細かい設定、durationはタイミングです。 var el = document.getElementById("logo") dynamics.animate(el, { translateX: 350,
![[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/5bf61a2d1b7c4461469ad3d2119edd7583b7f517/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015062806.gif)
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
JavaScriptユーザエージェント判別・判定
Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日本国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi
[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック
レッド・イエロー・ブルーの三枚のパネルが重なっており、それをホバーするとそのパネルを扇状に開くスタイルシートのデモを紹介します。 アクションの度に、ぷるっと反動するのが細かい！ Calendar and Clock 実装はけっこう複雑ですが、このインタラクションはかっこいいですね。 日付や時刻の取得、不透明度の変更にJavaScriptを使用していますが、ホバーのアニメーションはスタイルシートで実装されています。 HTML 3つのパネルはdiv要素で、1枚目はノーマル時のカレンダーとホバー時の年と分と日、2枚目はホバー時の時と曜日、3枚目はホバー時の秒と月が要素として配置されています。 <div class="signboard outer"> <div class="signboard front inner anim04c"> <li class="year anim04c"> <sp
jQuery：よく使用される機能をまとめて実装できるプラグイン - NxWorld
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示（thickbox.jsを使用） スムーススクロール タブ機能 CSS3の擬似クラスをクラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]スムーズに開閉する多段型のドロップダウンのナビゲーション | コリス