CSS Menus
A curated collection of front-end snippets to save you time. Whether you work with HTML, CSS, Bootstrap, TailwindCSS, JavaScript, you'll find ready-to-use components and patterns to streamline your development. No fluff — just practical code. Menus are the backbone of site navigation — but default styles often lack visual appeal. With CSS, you can create responsive, interactive menus that enhance
Right Height
Want to learn how to write your own vanilla JS plugins? Get my free daily developer tips and level-up as a web developer. 🚀 Right Height Dynamically set content areas of different lengths to the same height. Right Height now supports nested content areas. Demo Content 1 The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, f
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
Parallaxをやってみましたよ、jQueryを使って - サイバーまめカンの電豆館
@CyberMameCANです。 パララックスというものを以前から試したかったので、本日やってみました。 マウスに追従する動き、楽しいですね。 勉強に読ませていただいたサイト マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」 デモはこちら。 HTML インクルードファイルです。 [xhtml] [/xhtml] 本体です。 [xhtml] [/xhtml] JavaScriptもhtmlファイルの最後の方にでも記述します。 [javascript] $(‘#header’).parallax( { ‘elements’: [ { ‘selector’: ‘#green_egi’, ‘properties’: { ‘x’: { ‘background-position-x’: { ‘initial’: 400, ‘multipli
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ
リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips
Hover Effect Ideas | Set 1