Welcome to ShanaBrian Website このサイトでは、デスクトップ、PSP、PS Vita、iPhone、iPadなどの壁紙、Webサイト制作で使用する素材、 Webサイト制作に役立つツールの提供やライブラリの紹介、Webリファレンスを掲載しています。

The Famous Pinterest Dynamic Grid Layout and Design Inspirations Introduction Dynamic Grid is one of the hottest page layout we can easily seen in web industry. As you can see, this phenomena is caused by the rising star - Pinterest which allow us to pin our favourite photo and share it in our pinboard. The whole sharing process is painless and pretty fast. Dynamic grid kinda like float, but it re

One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not supported by all browsers yet. This tutorial will show you how to use Modernizr to detect if placeholder is supported,

Posted: 2011.01.26 / Category: WebDesign / Tag: デザイン参考 昨年あたりからウィンドウサイズに追従して変化する可変タイプのグリッドレイアウトが増えてきましたね。こんなレイアウトにしたいなんて注文も増えてきているのではないでしょうか。 そんなときのために可変グリッドレイアウトなサイトとWordpress&jQueryプラグインをピックアップしてみました。 最後には実際に制作するときに使えそうな、Wordpressテーマ&jQueryプラグインをご紹介します。

この記事は11年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。ボックス内をスクロールすると自動でコンテンツをロードするjQuery – かちびと.net を読んで、ちょっとやってみたくなったので作った。 言ってもたいしたことやってませんがｗ かちびと.netのシロさんには許可を頂いてます。 詳細は以下。 上記記事では、下までスクロールしたあとにワンテンポ置いてから（タイマー処理で）コンテンツがロードされる形になってます。 しかし、IEで見てみるとわかるのですが、内側のスクロールが完了した時点で外側のスクロールも動いちゃうんですね。 なので、ロードされる前にページの下に行ってしまう。 これをちょっと改善できないかなーと思って作ったのがこちら。 Auto Scroll Test コードは以下。 <script type=”text/javascript”> $(functio

iPhoneでフリックギャラリーを実装できるjQueryプラグイン「flickGal」を作りました。ぜひ使ってみてください！ 公開にあたって意見をくれたid:hokut_o氏、ありがとうございました。 デモページ がありますので、見てみてください。 http://stakam.net/jquery/flickgal/demo ※iPhoneかiPad向けです。友達がAndroid でも動くと言っていました。PCでもそこそこ見れます。androidで最初うごかないことがあるみたいです。yuuriさんありがとうございます。android でorientation change しても動くv1.2 をリリースしました。 実装のしかた 説明ページを見てみてください。 http://stakam.net/jquery/flickgal/ 基本的にはこんな風に実装する方式です。 いくつかのルールにそっ

jQuery(function($){ $('div.slideimage').slide(); }); (function($){ $.fn.slide = function(options){ var defaults = { fadeTime: 1000, intervalTime: 3000, waitTime: 5000, window: true }; options = $.extend(defaults, options); return this.each(function(){ var current = 0; var interval = 0; var slides = new Array; var target = $(this).addClass('slideimage'); var navi = $('<ul>').addClass('slidenavi');

前回のスライドショーによくあるナビつけてみることに。 任意の写真をクリックで選べるようにします。 ナビをクリックすると自動再生されてるアニメーション(フェードイン・フェードアウト)を停止して、指定のスライドを表示、しばらく放置すると自動再生再開するようにします。 アニメーションは setInterval で再生しているので、clearInterval にて停止するだけ。アニメーション再開は一定時間操作しない時間帯を持ちたいので setTimeout で待機するようにします。 var interval; // スライド再生 function startSlide(wait){ wait = wait | 0; var intervalTime = 3000; setTimeout(function(){ interval = setInterval(function(){ // アニメーショ

In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each […] In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is

Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic. HTML Following the tradition, we will first lay down the HTML markup of the slideshow. The main container element is the #slideShowContainer div, which holds the #slideShow div an

jquery.basic.js(function($){ /* プラグイン名（myplugin）を指定 */ /* 関数にオプション変数を渡す */ $.fn.myplugin=function(config){ /* 引数の初期値を設定（カンマ区切り） */ var defaults={ defColor:"#ff6699", defPadding:5 } var options=$.extend(defaults, config); /* 一致した要素上で繰り返す */ return this.each(function(i){ /* プラグイン内での現在の要素はthisで参照 */ $(this).text(this.tagName+"["+i+"]").css({"color":defaults.defColor,"padding":defaults.defPadding}); }