TOP

ハイソなパララックス

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

 

参考画像

 

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

 

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

 

 

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

 

 

スクロールの際、画像のせり上がりをjqueryを含ませ反映しておりますが
静的にスクロールさせたい場合はCSS内より
<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","メイリオ","MS Pゴシック",sans-serif;
}
#wrapper {
position: relative;
width: auto;
height: 3200px;
margin: 0 auto;
padding: 0px;
}

 

 

 

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

 

 

/* ここから画像コード 画像コードを4つ、書き換えてください */
#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>

 

 

 

 

 

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

 

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

 

 

タイトル

 

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

 

 

記事挿入

 

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

 

 

記事3が3段目

 

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

 

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

 

 

スポンサー広告

CSS形成パララックスデザインを導入する設置手順..その1

シリウスサイトをCSS記述のみでパララックスデザインへとカスタマイズする手順のご案内となります今回は記事カラム 4BOX、画像スペース 5BOXとフルサイズでコンテンツを増量したバージョンアップの解説となります作動スタイルは、こちらのサイト参照ここでは静的作動での動き?CSSで形成するだけでパララッ...

≫続きを読む

 

パララックスをサイト記事カラム内に導入..2

PC画面いっぱいの大きな画面ではなく、デフォルトサイト900px幅程度でparallax効果をサイトで表してみたい方は、HTMLテンプレートへの記述改編ではなく記事内に挿入すれば、それはそれなりに表示されます..当ページでは、DEMOで入れてますのでご参照ください...て、サイト全体を意味しない.....

≫続きを読む

 

動的作動なパララックススクロールデザイン構造を組み込む工程

パララックスデザインの視覚効果を向上させる手法として多く用いられる見せることに視点を置いた動的スタイルの実行は、CSS記述だけでは難易な構築ですが、jqueryを採用することでHTMlサイトでも容易に反映させることが可能となりました.....いらん記事でも冒頭では検索エンジン対応で致し方なく...で...

≫続きを読む

 

ハイソなパララックスデザイン

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

≫続きを読む

 

 

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

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