My Vector Space

人生は寄り道してなんぼ

Javascript

【TIPS|ズームスライダー】高速スライド&ズーム表示の画面遷移がインパクト大!

アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。 demo 「ズームスライダー」の設置手順 htmlファイル内にCSSファイルとJSファイルをリンクさせる まず、以下のサイトから外部ファイルをダウンロードする。 元サイト http://tympanus…

【TIPS】サムネイルプレビュー付きスライダー

サムネイルプレビュー付きスライダー【2パターン】のコードまとめ。 まず、共通の設定部分になるCSSファイルをリンクさせる。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 3 <link rel="stylesheet" type="text/css" href="css/style.css" /> 4 <noscript> 5 <link rel="stylesheet" type="text/css" href="css/noscript.css" /> 6 </link></noscript></link></link></head>

【TIPS】ドロップダウンリスト 5パターン

CSS,Javascriptで作るドロップダウンリスト5パターン。 まず、ダウンロードした外部ファイルの中にある5パターン共通のCSSファイルとJSファイルを設定していく。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/style.css" /> 3 <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' 4 rel='stylesheet' type='text/css' /> 5 </link></link></head>

画像を4つのパネルに分割&エフェクト効果のスライドショー -Four Boxes Slideshow-

画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。 まず、ダウンロードした外部ファイルの中にある3パターン共通のCSSファイル(3ファイル)とjsファイル(3ファイル)を設定。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 3 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 4 </link></link></head>

【TIPS】サムネイルプレビュー付きスライダー【 Sweet Thumbnails Preview Gallery 】

サムネイルプレビュー付きスライダー。 demo 記述の流れは、まず対象とする<img>タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。 http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ 外部ファイルの中からCS…

PAGE TOP