TOP

DEMOとソース

シリウスの記事内にスクリプトを採用しパララックス効果を演出するカスタマイズ..

 

ただし、静的では無く動的...画像が少しせり上がり...よく使わる手法です...
当サイトは他のスクリプトが影響して動きが...ややぎすぎすしていますがテストサイトでは
滑らかさに動きます... 静かに動く...以下でご確認ください..
https://www.affiliateno1.com/para3/

 

反映確認は、レスポンシブTP...新テンプレートでも確認済み

 

ただし、画像サイズ等での調整は面倒です...

 

ご注意
パソコン画面を狭めればスマートフォンでの表示がどんなものか?通例は確認できるはず
ですが、シリウスのプレビューとアップ画面では違いが出てしまいます...
さらにスマートフォン画面でも...?

 

ですので、パソコン画面を狭めても精度は確認できません..ので、常にスマートフォンで
レイアウト等ご確認ください...

 

 

尚、当説明はHTML等の理解できる方専用ですので採用に不安がある方は導入を
お控えください...
サポートは一切致しておりません
不明なことは、お買い求めになったサイトへ問い合わせてください...

 

 

すみません,,,前置きは飛ばして当ページのレイアウト参照

 

説明..ステップしますよ...

 

ここに記事書いていると読みずらいので、一番下へ飛んでください

 

記事をここに書く

 

 

 

 

 

 

 

 

 

 

記事2

 

記事をここに書く

 

ページ記事3

記事をここに書く

 

 

では、3ステップで行きます

 

シリウスの記事内に以下コードを張り付けてください

 

このあたりから行きますね
以下コードの上に記事を書けます..

 

何も書かなければ、画像が一番上に位置します..

 

<div class="bg-holder pic1" data-width="3000" data-height="3000">
<section>
<div class="content">
<% textTitle1 %><!-- ★★ -->
<% textBody1 %>
</section></div></div>
記事をここに書く  

 

 

 

 

 

<div class="bg-holder pic2" data-width="3000" data-height="3000">

 

<section>
<div class="content">
<% textTitle2 %><!-- ★★ -->
<% textBody2 %>
</section>
<div class="content">
</div>
</div>
<h3>記事2</h3>

 

記事をここに書く

 

 

 

<div class="bg-holder pic3" data-width="3000" data-height="3000">
<section>
<div class="content">
<% textTitle3 %><!-- ★★ -->
<% textBody3 %>
</section>
<div class="content">

 

</div>
</div>
<h3>ページ記事3</h3>
記事をここに書く

 

 

 

ここまで

 

 

次、ステップ2

 

スクリプトを取り付けるHTMLの一番下に貼り付けます

 

せり上がりをより静的に近いよう指定してはおりますが、動的にするなら
friction: 0.1  の1数値を上げてみて調整ください..

 

 

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

 

 

 

<script>
!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>

 

 

 

次、ステップ3

 

スタイルシートCSS追加ですが、ユーザー指定スタイルへ張り付ければ完了します..]
また、エントリーPでしたら、スタイルの割込みに貼り付ければ、複数のページで異なる
反映設定ができます。

 

画像コードは、PCとスマホで異なるものでもOK//
画像は、当サーバーに保管するものが確認のため読み込まれますが、書き換えてください。

 

 

/*パララックスA */

 

html,
body {
width: 100%;
height: 100%;

 

}

 

 

 

body {
font-family: "lato", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.778;
color: #222;
margin: 0;
top: 300px;

 

 

}

 

 

 

.header h2 ,#header .title {
width: 700px;
font-size: 46px;
line-height: 56px;
position: relative;
left: 30px;
top: 300px;

 

 

 

}

 

 

 

.header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
color: #FFFFFF;
text-decoration: none;

 

 

 

}

 

 

 

h1, h2, h3, h4, h5, h6 {
font-weight: 900;
}

 

 

 

/* Backgrounds */

 

 

 

.bg-holder {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
color: #fff;
}

 

 

 

.bg-holder .content {
color: #fff;
text-align: center;
position: relative;
top: 50%;

 

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

 

 

 

 

 

h2 {
font-size: 42px;
line-height: 1.5;
}

 

//PC画像//

 

.pic1 {
background-image: url('https://www.affiliateno1.com/img/beauty-1319951_1920.jpgg');  
}

 

 

 

.pic2 {

 

background-image: url('https://www.affiliateno1.com/img/27517cf056734bc9b4d5f81e0ee065e0_m.jpg');
}

 

 

 

.pic3 {
background-image: url('https://www.affiliateno1.com/img/pexels-photo-24507.jpg'); 
}

 

 

 

@media (max-width: 2000px) {

 

//スマホ画像//
.pic1 {
background-image: url('https://www.affiliateno1.com/img/beauty-1319951_1920.jpg'); 

 

 

}
.pic2 {
background-image: url('https://www.affiliateno1.com/img/pexels-photo-24507.jpg');

 

}
.pic3 {
background-image: url('https://www.affiliateno1.com/img/27517cf056734bc9b4d5f81e0ee065e0_m.jpg'); 
}
}

 

 

 

/* Content &Sections */

 

section {
padding: 28px;
}

 

 

section .content {
margin: 0 auto;
max-width: 1000px;  //記事幅//
}

 

 

section .content{
_height:10px;
padding-top: 20px;
padding-bottom: 20px;
min-height:200px;
margin-top:10px;

 

 

 

background-repeat: repeat-y;
background-position: left;
margin-top:;
}

 

 

.content h2 {
width: 700px;
font-size: 32px;
line-height: 26px;
position: relative;
left: 200px;
top: 200px;
}

 

 

@media screen and (max-width: 640px) {
.content h2 {
width: 100px;
font-size: 32px;
line-height: 26%;
position: relative;
left: 200%;
top: 200%;
}
}

 

@media screen and (max-width: 640px) {

 

section {
padding: 2px;
}

 

 

section .content {
margin: 0 auto;
max-width: 1000px;  //記事幅//
}

 

 

section .content{
_height:10px;
padding-top: 0px;
padding-bottom: 20px;
min-height:200px;
margin-top:90%;
}
}

 

 

 

section p {
margin: 10;
}

 

 

 

section p + p {
text-indent: 2em;
}

 

 

 

section + hr {
border: 0;
border-top: 1px solid #ccc;
height: 0;
}

 

 

 

/* Intro */

 

.intro h1 {
margin: 0;
font-size: 48px;
line-height: 1.5;
}

 

.intro p {
margin: 0;
font-size: 24px;
}

 

 

ここまで

 

表示確認できたと思います...
詳細は後程追加します

 

 

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