[B! javascript] extra_numberのブックマーク

extra_number id:extra_number

javascriptに関するextra_numberのブックマーク (162)

JavaScriptのジェネレータ関数とイテレータの仕組みをGIFアニメで解説
💡🎁 JavaScript Visualized: Generators and Iterators by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ES6ではジェネレータ関数と呼ばれるクールなものが導入されました🎉 ジェネレータ関数について尋ねると多くの人は、「知っているけど、混乱して二度と見ていない」「ブログで読んでみたけど、よく分からない」「分かるけど、みんななんで使ってるの」🤔 私も昔は同じように思っていました。しかし！実はかなりクールです！！ジェネレータ関数とは何でしょうか？まずは、通常の昔ながらの関数を見てましょう👵🏼 昔ながらの関数これについては何も特別なことはありません。ごく普通の関数で、値を4回ログに記録するだけの関数です。では、実行してみましょう！「通常の
extra_number 2020/07/03
“ジェネレータ関数”

JavaScript
リンク
JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説
Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです︵私はそう思います︶が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理
extra_number 2020/01/28
javascript
リンク
パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
extra_number 2019/07/31
パララックス

スクロール

ライブラリ

javascript
リンク
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
extra_number 2019/01/22
javascript

スマートフォン

devicemotion
リンク
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
extra_number 2019/01/17
javascript

svg

アニメーション

*ライブラリ
リンク
ScrollHint
ScrollHint A JavaScript library to suggest that the elements are scrollable horizontally, with the pointer icon. Download GitHub Quick start Using CDN You can easily start by using CDN. Add the following description in the <head> tag of the web page you want to use ScrollHint. <link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css"> <script src="https://unpkg.com/scr
extra_number 2018/12/07
javascript

スクロール
リンク
Made by Evan
Figma (2012-2021) I'm one of the cofounders of Figma, a collaborative browser-based interface design tool. My main contributions were to the rendering engine, the multiplayer collboration service, the vector and text editors, and the plugin system. Read more... esbuild (2020-present) My biggest open source project is esbuild, a very fast JavaScript and CSS bundler. It's main purpose is to bring ab
extra_number 2015/09/02
webgl

javascript
リンク
three.js - JavaScript 3D library
three.js r161 docs examples Learn documentation examples editor gpt Community questions discord forum twitter Code github download Resources Three.js Fundamentals Three.js Journey Learn Three.js 初めてのThree.js Merch T-Shirts submit project
extra_number 2015/09/02
javascript

3d

threejs
リンク
スクロールに応じて画像を遅延読込させるLazy Loadプラグイン
本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回はWebページのスクロールに応じて画像を遅延読込させるLazy Loadプラグインを用いて、多数の画像を含むWebページで効率よく画像を読み込む方法を紹介します。はじめに一般に画像を含むWebページをWebブラウザで表示する場合、画像が表示されるかどうかに関わらず、すべての画像がWebサーバーからダウンロードされます。そのため、縦に長いWebページに多数の画像が配置されている場合、スクロールしなければ表示されない多くの画像を読み込むために多くのロード時間を費やすことになります。この事象は特に、端末の処理能力が相対的に低く、ネットワーク状況も不安定になりがちなスマートフォンにおいて、より深刻な問題です。そこで本記事では、Lazy Loadプラグインを用いて画
extra_number 2015/08/18
javascript

高速化
リンク
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成‥2014/04/7 更新‥2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、﹁企業サイトで見たことある！﹂というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。エンジニア速報は Twitter の@commteで配信しています。もくじスライドショー1．カルーセル︵横︶2．フェードアウト3．画像と文字をスライド4．文字が遅れて移動する効果5．異なるタイミングを設定できるナビゲーション・メニュー6．多階層ドロップダウンメニュー7．多階層効果つき8．スマホではドロップダウン9．スマホではセレクトメニューに10．Amazon風メガドロップダウンメニュー11．横スライド1
extra_number 2015/06/16
javascript

jquery
リンク
JADE LANGUAGE Node Template Engine
!!! 5 html(lang="en") head title= pageTitle(car insurance montana) :javascript | if (foo) { | bar() | } body h1 Jade - node template engine #container - if (youAreUsingJade) You are amazing - else Get on it! Get on it! Get on it! Get on it! <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> //<![CDATA[ if (foo) { bar() } //]]> </script> </head> <body> <h1>J
extra_number 2015/04/22
javascript

jade

node.js
リンク
MixItUp,suffle.js｜ソート、フィルタリングを行うjQueryプラグイン | wald-grun
画面内の要素を画面遷移無しでソートやフィルタリングするjQueryプラグインを試してみましたので、忘れないうちに自分用メモです。 MixItUp まずはMixItUpというプラグインから。 MixItUp 上記URLに飛ぶとわりとこってりしたデモがありまして、リアルタイムで様々なエフェクトを試すことができます。とりあえず簡易な機能のみで実装してみました。簡易にしたデモ記述は以下のとおりです。 <script src="//ajax.google apis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.mixitup.min.js"></script> <script> $(function(){ $('#Grid').mixitup(); }); </script> <!-- FILT
extra_number 2015/03/31
sort

plugin

javascript
リンク
Sortable. No jQuery.
// Simple list var list = document.getElementById("my-ui-list"); Sorta ble.create(list); // That's all. // Grouping var foo = document.getElementById("foo"); Sorta ble.create(foo, { group: "omega" }); var bar = document.getElementById("bar"); Sorta ble.create(bar, { group: "omega" }); // Or var container = document.getElementById("multi"); var sort = Sorta ble.create(container, { animation: 150, // ms
extra_number 2015/03/31
javascript

sorting

plugin

library

drag

js
リンク
js STUDIO | JavaScript、jQuery日本語リファレンス
AngularJS 1.2 ngモジュールディレクティブフィルターサービス型グローバルAPI ngMockモジュールサービスグローバルAPI AUTOモジュールサービス ngAnimateモジュールサービス ngCookiesモジュールサービス ngMockE2Eモジュールサービス ngResourceモジュールサービス ngRouteモジュールサービスディレクティブ ngSanitizeモジュールフィルターサービス ngTouchモジュールディレクティブサービスこのサイトについてリファレンスの翻訳を中心に、JavaScriptに関する情報を取り扱うサイトです。現在、公開しているJavaScript関連の情報です。 JavaScript Mozilla Developer Networkの内容を翻訳して公開しています。 jQuery jQuery
extra_number 2015/02/24
javascript

開発
リンク
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
extra_number 2014/03/04
iphone

javascript
リンク
io.js - JavaScript I/O
Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts. Download Node.js (LTS)Download Node.js (LTS)Downloads Node.js v20.15.11 with long-term support. Node.js can also be installed via package managers.Want new features sooner? Get Node.js v22.5.11 instead. // server.mjs
extra_number 2014/01/27
javascript

node.js
リンク
Grunt: The JavaScript Task Runner
Why use a task runner?In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort. Why use Grunt?The Grunt ecosystem is huge and it's growin
extra_number 2014/01/27
javascript

開発

コーディング
リンク
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」 | Web活メモ帳
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン﹁jQuery HTML5 Uploader﹂が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。使い方使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j
extra_number 2013/12/26
jquery

javascript

ライブラリ
リンク
ドラッグ＆ドロップしよう！(1/5):JavaScriptによるHTML5プログラミング入門 - libro
HTML5では、ドラッグ＆ドロップが簡単に実装できるようになりました。これを使ってみましょう。まずは、ドラッグからです。ドラッグ可能かどうかを示すために、HTMLのタグには新たに﹁draggable﹂という属性が追加となりました。これは真偽値で設定されるもので、これを﹁true﹂にするだけで、その要素はドラッグ可能となります。下に簡単なサンプルをあげておきます。ここでは、2つの<div>タグを用意してあります。実際にマウスで動かしてみてください。上の赤い<div>はドラッグできますが、下の緑の<div>はドラッグできないことが分かります。まったく何のスクリプトも書くことなく、ドラッグが実現できることがわかるでしょう。ただし、やってみればわかりますが、ドラッグしてもこれを動かしたりすることはできません。ただ、半透明なゴーストをドラッグするだけです。ドラッグしてリアルタイムに要素の位置を
extra_number 2013/07/12
javascript
リンク
JavaScript ランダム関数 Math.random() まとめ + css3
おみくじ前回同様、おみくじを作ります。 0〜3の場合、﹁凶﹂、4、5の場合﹁中吉﹂、6〜9の場合﹁大吉﹂にします。 HTML <div class="randomArea"> <h5>乱数表示</h5> <p class="txt" id="randomTxt004"></p> <h6>今日の運勢</h5> <p class="unseiTxt" id="uranaiTxt"></p> <p class="startBtn" id="startBtn004"><a href="#">start</a></p> </div> HTMLを少し付け加えます。あとはActionScriptとほぼ同じです。 function random004(){ ransu = Math.floor(Math.random()*10); $('randomTxt004').innerHTML = ransu;
extra_number 2013/07/09
javascript
リンク
1 2 3 4 5 6 7 8 9 次のページ