particles.jsを使ã£ã¦ç°¡å˜ã«å¹¾ä½•å¦çš„ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’作る | æ ªå¼ä¼šç¤¾LIG(リグ)｜DX支æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ 開発・Web制作
ã¯ã˜ã‚ã¾ã—ã¦ï¼ã€€8月ã«LIGã«å…¥ç¤¾ã—ã¾ã—ãŸãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®ã‚†ãŸã‚ã§ã™ã€‚ 今後ã¨ã‚‚よã‚ã—ããŠé¡˜ã„ã—ã¾ã™ã€‚ ã•ã¦ã•ã¦ã€ä»Šå›žã¯ç°¡å˜ã«å¹¾ä½•å¦æ¨¡æ§˜ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒä½œã‚Œã‚‹particles.jsã«ã¤ã„ã¦ç´¹ä»‹ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ particles.jsを使ã£ã¦ã¿ã‚ˆã† ã¾ãšä¸‹è¨˜ã‚ˆã‚Šãƒ—ラグインをダウンãƒãƒ¼ãƒ‰ã—ã¦ãã ã•ã„。 ダウンãƒãƒ¼ãƒ‰ã—ãŸzipファイルを解å‡ã—ã¦ã€ä¸ã‹ã‚‰particles.jsã¾ãŸã¯particles.min.jsã‚’å–り出ã—ã¾ã™ã€‚ http://vincentgarreau.com/particles.js/ 次ã«ä¸‹è¨˜ã®ã‚½ãƒ¼ã‚¹ã‚’コピペã—ã¦ã€åˆ¥ãƒ•ã‚¡ã‚¤ãƒ«ã®JSã¨ã—ã¦ä¿å˜ã—ã¦ãã ã•ã„。 （当記事ã§ã¯setting.jsã¨ã—ã¾ã™ã€‚） particlesJS('hoge',{ "particles":{ //--シェイプã®è¨å®š---------- "number":{ "value":80
覚醒!JavaScript
7月19æ—¥ã«è¡Œã£ãŸã€Œè¦šé†’ï¼JavaScriptã€å‹‰å¼·ä¼šã§ä½¿ç”¨ã—ãŸã‚¹ãƒ©ã‚¤ãƒ‰ã§ã™ã€‚ http://connpass.com/event/7082/Read less
ã¯ã˜ã‚ã¦ã®JavaScript / JS Girls Tokyo #1
JS Girls Tokyo #1ã§ã€JavaScriptåˆå¿ƒè€…å‘ã‘ã®å‹‰å¼·æ–¹æ³•ã«ã¤ã„ã¦è©±ã—ã¾ã—ãŸã€‚ ç§è‡ªèº«ã€HTML/CSSã¯ã§ãã¦ã‚‚JavaScriptãŒå¤§ã®è‹¦æ‰‹ã§ã—ãŸãŒã€@hokaccha 先生ã«ã‚ˆã‚‹ä¿®è¡Œã«ã‚ˆã£ã¦ã€ãªã‚“ã¨ã‹ç†è§£ã§ãるよã†ã«ãªã‚Šã¾ã—ãŸã€‚ ãã®ä¿®æ¥ã®ä¸ã§ã€ä½•ã‚’ã©ã†ã‚„ã£ã¦å‹‰â€¦
[JS]日本語ã®ã©ã‚“ãªWebフォントã§ã‚‚美ã—ãカーニングã§ãるスクリプト -jQuery.Kerning.js
ウェブページã§æ—¥æœ¬èªžã®Webフォントを使用ã™ã‚‹æ™‚ã«ã‚«ãƒ¼ãƒ‹ãƒ³ã‚°ã‚’é©ç”¨ã—ã¦ã€èªã¿ã‚„ã™ãã¦ç¾Žã—ã表示ã™ã‚‹jQueryã®ãƒ—ラグインを紹介ã—ã¾ã™ã€‚ 全角ã®æ‹¬å¼§ã‚„å¥èªç‚¹ãªã©ã®ç´„物ã¯ã€æ—¥æœ¬èªžã®ã©ã‚“ãªãƒ•ã‚©ãƒ³ãƒˆã§ã‚‚スクリプトã®ã¿ã§ç¾Žã—ãカーニングã§ãã¾ã™ã€‚ ※文å—é–“ã®ã‚«ãƒ¼ãƒ‹ãƒ³ã‚°ã¯ã€ãƒ•ã‚©ãƒ³ãƒˆã”ã¨ã«è¨å®šãŒå¿…è¦ã§ã™ã€‚ jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsã®ãƒ‡ãƒ¢ jQuery.Kerning.jsã®ä½¿ã„æ–¹ jQuery.Kerning.jsã®ãƒ‡ãƒ¢ デモã§ã¯ä¸Šï¼šã‚«ãƒ¼ãƒ‹ãƒ³ã‚°ç„¡ã—ã€ä¸‹ï¼šã‚«ãƒ¼ãƒ‹ãƒ³ã‚°æœ‰ã‚Šã®çŠ¶æ…‹ã§ã€æ˜Žæœã¨ã‚´ã‚·ãƒƒã‚¯ã®2書体ãŒãƒã‚§ãƒƒã‚¯ã§ãã¾ã™ã€‚ é©ç”¨ã•ã‚Œã¦ã„ã‚‹æ–¹ãŒã€èªã¿ã‚„ã™ã„ã§ã™ã。 ゴシック体ã®ãƒ‡ãƒ¢ã€ä¸Šï¼šã‚«ãƒ¼ãƒ‹ãƒ³ã‚°ç„¡ã—ã€ä¸‹ï¼šã‚«ãƒ¼ãƒ‹ãƒ³ã‚°æœ‰ã‚Š jQuery.Kerning.jsã®ä½¿ã„æ–¹ Step 1: 外部ファイル jquery.j
TEST CORDING » Sassã®@functionã®ä½¿ã„æ–¹ã¾ã¨ã‚ – プãƒã‚°ãƒ©ãƒžãƒ–ルãªå‡¦ç†ã¯@function
[JS]ボタンã®ã‚¯ãƒªãƒƒã‚¯æ™‚ã«ã¡ã‚‡ã£ã¨éŸ³ã‚’ã¤ã‘ãŸã„時ã«ã€ã‚¤ãƒ™ãƒ³ãƒˆã«ã‚µã‚¦ãƒ³ãƒ‰ã‚’割り当ã¦ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -Ion.Sound
ボタンをクリックã—ãŸæ™‚ã«è»½å¿«ãªéŸ³ã‚’ã¤ã‘ã‚‹ãªã©ã€ãƒšãƒ¼ã‚¸ä¸Šã®ã•ã¾ã–ã¾ãªã‚¤ãƒ™ãƒ³ãƒˆã«ã‚µã‚¦ãƒ³ãƒ‰ã‚’割り当ã¦ã‚‹ã“ã¨ãŒã§ãã‚‹jQueryã®ãƒ—ラグインを紹介ã—ã¾ã™ã€‚ Ion.Sound Ion.Soundã®ãƒ‡ãƒ¢ Ion.Soundã®ä½¿ã„æ–¹ Ion.Soundã®ãƒ‡ãƒ¢ デモã¯ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã¯Chrome, Firefox, Opera, Safari, IE9+ã€ã‚¹ãƒžãƒ•ã‚©ã®å„ブラウザã«ã‚‚対応ã—ã¦ã„ã¾ã™ã€‚ デモã§ã¯ã‚らã‹ã˜ã‚ダウンãƒãƒ¼ãƒ‰ãƒ•ã‚¡ã‚¤ãƒ«ã«å«ã¾ã‚Œã¦ã„ã‚‹15ã®ã‚µã‚¦ãƒ³ãƒ‰ã‚’ボタンクリックã§æ¥½ã—ã‚€ã“ã¨ãŒã§ãã¾ã™ã€‚ デモ（14/15）ã®ã‚ャプãƒãƒ£ Ion.Soundã®ä½¿ã„æ–¹ Step 1: 外部ファイル </body>ã®ä¸Šã‚ãŸã‚Šã«jquery.jsã¨å½“スクリプトを外部ファイルã¨ã—ã¦è¨˜è¿°ã—ã¾ã™ã€‚ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jque
Bootstrapã«ä¾¿åˆ©ãªæ©Ÿèƒ½ã‚’è¿½åŠ ã§ãã‚‹jQueryプラグインã¾ã¨ã‚
Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
favico.js
favico.js v0.3.10 Make use of your favicon with badges, images or videos View on GitHub Try it: +1 -1 Set icon Play video Start webcam Reset Works on Chrome, Firefox, Opera and IE11+ Badges Animate your favicon with animated badges. You can customize type of animation, position, background color and text color.
デãƒã‚¤ã‚¹ã‚’判定ã—ã€CSS/JavaScriptã§ç°¡å˜ã«åˆ©ç”¨ã§ãるよã†ã«ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -Device.js | コリス
ページã«ã»ã‚“ã®ä¸€è¡Œå¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ«ã‚’åŠ ãˆã‚‹ã ã‘ã§ã€iPhone, iPadãªã©ã®iOSã‚’ã¯ã˜ã‚ã€Android, Blackberry, Windows Phone, Window Tabletãªã©ã‚¹ãƒžãƒ•ã‚©ã‚„タブレットã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ãªã©ã®ãƒ‡ãƒã‚¤ã‚¹ã‚’判定ã—ã€ç°¡å˜ã«æ¡ä»¶ä»˜ãã®CSSã‚„JavaScriptを利用ã§ãã‚‹ã«ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—トを紹介ã—ã¾ã™ã€‚ Device.js -GitHub Device.jsã®ä½¿ã„æ–¹ Device.jsã®ãƒ‡ãƒ¢ Device.jsã®ä½¿ã„æ–¹ Device.jsã®å®Ÿè£…ã¯ã€ç°¡å˜ã§ã™ã€‚ 外部ファイルã¨ã—ã¦ã€å½“スクリプトを記述ã™ã‚‹ã ã‘ã§ã™ã€‚ <script src="device.js"></script> スクリプトをè¨ç½®ã™ã‚‹ã¨ã€è¡¨ç¤ºãƒ‡ãƒã‚¤ã‚¹ã«åŸºã¥ã„ã¦<html>ã«é©åˆ‡ãªclassを付与ã—ã¾ã™ã€‚ iPhoneã§ã‚¢ã‚¯ã‚»ã‚¹ã™ã‚‹ã¨ã€ã“ã‚“ãªæ„Ÿã˜ã«ã€‚ <html class="ios ipho
[JS]ページ内アンカーをidã ã‘ã§ãªãclassã‚„è¦ç´ ã«ã‚‚指定ã§ãるスクリプト -Arbitrary anchors
通常ã®ãƒãƒƒã‚·ãƒ¥ãƒªãƒ³ã‚¯ã¨é•ã„ã€#ã®ã™ã後ã«ã€Œ.ã€ãŒã‚ã‚Šã¾ã™ã€‚ã“ã‚Œã¯ã€ãã®classã‚’ã‚‚ã£ãŸæœ€åˆã®è¦ç´ ã«ãƒªãƒ³ã‚¯ã—ã¦ã„ã¾ã™ã€‚ ã¾ãŸã€å³ç«¯ã®ã€Œ#.hello｜5000ã€ã¯ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã®é€Ÿåº¦ã‚’è¨å®šã—ã¦ã„ã¾ã™ã€‚ リンクã®ãƒ‘ターンã¯ã•ã¾ã–ã¾ãªã‚‚ã®ãŒã‚ã‚Šã€å„所ã«åˆ©ç”¨ã•ã‚Œã¦ã„ã¾ã™ã€‚ Arbitrary anchorsã®ä½¿ã„æ–¹ 実装ã¯ç°¡å˜ã§ã€classã®ãƒªãƒ³ã‚¯ã‚„スピード調整ã ã‘ã§ãªãã€é€šå¸¸ã®ãƒãƒƒã‚·ãƒ¥ãƒªãƒ³ã‚¯ã§ã‚‚アニメーションã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã•ã›ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ Step 1: 外部ファイル head内ã«ã€jquery.jsã¨å½“スクリプトを外部ファイルã¨ã—ã¦è¨˜è¿°ã—ã¾ã™ã€‚ <head> ... <script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript
ã€JavaScript】 iPhone ã§ã€ã‚¦ã‚§ãƒ–ã‹ã‚‰GPSä½ç½®æƒ…å ±ã‚’æ‰±ã£ã¦ã¿ã‚‹
ASCII.jp ã®è¨˜äº‹ã€ŽiPhoneã®GPSã‚’JavaScriptã§æ“ã‚ã†ã€ã‚’å‚考ã«ã€iPhoneã®Safariã§GPS(ä½ç½®æƒ…å ±ã‚µãƒ¼ãƒ“ã‚¹)æƒ…å ±ã‚’å–å¾—ã—ã¦ã¿ãŸã€‚ ä½ç½®æƒ…å ±ã‚’æ‰±ã† navigator.geolocation GPSã®ä½ç½®æƒ…å ±ã‚’æ‰±ã†APIã¯ã€navigator.geolocation ã¨ã„ã†ã‚ªãƒ–ジェクトã«ã¾ã¨ã‚られã¦ã„る。 Geolocation API ã¯ã€W3Cã«ã‚ˆã‚‹æ¨™æº–仕様ãªã‚ˆã†ã 。W3Cã®ä»•æ§˜æ›¸ Geolocation API Specification(英語) をよãèªã‚€ã¨ã€è©³ã—ã„ã“ã¨ãŒã‚ã‹ã‚Šãã†ã€‚("Candidate"ã ã‹ã‚‰ã€å‹§å‘Šå€™è£œæ®µéšŽãªã®ã‹ãªï¼Ÿ) å–å¾—ã®ä»•æ–¹ã¯2通り å˜ç™ºã§ä¸€å›žã ã‘å–å¾—ã™ã‚‹æ–¹æ³•ã¨ã€å®šæœŸçš„ã«æ›´æ–°ã—続ã‘る方法ãŒã‚るよã†ã 。 å˜ç™ºã§ä¸€å›žã ã‘å–å¾—ã™ã‚‹ getCurrentPosition() <script type="text/javascript
CSS3 ã§ãµã‚ãµã‚ナビゲーション - 一角ç£ã¯å¤œã«å•¼ã
『超次元ゲイムãƒãƒ—テューヌmk2〠ã®å…¬å¼ã‚µã‚¤ãƒˆ を見ã¦ãŸã‚‰ã€ãƒŠãƒ“ゲーションリンクãŒãµã‚ãµã‚ã—ã¦ã¦ãŠã—ゃれãªæ„Ÿã˜ã ã£ãŸã®ã§ã€ä¼¼ãŸã‚ˆã†ãªå‹•ãã‚’ã™ã‚‹ã‚‚ã®ã‚’ CSS3 ã§å®Ÿè£…ã—ã¦ã¿ãŸã€‚ (元㯠Flash ã½ã„。) ↑ ã“ã‚“ãªã® デモ 実際ã®ã‚³ãƒ¼ãƒ‰ JSFiddle ã«ã‚ã‚‹ã®ã§èˆˆå‘³ãŒã‚ã‚Œã°ã©ã†ãžã€‚ ãµã‚ãµã‚ナビゲーション - jsFiddle 使ã£ã¦ã‚‹ã‚‚㮠以下ã®ã‚ˆã†ãª CSS ã®æ©Ÿèƒ½ã‚’使ã£ã¦ã¿ãŸã€‚ CSS Animations : CSS Animations CSS アニメーション - Web developer guide | MDN CSS Transitions : CSS Transitions transition - CSS | MDN CSS Transforms Level 1 *1 : CSS Transforms transform - CSS | MDN メモ ãµã‚ãµ
IE8 ã§æ“¬ä¼¼è¦ç´ ã®ã‚¹ã‚¿ã‚¤ãƒ«ã®å‹•çš„ãªæ›´æ–°ãŒã§ããªã„
JavaScript ã§è¦ç´ ã®ã‚¯ãƒ©ã‚¹å±žæ€§ã‚’æ“作ã—ã¦ã‚¹ã‚¿ã‚¤ãƒ«ã‚’変更ã™ã‚‹ã‚ˆã†ãªå ´åˆã€IE8 ã«ã¯ :before/:after 擬似è¦ç´ ã®ã‚¹ã‚¿ã‚¤ãƒ«ãŒå†æç”»ã•ã‚Œãªã„ã¨ã„ã†ãƒã‚°ãŒã‚る。 <p> <a href="#" class="selected">One</a> <a href="#">Two</a> <a href="#">Three</a> <a href="#">Four</a> </p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $('p').each(function () { var $links = $(this).find('a'), i = $links.filter('.selected').eq(0).index(), len =
グリッドレイアウトを実装ã§ãã‚‹jQueryプラグインç·ã¾ã¨ã‚
パãƒãƒ«ã‚’タイル状ã«æ•·ãè©°ã‚るプラグイン / Masonry / Grid-A-Liciousä»–...å…¨10件
ã€jQuery】è¦ç´ ãŒè¦‹ãˆãŸã‚¿ã‚¤ãƒŸãƒ³ã‚°ã§ã‚¤ãƒ™ãƒ³ãƒˆã‚’発生ã•ã›ã‚‹jQueryプラグイン | ãƒã‚·ãƒ£ãƒã‚°ã€‚
ã¯ã˜ã‚ã¾ã—ã¦ã€ä»Šæœˆã‚ˆã‚Šãƒã‚·ãƒ£ãƒã‚°ã®ãƒ¡ãƒ³ãƒãƒ¼ã«ãªã£ãŸfukasawaã¨ç”³ã—ã¾ã™ã€‚ ã¾ã ã¾ã 勉強ä¸ã§è‡³ã‚‰ã¬ç‚¹ã‚‚多々ã‚ã‚‹ã¨ã¯å˜ã˜ã¾ã™ãŒã€ç”Ÿæ¸©ã見守ã£ã¦ã„ãŸã ã‘ã‚‹ã¨å¹¸ã„ã§ã™ã€‚ 本題ã§ã™ã€‚社内ã§è¡Œã‚ã‚Œã¦ã„ã‚‹jQuery勉強会ã®ãƒã‚¿æŽ¢ã—ã®ãŸã‚ã«Web Designingã®jQuery Lab.ã‚’èªã‚“ã§ã„ãŸã®ã§ã™ãŒã€è¨˜äº‹ã®ä¸ã§inviewã¨ã„ã†jQueryプラグインãŒä½¿ã‚ã‚Œã¦ã„ã¾ã—ãŸã€‚ 記事ã§ã¯ã€Œã‚°ãƒ©ãƒ•ã‚’æç”»ã™ã‚‹é ˜åŸŸãŒãƒ–ラウザã®è¡¨ç¤ºé ˜åŸŸå†…ã«å…¥ã£ãŸã‚¿ã‚¤ãƒŸãƒ³ã‚°ã§ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’実行ã—グラフをæç”»ã™ã‚‹ã€ã¨ã„ã†å‹•ä½œã‚’è¡Œã†ãŸã‚ã«ã“ã®ãƒ—ラグインãŒä½¿ã‚ã‚Œã¦ã„ã‚‹ã®ã§ã™ãŒã€inviewを使ã†ã“ã¨ã§ã€ã“ã®ã‚ˆã†ã«ã€Œãƒ–ラウザ上ã§è¦‹ãˆãŸã¨ãã«å‡¦ç†ã‚’実行ã™ã‚‹ã€ã¨ã„ã†å‹•ä½œã‚’実ç¾ã§ãるよã†ã§ã™ã€‚ jquery.inview æ°—ã«ãªã£ãŸã®ã§ä½¿ã„方を調ã¹ã¦ã¿ã¾ã—ãŸã€‚ ç°¡å˜ãªä½¿ã„æ–¹ 1. jQueryã¨jquery.inview.jsã‚’èª
CSS 㨠jQuery ã§ä½œã‚‹ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã«ã‚ã‚ã›ã¦å›žè»¢ã™ã‚‹ãƒã‚´
Tumblr ã®ã‚¹ã‚¿ãƒƒãƒ• Blog を見ã¦ãŸã‚‰ã€ãƒã‚´ （æ£ç¢ºã«ã¯ãƒã‚´ã®å‘¨å›²ã®éƒ¨åˆ†ï¼‰ ãŒã‚¹ã‚¯ãƒãƒ¼ãƒ«ã«ã‚ã‚ã›ã¦å›žè»¢ã—ã¦ã¦ã€ã¡ã‚‡ã£ã¨é¢ç™½ã‹ã£ãŸã®ã§ã‚µãƒ³ãƒ—ルを使ã£ã¦å®Ÿéš›ã«ã©ã†ã„ã†é¢¨ã«å®Ÿè£…ã•ã‚Œã¦ã„ã‚‹ã‹ã‚’解説ã—ã¦ã¿ã‚ˆã†ã¨æ€ã„ã¾ã™ã€‚ çµæ§‹ä»•çµ„ã¿ã¯ç°¡å˜ã§ã€jQuery ã® scrollTop() を使ã£ã¦ã‚¹ã‚¯ãƒãƒ¼ãƒ«ä½ç½®ã‚’å–å¾—ã—ã€ãã®å€¤ã‚’ CSS ã® transform プãƒãƒ‘ティã«éƒ½åº¦çªã£è¾¼ã‚“ã§ã„ãã£ã¦ã„ã†æ„Ÿã˜ã€‚ソースコード自体ã¯æ•°è¡Œã§å®Ÿè£…ã§ãã¾ã™ã€‚ ã¾ãšã¯å®Ÿéš›ã«å‹•ä½œã™ã‚‹ã‚µãƒ³ãƒ—ルを下記ã«ã€‚ スクãƒãƒ¼ãƒ«ã«ã‚ã‚ã›ã¦ CSS ã§å›žè»¢ã™ã‚‹ãƒã‚´ã®ã‚µãƒ³ãƒ—ル ç”»é¢ã‚’スクãƒãƒ¼ãƒ«ã™ã‚‹ã¨ã€ãƒã‚´ãŒå›žè»¢ã™ã‚‹ã¨æ€ã„ã¾ã™ã€‚ã‚ã‹ã‚Šã‚„ã™ã„よã†ã«ãƒã‚´ã¯ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã«å¯¾ã—ã¦ä½ç½®å›ºå®šã—ã¦ã„ã¾ã™ã€‚ãƒã‚´ã®å†…容ã¯å€‹äººçš„趣味ã«ã‚ˆã‚‹ã‚‚ã®ã§ã™ã®ã§æ·±ã„æ„味ã¯ã‚ã‚Šã¾ã›ã‚“... ã‚ã‹ã‚‹äººã«ã¯ã‚ã‹ã‚‹ã¨æ€ã†ã€‚ ãªãŠã€ã‚µãƒ³ãƒ—ル㯠transform プãƒãƒ‘ティを使用ã—
ã€jQuery】IE8以下ã§é€éŽPNGã®opacityアニメーションãŒé»’ã汚れるã®ã‚’回é¿ã™ã‚‹ | ãƒã‚·ãƒ£ãƒã‚°ã€‚
ãã†ã‚ã‚“ã¨æ°´å‡ºã—ã®ãŠèŒ¶ãŒã‚ã‚Œã°ç”Ÿãã¦ã„ã‘ã‚‹æ°—ãŒã—ã¦ããŸhakoishiã§ã™ã€‚ ã•ã¦ã€ä»Šå›žã¯jQueryã§é€éŽPNGã®opacityアニメーションãŒãƒã‚°ã‚‹ã®ã‚’回é¿ã™ã‚‹æ–¹æ³•ã§ã™ã€‚ é€éŽç”»åƒã‚’アニメーションã•ã›ãŸæ™‚ã€IE8以下ã§ãƒ•ãƒãŒé»’ããªã£ã¦å›°ã£ãŸçµŒé¨“ã‚’ãŠæŒã¡ã®æ–¹ã€ã„らã£ã—ゃるã®ã§ã¯ãªã„ã§ã—ょã†ã‹ï¼Ÿ 発ç¾æ¡ä»¶ 発ç¾ã™ã‚‹æ¡ä»¶ã¯ã€ã“ã®4点ã§ã™ã€‚ ç”»åƒã¯é€éŽpng。 ç”»åƒè‡ªä½“ã«opacityアニメーションをè¨å®šã—ã¦ã„る。 ç”»åƒã«ãƒ•ã‚£ãƒ«ã‚¿ãƒ¼ï¼ˆAlphaImageLoader）をã‹ã‘ã¦ã„る。 ブラウザã¯IE8以下。 回é¿ã™ã‚‹ãŸã‚ã®ãƒã‚¤ãƒ³ãƒˆ 回é¿ã™ã‚‹ãŸã‚ã®ãƒã‚¤ãƒ³ãƒˆã¯ã“ã®2点。 ç”»åƒã«ãƒ•ã‚£ãƒ«ã‚¿ãƒ¼(AlphaImageLoader)ã‚’ã‹ã‘る。 アニメーションã®å¯¾è±¡ã‚’ã€ãã®ç”»åƒã‚’包括ã™ã‚‹è¦ç´ ã«ã™ã‚‹ã€‚ 移動やサイズ変更もã—ãŸã„å ´åˆã€åŒ…括è¦ç´ ã‚‚ç”»åƒã¨åŒã˜ã‚µã‚¤ã‚ºã«ã—ã¦ãŠãã¨æ‰±ã„易ã„ã¨æ€ã„ã¾ã™ã€‚ サンプルを作りã¾ã—ãŸã®
jqueryå°æŠ€ã¾ã¨ã‚３２
作æˆï¼š2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作ã—ãŸã¨ãã«ã€å‹•ãã®ã‚るサイトã«ã—ãªã„ã¨ã„ã‘ãªã‹ã£ãŸã®ã§ã€è‰²ã€…調ã¹ã¦çµ„ã¿è¾¼ã‚“ã§ã¿ãŸã‚“ã§ã™ãŒã€jQueryã§ã‚‚ã†ä½•ã§ã‚‚出æ¥ã¡ã‚ƒã„ã¾ã™ã。近ã„å°†æ¥ãƒãƒ¼ã‚«ãƒ«ã§ç”»åƒãªã‚“ã‹ã‚’編集ã—ãªãã¦ã‚‚ã€ãƒ–ラウザã ã‘ã§è‰²ã€…ã§ãるよã†ã«ãªã‚‹ã‚“ã˜ã‚ƒãªã„ã§ã—ょã†ã‹ã€‚今回ã¯å®šç•ªã‹ã‚‰ã¡ã‚‡ã£ã¨ãƒžã‚¤ãƒŠãƒ¼ï¼ˆGoogle Analytics関係ã¨ã‹ï¼‰ãªã‚‚ã®ã¾ã§jQueryã®å°æŠ€ã€ãƒ—ラグインを集ã‚ã•ã›ã¦ã„ãŸã ãã¾ã—ãŸã€‚ ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢é€Ÿå ±ã¯ Twitter ã®@commteã§é…ä¿¡ã—ã¦ã„ã¾ã™ã€‚ ã‚‚ã㘠スクãƒãƒ¼ãƒ« １．ページ内リンクï¼ãƒ•ãƒƒã‚¿ãƒ¼ã¾ã‚ã‚Šï¼ãƒˆãƒƒãƒ—ã«æˆ»ã‚‹ ２．パララックス スライド ３．カルーセル ４．レスãƒãƒ³ã‚·ãƒ–ãªã‚¹ãƒ©ã‚¤ãƒ€ãƒ¼ ５．ヌルヌルサクサクãªã‚¹ãƒ©ã‚¤ãƒ‰ãƒ¡ãƒ‹ãƒ¥ãƒ¼ ６．サムãƒã‚¤ãƒ«ä»˜ãクãƒã‚¹ãƒ•ã‚§ãƒ¼ãƒ‰ã‚¹ãƒ©ã‚¤ãƒ‰ã‚·ãƒ§ãƒ¼ 補助 ７．Google Ana
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
particles.js demo
å¤©æ°—äºˆå ±(web)アプリを作ã£ã¦ã¿ãŸ
{{#tags}}- {{label}}
{{/tags}}