第3回 トップページを彩るスライドショーのポイント | gihyo.jp
その他、speedやtimeout、pause（0：マウスオーバ時にスライドをストップしない、1：マウスオーバ時にスライドをストップする）などで細かく動きを指定することもできます。 そのほかにも指定可能なオプションはたくさんあり、「jQuery Cycle Plugin - Option Reference」で確認することができます。 スライドのコンテンツとナビゲーションを指定する 次に、bodyタグ内のXHTMLソースを見ていきます。 XHTMLソース（bodyタグ内） <div id="slider"> <div id="slideshow"> <div class="slider-item"> <div class="text_item"> <h2>Wonderful elephants<br /> living abroad.</h2> <p>フェードイン&アウトするシン
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
[JS]複数のパネルをアニメーションでスライドして切り替えるスクリプト -Sliding Tab Menu
サイドバーなどの省スペースにぴったりな、複数のパネルをスムーズなアニメーションでスライドして切り替えるスクリプトをQuenessから紹介します。 jQuery Sliding Tab Menu for Sidebar Tutorial demo デモでは、タブをクリックすると、それに対応したパネルがスライドして表示されます。 各パネルはコンテンツの量に合わせてサイズが調整されます。 タブとパネルはそれぞれdiv要素で実装されており、スライドのアニメーションにはjQueryとjQuery.ScrollToが使用されています。
[JS]パネルがスムーズにスライドするアクセシブルなスクリプト
ニュースなど複数のコンテンツを配置したパネルがスムーズにスライドする、アクセシブルで軽量（3KB）なスクリプト「Accessible News Slider」を紹介します。 Accessible News Slider demo パネルはリスト要素で実装されており、テキストリンクと画像リンクでスムーズにスライドし、「view all」をクリックするとパネルの全内容を表示します。 「view all」でパネルの全内容を表示 また、アクセシビリティにも配慮されており、WCAG 1.0のアクセシビリティの必要条件を満たして実装しているとのことです。 スクリプトやスタイルシートのオフ時は下記の表示になります。
Bootstrapはこう使う
Il documento contiene la struttura di un progetto Bootstrap, inclusi file e directory come gruntfile.js, package.json e vari file .less per la gestione degli stili. Sono presenti directory per risorse statiche come fonts, js e dist. La struttura suggerisce un setup per lo sviluppo web utilizzando strumenti moderni.
シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
新春特別企画・2008年を展望する!：2008年Webデザインに使えるJavaScriptライブラリ｜gihyo.jp … 技術評論社
昨年を振り返ると、いろいろなJavaScriptライブラリが登場しました。デザインで使えるものから、インターフェースを改善するものなど、2008年も活躍しそうなものを紹介したいと思います。 Internet Explorer 6でアルファチャンネルを含むPNGを表示 iepngfix.htc Internet Explorer 7からアルファチャンネルを含むPNG画像の表示が出来るようになりましたが、以前のバージョンでは表示するためにひと手間必要になります。iepngfix.htcを利用すれば、アルファチャンネルを含むPNG画像を利用する際に簡単にIE5.5以降のブラウザで表示させることが可能になります。 IE6でアルファチャンネルを含むPNGを表示 <img>タグ、またはエレメントの背景画像にxxx.png画像が指定されているものに対して、DXImageTransform.Microso
Open sourcing Twitter emoji for everyone
Earlier this year, we collaborated with our friends at @Iconfactory on a set of 872 beautiful emojis so Tweets containing emoji characters would look as sharp on the web as they do in mobile apps. Now we’re pleased to announce that these emoji are available as an open source library to the developer community at large. Since we’ve gotten many requests to use our emoji in various projects, as of to
Datavisualization.ch Selected Tools
GeoCommons A public community and set of tools to access, visualize and analyze data with compelling map visualizations. http://geocommons.com GeoCommons Type: Web Application & API Technology: JavaScript, Ruby License: Various Links Website API Documentation GitHub User Google Fusion Tables A web application that makes it easy to host, manage, collaborate on, visualize, and publish data tables. h
アニメーションで色が少しずつ変化するボタンを作成する三つのチュートリアル | コリス
マウスをフォーカスすると、アニメーションで色が少しずつ変化するボタンを作成するPhotoshopとHTML/CSSとJavaScriptの三つのチュートリアルをSix Revisionsから紹介します。 Create an Animated "Call to Action" Button demo チュートリアルは三部構成で、Photoshop編、HTML/CSS編、JavaScript編となっており、デモページではアニメーション有り版（JavaScript）、無し版（HTML/CSS）があります。 simple demo(アニメーション有り版） simple demo(アニメーション無し版） ボタンはCSSスプライトで実装されており、画像の作成もそれ用になっています。
Object Playground: The Definitive Guide to Object-Oriented JavaScript
Get more pro JavaScript screencasts Visit Let’s Code: Test-Driven JavaScript and start watching today! Transcript (Spanish translation here.) If you hang around the JavaScript world long enough, you’ll come across a bunch of different recipes for object-oriented programming. The standard way, so much as there can be a standard way, is this. And this is the recipe for inheritance. That’s the standa
Janko Jovanovic – Design Management + Coaching
For nearly 30 years, I’ve been navigating the many sides of design and product worlds: building products, leading teams, mentoring people, and shaping strategies. My work now blends Design & Product Leadership, Coaching, and Strategy & Futures to support others in making smart decisions and navigating increasing uncertainty and complexity. Coaching Strategic advising, mentoring, and coaching have
Home - VEGAS STRIP LEGAL REVIEW
Legal Insights on the Vegas Strip: Navigating the Complexities of Law Las Vegas is renowned worldwide as a city of entertainment, excitement, and high stakes. With its dazzling lights, world-class casinos, and endless entertainment options, the Vegas Strip attracts millions of visitors annually. However, behind the allure of this vibrant city lies a unique set of legal challenges. From personal in
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
Web制作で使えた！jQueryプラグインまとめ＋起業しました
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
[JS]テキストや背景のカラーをアニメーションで変更するスクリプト -Color Animations
テキストや背景のカラーをアニメーションで少しずつ変更するスクリプトをDesizn Techから紹介します。 Playing with jQuery Color Plugin and Color Animation demo デモでは、テキストのカラーを変更するもの、背景を変更するもの、それぞれ異なるカラーに変更するものなどがあります。 テキストのカラーを変更する場合は、下記のように指定します。 <textarea name="code" class="html" cols="60" rows="5"> $(".first a").hover(function() { $(this).animate({color: "#00eeff" }, 400); },function() { $(this).animate({color: "#FFFFFF" }, 500); }); </textar
[JS]サイドバーを左右からスライドさせるごくシンプルなスクリプト -Simple Sidebar
サイドバーを左右どちらからでもアニメーションでスライドさせるシンプルなjQueryのプラグインを紹介します。 デモ：Material Design Simple Sidebarの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.simplesidebar.js"></script> </head> Step 2: HTML サイドバーにはid/classを付与し、コンテンツ内にボタンを設置します。 //position-relative if this wrapper has no positi
![[JS]サイドバーを左右からスライドさせるごくシンプルなスクリプト -Simple Sidebar](https://cdn-ak-scissors.b.st-hatena.com/image/square/c459cc2f4db5b1da3c75aa960dd4238b0628cb55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014081901-01.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]Apple風の画像ギャラリー：カバーフロースクリプトの決定版 -ContentFlow
Material UI