フロントエンドコーディング時に便利なジェネレーターサイト（随時更新） - Qiita
更新履歴 追加 2026/01/09 「ビジュアル正規表現エディタ」を掲載しました 「Lorem Picsum」を掲載しました 「readme.so」を掲載しました 2025/06/26 「Sass: Playground」を掲載しました 2024 2024/10/23 「ShadeStudio」を掲載しました 2024/07/22 「CSS Grid Generator」を掲載しました 2024/07/02 「Proportio.app」を掲載しました 「CSS Filter Generator」を掲載しました 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shad
あると便利なスクロールアニメーションライブラリ11選
ページをスクロールすることで、写真や要素をアニメーションで出現させる便利なライブラリも多くあります。jQuery非依存や軽量なライブラリまで、今回は忘備録も兼ねてスクロールアニメーションライブラリをまとめて紹介します。 各ライブラリのダウンロードはライセンスを確認の上、ダウンロードをおこなってください。
スライダーを作るのにSwiper.js以外のプラグインはもう必要ない
かなり強気なタイトルですが実際に最近の案件でSwiperというjavascriptのプラグインを使っております。 もう現場ではSwiper.js以外のJsは必要ないと思います。 Swiper.jsの特徴 Swiperの特徴は下記の通りです。 Jqueryを使っていない オプションがたくさんある Demoページのわかりやすさと親切さ 他の優秀なスライダーのプラグイン Slick Slickもレイアウトがたくさんあって評判がいいですよ。 bxSlider bxSliderです。これはかなり昔からあって、レスポンシブのサイトが出だした時に話題になりました。 レスポンシブに対応しているのは当時このスライダーだけだったんじゃないかな。 急に起こるレイアウト変更に対応できる よく現場で言われるsliderの使い方は 次に表示される画像を表示した、サムネイルスライダー 前後の画像が画面からはみ出て見えて
タブやナビゲーションがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装
タブがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装したデモを紹介します。リスト要素でシンプルに実装されているので、タブだけではなく、ナビゲーションなどにも利用できると思います。 下記は、デモでの操作をアニメーションgifにしたものです。
Bootstrap 対応！マイクロインタラクションをクラス名だけで作ろう！ScrollReveal.js | PhotoshopVIP
2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン
フロントエンドエンジニアが2017年触ったWebの技術まとめ(非フロントエンド含む) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2017年ももう終わりなので、自分用のメモも兼ねて今年触った技術をざっとメモしてみる。 フロントエンドに対しては大凡モダンなものを使っているけれど、他についてはその限りではないので、自分が古いと感じるものについては来年以降移行したいもの、手をつけたいものもあわせてまとめる。 ちなみに今年のGitHubで見えるだけのアクティビティとしてはこんな感じ。そこそこコードは書いた。 技術の分類 とりあえず以下でカテゴライズしておく。そこそこその他はありそう。 Webフロントエンド Webバックエンド その他Node周り インフラ / ミドルウェア
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
CodePen Project 機能がやってきた！ 有料会員になった！
CodePen の新機能、Project がやってきた！ たくさんの人達にサポートしてもらいながら、日々圧倒的成長をさせていただいているわけですが、「人間以外」では、CodePen に一番お世話になっています。コンパイルが必要な Sass や ES6 に対応しているし、jQuery や Vue.js といった外部ソースも使えるので、すぐにコードを試すことができます。実務でうまくいかないコードは、一旦 CodePen のシンプルな環境で実装することで切り抜けてきました。ありがとう CodePen。 そんなコードペンに大型新機能登場ということで、ついに有料会員になり、実際につかってみました。 結論から言うと、Sass, ES6 をコンパイルしてくれる。Webpack を使えるので import export もできる。普通のウェブサイトとしてディプロイできる。です。特に import expo
5分でできるjQueryで実装する簡単sticky headerの作り方
どうも@De_webdesignです。 2014年あたりから流行りだしたスティッキーヘッダー（sticky header）ですが、jQueryで簡単に実装できるのでぜひこの機会に試してはいかがでしょうか？固定ヘッダーはユーザーに非常に人気であり、このトレンドはまだしばらく続きそうですね。このチュートリアルではこのサイト同様、ユーザーがスクロールするまではメニューを大きく表示し、スクロールしたら小さくするという動きになります。 サンプルコード HTML <div id="menu"> <ul> <li><a href="#">menu01</a></li> <li>a href="#">menu02</a></li> <li>a href="#">menu03</a></li> </ul> </div> CSS #menu ul{ list-style: none; background:t
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 一部破壊的な変更があり 既に非推奨と公表していたAPIを削除 ドキュメントにない隠しAPIの削除 特定の入力値に対する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery classの追加・削除 - Qiita
豊富なアニメーションが作れるAnimate.cssをJSで使うための「Animator」:phpspot開発日誌
Google Search