最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
Reactに心酔してjQueryを捨てるべきか、或いはいつ古道具を売り払うかの話 - メモ等
React.js界隈の人に聞きたい はてなブックマーク - ReactJS界隈の人に聞きたい この辺を読んでbh.mgzl.jpでもReactを使っているので思ったことなどを書いてみる。雰囲気的には増田に概ね同意したい。 SPA前夜 SPAが使える道具になったのはlocation.hashを使ったテクニックやHistoryAPIが実際にモダンブラウザで動くようになったこの数年の話で、それまではそういう選択肢すらなかった。あったとしても、URLが変わらない不完全なものだった。 だから、1つのURLで1つの状態を表現するためには実際にページ遷移をさせるしか無かった。もちろんGmailとか例外的な物はあったけれど誰にでも実装できるようなものではなかった。 それが誰にでも使えるようになったのは、jQuery.pjaxのようなライブラリ（のプラグイン）が出てきてからだったと思う。だがjQueryのD
animatedModal.js
animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions. DOWNLOAD VERSION 1.0
jQuery Performance Tips – jQueryにおける高速化 -
リッチなWebアプリケーションに対するニーズの増加に伴い、JavaScriptで十分なパフォーマンスを担保することが難しくなってきています。とりわけ、スマートフォンのような非力なデバイスでは一層シビアなチューニングが求められるでしょう。本セッションでは、もっともポピュラーなJavaScriptライブラリである「jQuery」を中心とした、いくつかのパフォーマンス解決のためのヒントについてご紹介させていただきます。 http://frontrend.github.com/events/04/#pocotan001Read less
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
画面いっぱいの背景画像をスライドショウするjQueryプラグイン
2010年4月10日 画面サイズにフィットして伸縮する背景画像を、スライドショウするjQueryプラグインの紹介。 フルFlashサイトなどで見かける、画面サイズに合わせて画面いっぱいに画像が表示されるアレ。それにスライドショウ機能が付いたjQueryプラグインを、自分のサイトで使ってみました。 動作サンプル www.daichifive.com 自分のサイトで使ってみました。なんか、いいカンジでしょ？ちなみに、使用している写真は、足成さんでダウンロードしました。 追記 上記で紹介している僕のサイトのソースコードをまるまる流用する人が増えています。分からないからといって、CSSファイルやデザインまで全部パクるのはやめましょう。head内のアクセス解析用コードまでそのまま使う人が多いのもホント焦る。僕のGoogleAnalyticsの結果に知らないタイトルのページがたくさん入ってきてます。
jQueryで背景画像を全画面表示する
Posted: 2010.11.30 / Category: javascript / Tag: jQuery 最近ではjavascriptでも表現できることが飛躍的に増え、Flashサイトのようなリッチなサイトも多くなってきましたね。 ということでFlashサイトと聞いて一番最初に思い浮かべそうな背景画像の全画面表示というのをjQueryで作成してみたいと思います。 html+cssの準備 背景画像を全面表示するっていうタイトルですが、cssのbackgroundにはサイズを指定するプロパティがないので、気持ち悪いけど画像は普通に配置します。 html <img src="101121_2.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1><a href="#">jQueryで背景画像を全画面表示する。<
AnimateImage 旧バージョン (v0.5 – v0.6.5.1) – attosoft.info
※ AnimateImage の旧バージョン (version 0.6.x 系) に関する情報を参考までに残しておく。新バージョン (version 0.7 以降) との互換性はなし。 目次 概要 使い方 ダウンロード 記述例 API 仕様 概要 AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript コード。 ※ 最新の情報については JavaScript: 複数の画像をアニメーション GIF のように連続表示する AnimateImage を参照。 使い方 head 要素や body 要素などに以下のコードを記述して AnimateImage スクリプトを読み込む。 <script type="text/javascript" src="animateImage.js"></script> Image1.png, Image2.png
kojilow Blog | ページ遷移時にフェードイン・フェードアウト
Re:designのサイトで設置した、jQueryを使用してページ遷移時にフェードイン・フェードアウトさせる方法 //インラインCSSで#wrapper{display;block;}を追加 $(‘head’).append(‘<style type=”text/css”>#wrapper{display;none;}</style>’); $(function(){ //読み込み時にフェードイン $(‘#wrapper’).fadeIn(1000); //aタグクリック時にフェードアウト実行 $(‘#navi a, a.windowFade’).click(function(){ var url = $(this).attr(“href”); $(‘#wrapper’).animate({“opacity”:0},1000,function(){ location.href = url;
http://neteye.github.com/activity-indicator.html
NETEYE Activity Indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following b
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル
Sliding Boxes and Captions with jQuery « Build Internet
Add an extra layer of information to your images with sliding boxes. This is now a plugin! Check out the announcement post for the Mosaic jQuery plugin. Check the project page for the latest release notes and features! The Basic Idea All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of yo
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する
twitter facebook hatena google pocket まずはフォトグラファー 木村 隆宏さんのサイトを御覧ください。 こちらのサイトでは、アクセス時にポートフォリオを順番にフェードさせることで非常に印象的となっています。 今回はこちらで使用しているJavaScriptをのぞきながら、どう実現しているのかを見ていきたいと思います。 sponsors 使用方法 フォトグラファー 木村 隆宏ではJavaScriptライブラリjQueryを利用し、fade.jsでフェードを制御しています。 該当部分を抜粋し、汎用的に書き換えたのが以下となります。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $('
![[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a2b72034be2bced8bec9088f939fbccfd2280a9/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2010%2F07%2Fjintervalfade-thumb-300x200-477.jpg)
jQueryでXMLをパースして表示するコードサンプル例:phpspot開発日誌
Parse XML with jQuery | Papermashup.com jQueryでXMLをパースして表示するコードサンプル例が公開されています。 jQueryマスターな方には無用の物かも知れませんが、スニペットとしても使えそうなので便利かも、というのでご紹介。 $.ajax でサイト内にある .xml ファイルを取得して、success のハンドラによってXML処理させます。 普通に書くと大変ですが、jQueryを使うことで次のように簡単になります。 .xml のパスはサイト内のURLであれば何でもいいので、サーバ側に xml を出力するようなAPIが既にある場合、jsonに変換することなく簡単に使えますね。 jQueryのDOM操作の簡単さによってこれだけ短縮できているところが何とも凄いです。
prettyLoaderStéphane Caron – No Margin For Errors
prettyLoader is a small (less than 4kb uncompressed) jQuery plugin that aim at making your life easier regarding ajax loader display. You know, when you do an ajax call and you never quite know where to position your loader. prettyLoader takes care of that for you, by default, prettyLoader will “hook” to the jQuery ajax function and display a nice spinning circle next to the mouse cursor and hide
26 Useful jQuery Navigation Menu Tutorials - DesignM.ag
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
認証がかかっています
https://chriswanstrath.com/facebox/