[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
CSSのみで挑むWEBテクニック集「30 Pure CSS Alternatives to Javascript」
TOP > WebDesign > CSSのみで挑むWEBテクニック集「30 Pure CSS Alternatives to Javascript」 WEBに動きをつけたり、制御したりとWEB上ではなにかと便利なjavascript。ライブラリやプラグインも充実していて、それを利用した様々なテクニックが公開されていますが、今日紹介するのはjavascriptは一切使わず、CSSのみで、様々な表現に挑戦しているTipsを集めたエントリー「30 Pure CSS Alternatives to Javascript」です。 30 Pure CSS Alternatives to Javascript スライダーやライトボックスをはじめ、javascriptを使って行われているような事をCSSのみで再現しています。全部で30のプロジェクトがまとめられていますが、今日はその中からいくつか
[JS]jQueryを使用して上下左右からパネルをスライドさせるチュートリアル
二枚の画像を上下左右のスライドのアニメーションで変更するチュートリアルを1stwebdesignerから紹介します。 How to Create Sleek Sliding Box Effect With jQuery デモページ 滑らかなスライドのアニメーションはjQueryで実装されており、シンプルなスクリプトを追加するだけです。 基本のスクリプトは下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $('#top-left').hover(function(){ $(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500)
IE6・7・8でCSS3の角丸などを有効にするスクリプト『IE-CSS3.htc』
IE6・7・8でCSS3の角丸などを有効にするスクリプト『IE-CSS3.htc』 2010/04/13 | カテゴリ：Web制作全般 ◆CSS3 support in Internet Explorer 6, 7, and 8 IE6・7・8でもCSS3による角丸など、CSS3の一部項目が有効になるスクリプトが公開されているので紹介します。 IEでのデモ IE8で見たところ、以下のようになります。 CSS CSSは以下のようになっています。 .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet
iTunes風のイメージギャラリーが作れるJavaScriptライブラリー「ContentFlow」
2014年8月20日 JavaScript マウスウィール（トラックパッド）でスクロールすると前後の画像が見れるギャラリー。一目見て「おっ、iTunesだ！」と思いました！JavaScriptとCSSをカスタマイズすればサイトにあった表現の仕方ができます。デフォルトでも充分かっこいいので「JavaScriptはよくわからない..」という人でも簡単に実装できると思います！ ↑私が10年以上利用している会計ソフト！ サンプルを用意したので見てみてください。 See the Pen Photo Gallery – ContentFlow by Mana (@manabox) on CodePen. ダウンロードする ContentFlowのサイトからファイル一式をダウンロードします http://code.google.com/p/contentflow/downloads/list コーディン
[JS]画像をモザイク状に切り替えるスライドショーを実装するチュートリアル
切り替え時のアニメーションにはフェードやスライドのアニメーションがよく使用されていますが、ちょっと変わったタイル状に推移していくエフェクトをもったスライドショーを実装するチュートリアルをTutorialzineから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="mosaic-slideshow"> <div class="arrow left"></div> <div class="arrow right"></div> <div class="mosaic-slide" style="z-index: 10;"> <!-- The mosaic-slide div and the tiles are generated by jQuery --> <div class="tile" style=
商用利用可 軽量・単独で動作するスライドショーを実装するJavaScript『Animated JavaScript Slideshow』
商用利用可 軽量・単独で動作するスライドショーを実装するJavaScript『Animated JavaScript Slideshow』 ◆Animated JavaScript Slideshow -- 5KB [Web Development Blog] 『Animated JavaScript Slideshow』はスライドショーを実装することが出来るJavaScriptライブラリです。スクリプト自体は約5KBと軽量で、単独で動作します。 つい最近、画像をスライドショーで表示させるものを作りたいと思っていて、使いやすそうなものを探していたところ、上記のJavaScriptライブラリが使いやすかったので紹介します。 動作デモ とりあえずどのようなものかを見たい場合は、作者のページにデモページが用意されているのでそちらをどうぞ。 ファイル構成概要 配布されているzipファイル（リンク先
ウェブサイトの制作・検証に役立つブックマークレット集
レイアウト用のグリッドをオーバーレイで表示します。 URLを変更すれば画像の変更可。 Bookmarklet Layout Grid Overlay MRI
2008年、ウェブのデザイナー・開発者がおさえておきたいリソース集 | コリス
2008年、ウェブのデザイナー・開発者がおさえておきたいデザイン、Photoshop&Illustratorのチュートリアル、ブラシやベクター素材、JavaScript、CSS、WordPress、タイポグラフィ、フォント、素材、リソースなどをnoupeのエントリーから紹介します。 2008 Most Popular Design posts, Tutorials and Resources デザイン関連 Photoshopのチュートリアル関連 Illustratorのチュートリアル関連 Photoshop&Illustratorのブラシやベクター素材 JavaScript関連 WordPress関連 CSS関連 フォント&タイポグラフィ関連 ツール&素材関連 デザイン関連 42 Awesome Business Card Designs 20 Beautiful HDR Pictures
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
Flashの知識がなくても簡単に設置できる、iTunesのカバーフロー風ギャラリー
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳
WEB制作者とブロガーの『遊び心をくすぐる』26のブックマークまとめ*ホームページを作る人のネタ帳