FullscreenBookBlock：ページめくりを導入する方法｜DAD UNION – エンジニア同盟
過去にページめくり系プラグイン 「pageflip.js：本の様にページめくりを導入する方法」 「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」 をご紹介しましたが、今回は別パターンのページめくりを導入する方法をご紹介します。 ページめくりを導入するための読み込むCSSファイル ※jquery.jscrollpane.custom.css、bookblock.css、custom.cssファイルを読み込みます。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.custom.css" /> <link rel="stylesheet" type="text/css" href="css/bookblock.css" /
pageflip.jsを使って本の様にページめくりを導入する方法｜DAD UNION – エンジニア同盟
本の様にページめくりを導入するCSSの記述 ※main.cssファイルを読み込みます。 <link type="text/css" href="main.css" rel="stylesheet" media="screen" /> ※main.cssファイルの内容は以下の通りです。ページめくりを行うエリア（#book、#pages section、#pageflip-canvas）を記述します。必要に応じて変更して下さい。 body, h2, p { margin: 0; padding: 0; } body { background-color: #444; color: #333; font-family: Helvetica, sans-serif; } #book { background: url("book.png") no-repeat; position: absolut
JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】｜DAD UNION – エンジニア同盟
JavaScriptを使って本の様にページめくりをする方法をご紹介します。ページ中央を境に左右ページめくりを導入してみます。 modernizr.custom.08464.js、jquery.min.js、query.tmpl.min.js、jquery.history.js、core.string.js、jquery.touchSwipe-1.2.5.js、jquery.flips.jsファイルを使います。 本の様にページめくりを導入するCSSファイルの読み込み ※ページ全体、「次へ」ボタン、ロゴ位置等のCSSを記述してます。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="css/style.css" /> 使って本の様にページめくりを導入するJavaScriptの（headタグ内）記述例 ※modernizr.cu
turn.jsを使って本のページめくりを演出する方法｜DAD UNION – エンジニア同盟
本のページめくりを演出するエリアのCSS記述 ※必要に応じて変更して下さい。 <style type="text/css"> body{ background:#ccc; } #book{ width:800px; height:500px; } #book .turn-page{ background-color:white; } #book .cover{ background:#333; } #book .cover h1{ color:white; text-align:center; font-size:14px; line-height:500px; margin:0px; } #book .loader{ background-image:url(loader.gif); width:24px; height:24px; display:block; position:abs
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
