読者です 読者をやめる 読者になる 読者になる

My Vector Space

WEB関連の情報やTIPSなどを中心に、身近なネタ グロースハック 考え方 グルメ 生活に役立つ情報…等など色々と…

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

アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。 demo まずはhtmlファイル内にCSSファイルとJSファイルをリンクさせる まず、外部ファイル(http://tympanus.net/codrops/2015/07/06/zoom-slider/)をダウンロードして「style.css」「…

サムネイルプレビュー付きスライダー【2パターン】

サムネイルプレビュー付きスライダー【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 </noscript> 7 </link></link></head>

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

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>

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

サムネイルプレビュー付きスライダー。 demo 記述はまず、対象とする<img>タグにhtmlタグを追加してから、ダウンロードした外部ファイル(http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/)のCSS、Javascript、JQueryをリンクさせる、と…

PAGE TOP