パララックススタイルトップページ）専用コード
当DEMOサイトの例
トップページのみパララックスデザイン、スタイルに変更するためのソースコードと
CSSを記載しております
あくまでトップページで使うことが前提
以下ソースはシリウスのデフォルトTPでは導入以降、障害はなかったのですが、
レスポンシブTPに入れ込むとページ戻りボタンに障害ありでしたので、デフォルトは
削除し、外部戻りボタンが反映されるようにしております
このページでは、デフォルトのページ戻りボタンが表れておりますが、カテゴリー
エントリーPは改変なしですが理由...
2017 0819
申し訳ございません..ページ戻るボタンが不作動でしたので修正しました..
カテゴリー、エントリーもノーマルはいや、当サイトのデザインにしてとご要望ありで
当ページは、トップのHTMLとCSSのみ..
カテゴリー、エントリーは該当ページにソース置いてます
サイドメニューからご確認ください
トップページ張り替えソース
<$ AllStrReplace(<h2>(.*?)</h2>,<h2><span>$1</span></h2>) $>
<$ AllStrReplace(<h3>(.*?)</h3>,<h3><span>$1</span></h3>) $>
<$ AllStrReplace(<h4>(.*?)</h4>,<h4><span>$1</span></h4>) $>
<% XMLdeclaration %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<% publishCharset %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><% pageTitle %></title>
<meta name="keywords" content="<% metaKeywords %>" />
<meta name="description" content="<% metaDescription %>" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/config.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="<% pageDepth %>styles.css" type="text/css" />
<link rel="stylesheet" href="<% pageDepth %>css/textstyles.css" type="text/css" />
<% pageStyles %>
<% headTag %>
<% rssFeedLink %>
<% googleSitemapTag %>
<% mobileLinkDiscovery %>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--backtotop-->
<script type="text/javascript">
$(function() {
var topBtn = $('.backtotop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
</script>
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
<!--popup-->
<script type="text/javascript">
$(function() {
$('a.popup').click(function(event){
event.preventDefault();
window.open(this.href,'_blank');
return false;
});
});
</script>
<!--tooltip-->
<script type="text/javascript">
$(function() {
var tooltip = $('<p></p>').appendTo($('body')).css({opacity: 0}).hide();
$('ul#tooltip li').each(function() {
var element = $(this);
var text = element.attr('title');
element.attr('title','');
element.hover(function(e) {
tooltip.stop()
.text(text)
.addClass('arrow_box')
.css({
position : 'absolute',
left : e.pageX - 5,
top : e.pageY + 30
})
.show()
.animate({
opacity: 0.9
}, 1000);
},function() {
tooltip.stop()
.animate({
opacity: 0
}, 1000, function(){
tooltip.hide()
});
});
element.mousemove(function(e){
tooltip.css({
position : 'absolute',
left : e.pageX -5,
top : e.pageY + 30
});
});
});
});
</script>
<script type="text/javascript">
$(function() {
var nav = $('.nav');
//表示位置
var navTop = nav.offset().top+300;
//ナビゲーションの高さ
var navHeight = nav.height()+10;
var showFlag = false;
nav.css('top', -navHeight+'px');
//ナビゲーションの位置まで移動で表示
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
if (showFlag == false) {
showFlag = true;
nav
.addClass('fixed')
.stop().animate({'top' : '0px'}, 200);
}
} else if (winTop <= navTop) {
if (showFlag) {
showFlag = false;
nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
nav.removeClass('fixed');
});
}
}
});
});
</script>
<script>
$('#animation').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight +1){
$(this).addClass("fadeInDown");
}
});
});
</script>
<script>
$('#animation2').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation2').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight +1){
$(this).addClass("fadeInDown2");
}
});
});
</script>
<script>
$('#animation1').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation1').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight +1){
$(this).addClass("fadeInDown1");
}
});
});
</script>
<script type="text/javascript">
(function($) {
$.mamewaza_scroll = function(cls) {
if($.isEmptyObject(cls) ) {
return "";
}
var daemon = function() {
var y = $(window).scrollTop() + $(window).height();
for(var i = arr.length - 1; i >= 0; i--) {
if(arr[i].y > y) {
break;
}
arr[i].elm.addClass(arr[i].cls);
arr.splice(i, 1);
}
if(arr.length == 0) {
$(window).unbind("scroll", daemon);
}
};
var arr = [];
var y = $(window).scrollTop() + $(window).height();
for(var i = 0; i < cls.length; i++) {
if(!cls[i] || !$("." + cls[i])[0]) {
continue;
}
var j = 0;
$("." + cls[i]).each(function() {
var y_this = $(this).offset().top;
if(y_this <= y) {
return "";
}
$(this).removeClass(cls[i]);
arr.push( {
"y": y_this,
"elm": $(this),
"cls": cls[i],
} );
} );
}
if(arr.length == 0) {
return "";
}
//sort
arr.sort(function(a, b) {
return b.y - a.y;
} );
$(window).bind("scroll", daemon);
daemon();
};
})(jQuery);
$(document).ready(function() {
$.mamewaza_scroll( ["anim1", "anim1-2", "anim1-3", "anim1-4", "anim2", "anim2-2", "anim2-3", "anim2-4", "anim3", "anim3-2", "anim3-3", "anim3-4", "anim4", "anim4-2", "anim4-3", "anim5", "anim6", "anim6-2"] );
} );
</script>
</head>
<body>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-P5H6QV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-P5H6QV');</script>
<div id="wrapper"></div>
<!-- ★ヘッダーここから★ -->
<div class="bg-holder pic1" data-width="1024" data-height="550">
<div class="nav">
<div style="border:solid 1px #000000;background: rgba(0, 0, 0, 0.4);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">
<div id="wrapper"></div>
<div id="normalnavvvi" class="dropcc">
/*グローバルナビ リンクはあなたの仕様に張り替えてください*/
<li><a href="#">ＭＥＮＵ</a>
<ul>
<li><a href="<% pageDepth %>">トップページ</a></li>
</ul>
</li>
<li><a href="#">お仕事ブログ</a>
<ul>
<li><a href="http://ailibrary.jp/">アイザワ｜会沢自動販売機サービス.アイライブラリー</a></li>
</ul>
</li>
<li><a href="#">ご案内</a>
<ul>
<li><a href="<% pageDepth %>sitemap.html">サイトマップ</a></li>
</ul>
</li>
<li><a href="#">関連サイト</a>
<ul>
<li><a href="http://www.affiliateno1.com/">オンラインマニュアルLibrary</a></li>
</ul>
</li>
<li><a href="#">ブログ</a>
<ul>
<li><a href="http://benaizawa.hatenablog.com/">benaizawa_blog</a></li>
<li><a href="http://ameblo.jp/venaizawa/">ameblo.jp</a></li>
<li><a href="http://www.benaizawa.solutions/">benaizawa blogger</a></li>
<li><a href="http://blog.goo.ne.jp/venaizawa">goo blog.venaizawa</a></li>
</ul>
</li>
</div>
</div>
<!-- /#nav --></div>
<div id="headerbox">
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
/*スマホ用スライドナビ リンクはあなたの仕様に張り替えてください*/
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">
<hr style="border-bottom:solid 3px f#fff" border="0" />
<a href="<% pageDepth %>web/"><span style="color:#FFFFFF">ウェブサイト作成（ホームページ）</span></a>
<hr style="border-bottom:solid 1px #fff" border="0" />
<a href="<% pageDepth %>sitemap.html"><span style="color:#FFFFFF">サイト記事一覧</span></a>
<hr style="border-bottom:solid 1px #fff" border="0" />
<span style="color:#FFFFFF"><strong>運営サイト</strong></span>
<hr style="border-bottom:solid 1px #fff" border="0" />
<a href="http://www.affiliateno1.com/"><span style="color:#FFFFFF">シリウスカスタマイズ | オンラインマニュアルLibrary</span></a>
<hr style="border-bottom:solid 1px #fff" border="0" />
<a href="http://www.affiliateno1.com/sirius.customize/"><span style="color:#FFFFFF">シリウスレスポンシブテンプレート専用のカスタマイズまとめ</span></a>
<hr style="border-bottom:solid 1px #fff" border="0" />
</div>
</div>
</div>
<% if:siteMode(normal) %>
<div id="animation1">
<h2 class="anim3">
<div class=header h2>
<center> <% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %></center>
</h2>
</div>
<% topMenu2 | tag_put(<div id="topmenubtn">MENU</div>) | tag_insert(div id="topmenubox") | tag_insert(div id="nav") %>
<% pageDescription %>
</div>
</div>
<!-- ★ヘッダーここまで★ -->
<div class="backtotop"><a href="#wrapper">TOP</a></div>
/*テキストはあなたの仕様に張り替えてください*/
<section>
<div class="content">
<% textTitle1 %><!-- ★記事1に書く★ -->
<% textBody1 %>
</div>
</section>
<div class="bg-holder pic2" data-width="1024" data-height="768">
<div class="content">
<h2> 一人..孤独ではない</h2>
</div>
</div>
<section>
<div class="content">
<% textTitle2 %><!-- ★記事2に書く★ -->
<% textBody2 %>
</div>
</section>
<div class="bg-holder pic3" data-width="1600" data-height="1200">
<div class="content">
<h2>前進する</h2>
</div>
</div>
<section>
<div class="content">
<% textTitle3 %><!-- ★記事3に書く -->
<% textBody3 %></div></section>
<div style="border:solid 1px #006699;background-color:#000000;color:#00344D;font-size:13px;padding:10px;">
/*フッター内表示リンクはあなたの仕様に張り替えてください 追加可能*/
<a href="http://www.affiliateno1.com/sirius.customize/">シリウスレスポンシブテンプレート専用のカスタマイズまとめ</a>
</div>
<div id="footer">
<div class="inner">
<% footerMenu | tag_insert(div id="footlinkbox") %>
<% searchTag | str_replace(<!-- ★comment★ -->,) | str_replace(image,submit) | tag_insert(div id="searchbox") %>
<div id="footsub"><% PRLink %><% sitemapPageLink %></div>
</div>
<div class="copyright">Copyright (C) <% thisYear %> <% siteTitle %>All Rights Reserved.<% accessAnalyzer %></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- parallax scroll本体 -->
<script src="js/jquery.parallax-scroll.min.js"></script>
<script>
$(function() {
$(".bg-holder").parallaxScroll({
friction: 0.6
});
});
</script>
<script>//<![CDATA[
!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b(a.jQuery)}(this,function(a){"use strict";var b,c={friction:.5},d=a(window),e=0;return window.requestAnimationFrame=function(a){var b=(new Date).getTime(),c=Math.max(0,5-(b-e)),d=window.setTimeout(function(){a(b+c)},c);return e=b+c,d},b=function(b,e){return{init:function(){this.$background=a(b),this.settings=a.extend({},c,e),this._initStyles(),this._bindEvents()},_initStyles:function(){this.$background.css({"background-attachment":"scroll"})},_visibleInViewport:function(){var a=d.height(),b=this.$background.get(0).getBoundingClientRect();return b.top<a&&b.bottom>0||b.bottom<=a&&b.top>a},_bindEvents:function(){var a=this;d.on("load scroll resize",function(){a._requestTick()})},_requestTick:function(){var a=this;this.ticking||(this.ticking=!0,requestAnimationFrame(function(){a._updateBgPos()}))},_updateBgPos:function(){if(this._visibleInViewport()){var a=d.width(),b=d.height(),c=this.$background.data("width"),e=this.$background.data("height"),f=c/e,g=this.$background.width(),h=this.$background.height(),i=g/h,j=f>i,k=g/c,l=e*k,m=this.$background.offset().top,n=d.scrollTop(),o=n-m,p=b+l,q=o*(b/p),r=o/b,s=(b-h)/2;s=j?s*r:s;var t=j?2*this.settings.friction*i:this.settings.friction*i,u=j?"auto "+b+"px":a+"px auto",v=q*t-s;this.$background.css({"background-size":u,"background-position":"50% "+v+"px"})}this.ticking=!1}}},b.defaults=c,a.fn.parallaxScroll=function(a){return this.each(function(){new b(this,a).init()})},b});
//]]></script>
<script>$(function(){$(".bg-holder").parallaxScroll({friction:0.6});});</script>
</div>
</div>
<script>
$('#animation3').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation3').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 1){
$(this).addClass("fadeInDown3");
}
});
});
</script>
</body>
</html>
トップページのみパララックスデザイン、スタイルに変更するためのソースコードと
CSSを記載しております
あくまでトップページで使うことが前提
以下ソースはシリウスのデフォルトTPでは導入以降、障害はなかったのですが、
レスポンシブTPに入れ込むとページ戻りボタンに障害ありでしたので、デフォルトは
削除し、外部戻りボタンが反映されるようにしております
このページでは、デフォルトのページ戻りボタンが表れておりますが、カテゴリー
エントリーPは改変なしですが理由...
2017 0819
申し訳ございません..ページ戻るボタンが不作動でしたので修正しました..
カテゴリー、エントリーもノーマルはいや、当サイトのデザインにしてとご要望ありで
当ページは、トップのHTMLとCSSのみ..
カテゴリー、エントリーは該当ページにソース置いてます
サイドメニューからご確認ください
トップページ張り替えソース
<$ AllStrReplace(<h2>(.*?)</h2>,<h2><span>$1</span></h2>) $>
<$ AllStrReplace(<h3>(.*?)</h3>,<h3><span>$1</span></h3>) $>
<$ AllStrReplace(<h4>(.*?)</h4>,<h4><span>$1</span></h4>) $>
<% XMLdeclaration %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<% publishCharset %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><% pageTitle %></title>
<meta name="keywords" content="<% metaKeywords %>" />
<meta name="description" content="<% metaDescription %>" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/config.js" type="text/javascript"></script>
<script src="<% pageDepth %>js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="<% pageDepth %>styles.css" type="text/css" />
<link rel="stylesheet" href="<% pageDepth %>css/textstyles.css" type="text/css" />
<% pageStyles %>
<% headTag %>
<% rssFeedLink %>
<% googleSitemapTag %>
<% mobileLinkDiscovery %>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--backtotop-->
<script type="text/javascript">
$(function() {
var topBtn = $('.backtotop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
</script>
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
<!--popup-->
<script type="text/javascript">
$(function() {
$('a.popup').click(function(event){
event.preventDefault();
window.open(this.href,'_blank');
return false;
});
});
</script>
<!--tooltip-->
<script type="text/javascript">
$(function() {
var tooltip = $('<p></p>').appendTo($('body')).css({opacity: 0}).hide();
$('ul#tooltip li').each(function() {
var element = $(this);
var text = element.attr('title');
element.attr('title','');
element.hover(function(e) {
tooltip.stop()
.text(text)
.addClass('arrow_box')
.css({
position : 'absolute',
left : e.pageX - 5,
top : e.pageY + 30
})
.show()
.animate({
opacity: 0.9
}, 1000);
},function() {
tooltip.stop()
.animate({
opacity: 0
}, 1000, function(){
tooltip.hide()
});
});
element.mousemove(function(e){
tooltip.css({
position : 'absolute',
left : e.pageX -5,
top : e.pageY + 30
});
});
});
});
</script>
<script type="text/javascript">
$(function() {
var nav = $('.nav');
//表示位置
var navTop = nav.offset().top+300;
//ナビゲーションの高さ
var navHeight = nav.height()+10;
var showFlag = false;
nav.css('top', -navHeight+'px');
//ナビゲーションの位置まで移動で表示
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
if (showFlag == false) {
showFlag = true;
nav
.addClass('fixed')
.stop().animate({'top' : '0px'}, 200);
}
} else if (winTop <= navTop) {
if (showFlag) {
showFlag = false;
nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
nav.removeClass('fixed');
});
}
}
});
});
</script>
<script>
$('#animation').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight +1){
$(this).addClass("fadeInDown");
}
});
});
</script>
<script>
$('#animation2').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation2').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight +1){
$(this).addClass("fadeInDown2");
}
});
});
</script>
<script>
$('#animation1').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation1').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight +1){
$(this).addClass("fadeInDown1");
}
});
});
</script>
<script type="text/javascript">
(function($) {
$.mamewaza_scroll = function(cls) {
if($.isEmptyObject(cls) ) {
return "";
}
var daemon = function() {
var y = $(window).scrollTop() + $(window).height();
for(var i = arr.length - 1; i >= 0; i--) {
if(arr[i].y > y) {
break;
}
arr[i].elm.addClass(arr[i].cls);
arr.splice(i, 1);
}
if(arr.length == 0) {
$(window).unbind("scroll", daemon);
}
};
var arr = [];
var y = $(window).scrollTop() + $(window).height();
for(var i = 0; i < cls.length; i++) {
if(!cls[i] || !$("." + cls[i])[0]) {
continue;
}
var j = 0;
$("." + cls[i]).each(function() {
var y_this = $(this).offset().top;
if(y_this <= y) {
return "";
}
$(this).removeClass(cls[i]);
arr.push( {
"y": y_this,
"elm": $(this),
"cls": cls[i],
} );
} );
}
if(arr.length == 0) {
return "";
}
//sort
arr.sort(function(a, b) {
return b.y - a.y;
} );
$(window).bind("scroll", daemon);
daemon();
};
})(jQuery);
$(document).ready(function() {
$.mamewaza_scroll( ["anim1", "anim1-2", "anim1-3", "anim1-4", "anim2", "anim2-2", "anim2-3", "anim2-4", "anim3", "anim3-2", "anim3-3", "anim3-4", "anim4", "anim4-2", "anim4-3", "anim5", "anim6", "anim6-2"] );
} );
</script>
</head>
<body>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-P5H6QV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-P5H6QV');</script>
<div id="wrapper"></div>
<!-- ★ヘッダーここから★ -->
<div class="bg-holder pic1" data-width="1024" data-height="550">
<div class="nav">
<div style="border:solid 1px #000000;background: rgba(0, 0, 0, 0.4);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">
<div id="wrapper"></div>
<div id="normalnavvvi" class="dropcc">
/*グローバルナビ リンクはあなたの仕様に張り替えてください*/
<li><a href="#">ＭＥＮＵ</a>
<ul>
<li><a href="<% pageDepth %>">トップページ</a></li>
</ul>
</li>
<li><a href="#">お仕事ブログ</a>
<ul>
<li><a href="http://ailibrary.jp/">アイザワ｜会沢自動販売機サービス.アイライブラリー</a></li>
</ul>
</li>
<li><a href="#">ご案内</a>
<ul>
<li><a href="<% pageDepth %>sitemap.html">サイトマップ</a></li>
</ul>
</li>
<li><a href="#">関連サイト</a>
<ul>
<li><a href="http://www.affiliateno1.com/">オンラインマニュアルLibrary</a></li>
</ul>
</li>
<li><a href="#">ブログ</a>
<ul>
<li><a href="http://benaizawa.hatenablog.com/">benaizawa_blog</a></li>
<li><a href="http://ameblo.jp/venaizawa/">ameblo.jp</a></li>
<li><a href="http://www.benaizawa.solutions/">benaizawa blogger</a></li>
<li><a href="http://blog.goo.ne.jp/venaizawa">goo blog.venaizawa</a></li>
</ul>
</li>
</div>
</div>
<!-- /#nav --></div>
<div id="headerbox">
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
/*スマホ用スライドナビ リンクはあなたの仕様に張り替えてください*/
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">
<hr style="border-bottom:solid 3px f#fff" border="0" />
<a href="<% pageDepth %>web/"><span style="color:#FFFFFF">ウェブサイト作成（ホームページ）</span></a>
<hr style="border-bottom:solid 1px #fff" border="0" />
<a href="<% pageDepth %>sitemap.html"><span style="color:#FFFFFF">サイト記事一覧</span></a>
<hr style="border-bottom:solid 1px #fff" border="0" />
<span style="color:#FFFFFF"><strong>運営サイト</strong></span>
<hr style="border-bottom:solid 1px #fff" border="0" />
<a href="http://www.affiliateno1.com/"><span style="color:#FFFFFF">シリウスカスタマイズ | オンラインマニュアルLibrary</span></a>
<hr style="border-bottom:solid 1px #fff" border="0" />
<a href="http://www.affiliateno1.com/sirius.customize/"><span style="color:#FFFFFF">シリウスレスポンシブテンプレート専用のカスタマイズまとめ</span></a>
<hr style="border-bottom:solid 1px #fff" border="0" />
</div>
</div>
</div>
<% if:siteMode(normal) %>
<div id="animation1">
<h2 class="anim3">
<div class=header h2>
<center> <% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %></center>
</h2>
</div>
<% topMenu2 | tag_put(<div id="topmenubtn">MENU</div>) | tag_insert(div id="topmenubox") | tag_insert(div id="nav") %>
<% pageDescription %>
</div>
</div>
<!-- ★ヘッダーここまで★ -->
<div class="backtotop"><a href="#wrapper">TOP</a></div>
/*テキストはあなたの仕様に張り替えてください*/
<section>
<div class="content">
<% textTitle1 %><!-- ★記事1に書く★ -->
<% textBody1 %>
</div>
</section>
<div class="bg-holder pic2" data-width="1024" data-height="768">
<div class="content">
<h2> 一人..孤独ではない</h2>
</div>
</div>
<section>
<div class="content">
<% textTitle2 %><!-- ★記事2に書く★ -->
<% textBody2 %>
</div>
</section>
<div class="bg-holder pic3" data-width="1600" data-height="1200">
<div class="content">
<h2>前進する</h2>
</div>
</div>
<section>
<div class="content">
<% textTitle3 %><!-- ★記事3に書く -->
<% textBody3 %></div></section>
<div style="border:solid 1px #006699;background-color:#000000;color:#00344D;font-size:13px;padding:10px;">
/*フッター内表示リンクはあなたの仕様に張り替えてください 追加可能*/
<a href="http://www.affiliateno1.com/sirius.customize/">シリウスレスポンシブテンプレート専用のカスタマイズまとめ</a>
</div>
<div id="footer">
<div class="inner">
<% footerMenu | tag_insert(div id="footlinkbox") %>
<% searchTag | str_replace(<!-- ★comment★ -->,) | str_replace(image,submit) | tag_insert(div id="searchbox") %>
<div id="footsub"><% PRLink %><% sitemapPageLink %></div>
</div>
<div class="copyright">Copyright (C) <% thisYear %> <% siteTitle %>All Rights Reserved.<% accessAnalyzer %></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- parallax scroll本体 -->
<script src="js/jquery.parallax-scroll.min.js"></script>
<script>
$(function() {
$(".bg-holder").parallaxScroll({
friction: 0.6
});
});
</script>
<script>//<![CDATA[
!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b(a.jQuery)}(this,function(a){"use strict";var b,c={friction:.5},d=a(window),e=0;return window.requestAnimationFrame=function(a){var b=(new Date).getTime(),c=Math.max(0,5-(b-e)),d=window.setTimeout(function(){a(b+c)},c);return e=b+c,d},b=function(b,e){return{init:function(){this.$background=a(b),this.settings=a.extend({},c,e),this._initStyles(),this._bindEvents()},_initStyles:function(){this.$background.css({"background-attachment":"scroll"})},_visibleInViewport:function(){var a=d.height(),b=this.$background.get(0).getBoundingClientRect();return b.top<a&&b.bottom>0||b.bottom<=a&&b.top>a},_bindEvents:function(){var a=this;d.on("load scroll resize",function(){a._requestTick()})},_requestTick:function(){var a=this;this.ticking||(this.ticking=!0,requestAnimationFrame(function(){a._updateBgPos()}))},_updateBgPos:function(){if(this._visibleInViewport()){var a=d.width(),b=d.height(),c=this.$background.data("width"),e=this.$background.data("height"),f=c/e,g=this.$background.width(),h=this.$background.height(),i=g/h,j=f>i,k=g/c,l=e*k,m=this.$background.offset().top,n=d.scrollTop(),o=n-m,p=b+l,q=o*(b/p),r=o/b,s=(b-h)/2;s=j?s*r:s;var t=j?2*this.settings.friction*i:this.settings.friction*i,u=j?"auto "+b+"px":a+"px auto",v=q*t-s;this.$background.css({"background-size":u,"background-position":"50% "+v+"px"})}this.ticking=!1}}},b.defaults=c,a.fn.parallaxScroll=function(a){return this.each(function(){new b(this,a).init()})},b});
//]]></script>
<script>$(function(){$(".bg-holder").parallaxScroll({friction:0.6});});</script>
</div>
</div>
<script>
$('#animation3').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation3').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 1){
$(this).addClass("fadeInDown3");
}
});
});
</script>
</body>
</html>
