記事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;
}

 

 

ここまで

 

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