TOP
Sirius.customize
Sirius.customize

ハイソなパララックス

今回ご案内するパララックスデザインのスタイルは、上から下まで
画像の連動となり　2段、3段目の記事カラムのスペースはなく、画像上に
記事置きするタイプで、やや高級感を打ち出せますが、構造上
トップページでの組み込み専用となります

 

参考画像

 

記事は画像の中に出現する形態です

 

BOXサイズは、CSSにより指定でき、縦サイズは自動拡張になります

 

 

導入方法は、HTMLテンプレート内　以下にCSSおよび
MTMLコードをコピーして貼り付け、画像を4つ用意して、
CSS記載の画像コードを用意した画像コードに書き換えます

 

 

スクロールの際、画像のせり上がりをjqueryを含ませ反映しておりますが
静的にスクロールさせたい場合はＣＳＳ内より
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
を削除すれば　scriptは読み込まれず静的作動となります

 

 

その他、詳細は記載順に含めています

 

 

<body>

 

<!--*ここから*-->
<style>
/* PC対応CSS */
body {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 16px;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
}
#wrapper {
position: relative;
width: auto;
height: 3200px;
margin: 0 auto;
padding: 0px;
}

 

 

 

.content {
position: relative;
margin: 0 auto;
padding: 0;
height: 800px;
}

 

 

/* ここから画像コード　画像コードを４つ、書き換えてください */
#first {
background: url(img/german1600x900.jpg) center 0 no-repeat fixed;
}
#second {
background: url(img/dscf0115.jpg) center 0 no-repeat fixed;
}
#third {
background: url(img/ities-images_p.jpg) center 0 no-repeat fixed;
}
#end {
background: url(img/german.jpg) center 0 no-repeat fixed;
}

 

 

 

 

 

 

 

/* div#first */
.title {
position: fixed;
margin: 0;
top: 40px;
padding-left: 300px;
color: rgba(255, 255, 255, 0.7);
font-size: 3em;
/*z-index: 10;*/
}

 

 

 

 

 

/* div#end */
#end h2 {
position: absolute;
color: white;
font-size: 4em;
left: 50%;
margin-left: -150px;
text-shadow: 0 0 16px rgba(140, 123, 96, 0.8);
top: 180px;
width: 300px;
}
div, p, h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
display: block;
text-align: left;

 

}

 

 

 

 

 

 

 

#third img {
position: absolute;
left: 30px;
top: 500px;
opacity: 0.8;
}

 

 

 

 

 

 

 

#threebox {
position: absolute;
top: 300px;
left: 300px;
width: 500px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(150, 150, 150, 0.1);
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
padding: 18px;
}

 

 

 

 

 

/* ここからスマートフォン対応 */
@media(max-width:700px){

 

 

 

/* div#first */
.title {
position: fixed;
margin: 0;
top: 20px;
　　　　left: 0%;
padding-left: 300px;
color: rgba(255, 255, 255, 0.7);
font-size: 3em;
/*z-index: 10;*/
}

 

 

/* div#end */
#end h2 {
position: absolute;
color: white;
font-size: 4em;
left: 50%;
margin-left: -150px;
text-shadow: 0 0 16px rgba(140, 123, 96, 0.8);
top: 180px;
width: 300px;
}

 

 

 

/* 記事BOX*/
#threebox {
position: absolute;
top: 200px;
left: 0px;
width: 100%;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(150, 150, 150, 0.1);
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
padding: 18px;
}
}
</style>

 

 

 

 

<div id="wrapper">
<div id="first" class="content">
<p class="title movingElement" data-speed="-1.5" data-offsety="100"> Parallax シリウス3</p>

 

 

 

<div id="threebox"<% pageColumns %>>
<% textTitle1 %>
<% textBody1 %>
</div>
</div>

 

 

 

<div id="second" class="content">
<div id="threebox"<% pageColumns %>
<% textTitle2 %>
<% textBody2 %>
</div>

 

 

 

<div id="third" class="content">
<div id="threebox"<% pageColumns %>>
<% textTitle3 %>
<% textBody3 %>
</div>
</div>

 

 

<div id="end" class="content">
<!--*--><h2 class="movingElement" data-speed="0.8" data-offsety="3180">The End.</h2>
</div>
</div>

 

 

 

<!-- ★フッターここから★ -->
<div id="footlink"><% footerMenu %><% PRLink %><% sitemapPageLink %></div>
<% topMenu %>
<div id="footer">Copyright (C) <% thisYear %> <a href="<% pageDepth %>"><% siteTitle %></a> All Rights Reserved.<% accessAnalyzer %></div>
<!-- ★フッターここまで★ -->

 

 

 

<% searchTag | str_replace(<!-- ★comment★ -->,サイト内検索:) | tag_insert(div id="searchbox") %>
</div>

 

 

 

 

 

 

 

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
jQuery(function($){
var $window = $(window);

 

 

 

$('.content').each(function(index) {
var $self = $(this);
var offsetPositions = $self.offset();

 

 

 

$(window).scroll(function() {
// この領域がブラウザに表示されている場合
if (($window.scrollTop() + $window.height()) > offsetPositions.top && ((offsetPositions.top + $self.height()) > $window.scrollTop())) {
var offsetY = -(($window.scrollTop() - offsetPositions.top)/ 17);
var positions = '50%' + offsetY + 'px';
$self.css('backgroundPosition', positions);
//追加部分
$('.movingElement', $self).each(function(index) {
var $movingElement = $(this);
var yPos = -($window.scrollTop() / $movingElement.data('speed')) + $movingElement.data('offsety');
$movingElement.css('top', yPos);
});
//ここまで
}
});
});

 

});
</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>

 

 

 

<!--*ここまで*-->

 

 

 

</body>
</html>

 

 

 

要点　解説

 

画像サイズ

 

画像サイズの自動拡張はありません

 

パソコンサイズにに合う画像を4つ用意してください
作動のお試しをする場合なら小さい画像でもOK

 

 

 

 

 

/* PC対応CSS */内の記事BOXサイズは以下のwidth: 500px;で変更

 

 

#threebox {
position: absolute;
top: 300px;
left: 300px;
width: 500px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(150, 150, 150, 0.1);
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
padding: 18px;
}

 

 

 

rgbaのカラーコードで背景を透過指定してます
変更する場合は、rgbaのカラーコードをお調べください

 

 

以下の形態もございます

 

 

 

また、こちらのフィルターをお使いになる場合は、上記CSSから
以下を削除して

 

background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(150, 150, 150, 0.1);
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
padding: 18px;

 

 

 

コピーコードを記事内において、枠内に記事を入れてください
<div style="border:solid 1px #0ACCFF;background: rgba(0, 0, 0, 0.4);;colo; padding:10px;color: #fff; border:1px solid #0ACCFF; border-radius:6px;">

 

 

 

</div>

 

 

 

 

 

ＣＳＳでは、以下のメディアクエリ指定で、700ｐｘサイズの画面から
レイアウトが縮小され　記事ＢＯＸも中央から左端へ移動するよう
指定しておりますが、改行は自己判断で行ってください

 

/* ここからスマートフォン対応 */
@media(max-width:700px){

 

 

タイトル

 

ＨＴＭＬ内に、Parallax シリウス3のタイトルがございますが
サイトタイトルに書き換えてください

 

 

記事挿入

 

上から記事ＢＯＸは3つになり、記事1が一段目　記事2が2段目

 

 

記事3が3段目

 

記事タイトル　見出しは記事1カラムでのみ使用可能
記事２　3ではレイアウトが崩れるので書き込まないでください

 

今後、気が付いたことなど付け加えてまいりますが
他の詳細は、以下のパララックス導入解説記事をを参照願います

 

 

 

ページトップ
ハイソなパララックスデザイン
シリウスサイトをパララックス仕様にカスタマイズ
シリウスカスタマイズTOP

ハイソなパララックスデザイン関連解説
CSS形成パララックスデザインを導入する設置手順..その1
シリウスサイトにCSS形成のみでパララックス（parallax）スタイルを導入する手順のご案内となります..取り付けはコピペで5分、画像は良いものをご用意ください
パララックスをサイト記事カラム内に導入..2
シリウスサイトの幅に合わせて、パララックスレイアウトを記事カラムで設定する簡易型カスタマイズ手順です...
スマホでも動く動的パララックス記事内導入３
シリウスの記事内にスクリプトを採用しパララックス効果を演出するカスタマイズ.. ただし、静的では無く動的...画像が少しせり上がり...よく使わる手法です... 当サイトは他のスクリプトが影響
動的作動なパララックススクロールデザイン構造を組み込む工程
シリウスのＭＴＭＬ構造に動的作動、jquery採用でスクロールによる時差移動を指示し、背景画像のずれ、せり上がりの視覚効果を発生させるパララックススタイルへとカスタマイズする工程をご案内します CSS追記のご案内です