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


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    動的作動スタイルのパララックスデザインテンプレート

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

     

    ...いらん記事でも冒頭では検索エンジン対応で致し方なく...です

     

     

    シリウスを動的な作動を見せるパララックスデザインテンプレートへと
    カスタマイズする工程をご案内します..

     

    作動のDEMOサイトはこちです..が、レスポンシブTPに導入の際は戻りボタンに
    障害あり...対処CSSは完了してますが、詳細及びデモスタイルをご確認ください...
    http://www.affiliateno1.com/parallax_demo1/

     

     

    さて、今回ご案内するパララックスデザインはスタンダードなデザイン...

     

    縦スライド

     

    画像 記事 画像 記事画像とつながります..

     

    スクロールの際、画像が上にせり上がるという多くのサイトで
    採用されている形状となります..

     

     

    事前説明

     

    jquery

     

    jquery採用と言ってますが、サーバーにjqueryを入れずとも作動するよう
    配布HTML記載にjqueryは、含めてございます..

     

    試しに、シリウスの新規サイトを作ってCSSを入れてみてください..

     

    MTML内記載の呼び出しコードは、不要としないでください
    https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
    を削除すると動かなくなりますので削除しないでください

     

    jqueryがもし呼び込まれない場合は、せり上がりが見られないだけで
    通常のCSS掲載の作動はしますが..
    とりあえずパララックスデザインコード組み込んでせり上がりが見られないときは、
    jqueryダウンロードしてサーバーに入れてください..

     

    ダウンロード
    https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

     


     

    画像の用意

     

    画像は、DEMOでご確認のように3つ使いますので、パソコン用3つ、
    スマートフォン用3つで計6つをCSSに入れ込みますが、どちらも同じ画像で
    よいとするなら3つでも構いません

     

    画像は300PXサイズであっても、パソコン画面いっぱいに綺麗に
    自動拡張されますが低画質の場合は粗が見られます..
    できる限りは大きめで....
    逆にスマートフォンでは自動縮小します..

     

    画像3段なら記事も3段となります
    記事挿入について
    ここ大事
    ここの解説は、お隣のCSS形成のパララックスデザインページと
    ほとんど同じ記載法なのであいすみませんが、以下で他の詳細を
    含めてご確認願います..シリウス専用にソースは書き換え済みなので..
    CSS形成パララックスデザインを導入する設置手順..その1

     

    同じような記事を書くとすぐに検索順位が下がってしまう事情有りで
    すみません..

     

    異なることは、1記事が多くなると 2記事の縦サイズが余裕なく
    狭まります..(CSS指示で対処は可能)

     

     

    記事挿入で、はじめの行の頭が、ヒトマスずれます

     

    以下行のようにです
     などは家の中も湿っぽくなり不快感を感じていると
    などは家の中も湿っぽくなり不快感を感じていると

     

    対処法
    ここ大事
    操作画面で、通常はPタグ改行が最下部のメニューで指定されえているかと
    思いますが、HTMLを大賀場に変えたので文字列にずれが見られます...
    BRタグ改行に変えることで正常に整列します…

     

    記事背景カラー

     

    記事背景は、シリウス機能で指定する背景カラーが表示されます
    画像と画像の間にある記事書くとこですよ...

     

    背景を画像にすると画像が現れるということ

     


     

    HTMLテンプレート内書き換え記述

     

    CSS形成パララックスデザインと同じ位置に組み込みます

     

    以下記述は、画像上のテキスト以外、書き換え無しでOK

     

    bodyより下へ

     

     

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

     

     

    <% if:siteMode(normal) %>
    <!-- ★ヘッダーここから★ -->
    <div class="bg-holder pic1" data-width="1024" data-height="768">

     

    <div class=header h2>
    <center><% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %></center>
    <% pageDescription %>
    </div>
    </div>
    <!-- ★ヘッダーここまで★ -->

     

     

     

    <section>
    <div class="content">
    <% textTitle1 %><!-- ★記事3に書く★ -->
    <% 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>

     

    <section>
    <div class="content">
    <% textTitle4 %>
    <% freeSpace2 %><!-- ★フリースペース★ -->
    <% entryList_n | tag_replace(h3,h4) %><!-- ★エントリー表示★ -->
    <% textBody4 %>
    </div>
    </section>

     

     

     

    <!-- ★フッターここから★ -->
    <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>
    <script>

     

    </div>
    </div>
    ここまでを入れ替え

     

    </body>
    </html>

     

     


     

    エントリ―記事一覧を表示する記述ですが

     

    最新記事 カテゴリー一覧をを表示する際は、
    以下に書き換えてください

     

    トップHTML用呼び出しコード
    <% whatsNew | addRound | tag_insert(div id="whatsnew") %>

     

    カテゴリ―呼び出し記載は以下
    <% categoryListTitle | tag_insert(h3) %>

     

    エントリー呼び出し記述
    <% entryList_n | tag_replace(h3,h4) %>

     

     

    画像上のテキスト

     

    2段 3段目の画像の左端に表示されるテキストで、
    ほとんど必要ないんですが、テキストを1文字でも入れなければ
    画像が表示されなくなります

     

    イメージテキストでも、記号でもよいので文字入れしてください

     

    <h2>画像上テキスト</h2>

     


     

    記事幅、レスポンシブで読み込まれるよう記述追加
    ご注意...ここの解説はシリウスのデフォルトテンプレートでは必要なのですが、
    レスポンシブテンプレートでしたら追加不要の項目です..

     

    記事幅は、900pxにしてますが、狭くする際は改行してください
    レスポンシブ作動で、スマ―トフォン閲覧ではレイアウトは縮小されますが
    MTML headへの検索エンジンに対するスマートフォンサイトであることを
    伝える指令記述はこちらページを参照にmetaの近くに入れ込んでください
    シリウス2カラムテンプレート レスポンシブデザイン設定方法

     

    指令記述
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" media="all" type="text/css" href="<% pageDepth %>/styles.css" />

     

    ここまで...デフォルトテンプレート対応でした..

     


     

    スタイルシート

     

    画像コードの指定行は6つありますが、パソコン表示用が3

     

    スマホサイズに自動縮小が3で

     

    上覧がスマホ用画像

     

    下覧がパソコン用

     

    画像コードを書き換えてください

     

     

     

    ヘッダーのタイトルカラーは、シリウス操作でOK
    文字サイズもシリウス操作でOK

     

    記事幅はここで書き換え

     

    あちこちいじりまわしているんで、あまり改行はせずとも
    大丈夫かと思います

     

     

    スタイルシートへの追加行
    スタイルシートの一番下へ貼り付けてください

     

     

     

    ここから

     

    /*パララックスA */

     

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

     

     

     

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

     

     

     

    }

     

     

     

    .header h2 ,#header .title {
    width: 700px;
    font-size: 56px;
    line-height: 26px;
    position: relative;
    left: 30px;
    top: 300px;
    <% pageTitleFontSize %>
    <% pageTitlePlace %>

     

     

     

    }

     

     

     

    .header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
    color: #6A8902;
    text-decoration: none;
    <% pageTitleColor %>

     

     

     

    }

     

     

     

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

     

     

     

    .pic1 {
    background-image: url('img/pexels-photo-52065.jpg'); スマホ画像
    }

     

     

     

    .pic2 {
    background-image: url('img/nature-sunset-person-woman.jpg'); スマホ画像
    }

     

     

     

    .pic3 {
    background-image: url('img/pexels-photo-11746.jpg'); スマホ画像
    }

     

     

     

    @media (min-width: 768px) {
    .pic1 {
    background-image: url('img/pexels-photo-52065.jpg');   PC画像
    }
    .pic2 {
    background-image: url('img/nature-sunset-person-woman.jpg');   PC画像
    }
    .pic3 {
    background-image: url('img/pexels-photo-11746.jpg');   PC画像
    }
    }

     

     

     

     

     

    /* Content &Sections */

     

     

     

    section {
    padding: 48px;
    }

     

     

     

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

     

     

     

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

     

     

     

    background-repeat: repeat-y;
    background-position: left;
    margin-top:<% topMenuMargin(47,0) %>;
    }

     

     

     

     

    .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: 700px;
    font-size: 32px;
    line-height: 26px;
    position: relative;
    left: 50px;
    top: 200px;
    }
    }

     

     

     

     

     

     

    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;

     

    }

     

    ここまで

     

    .....

     

    PC用画像だけでも入れてみると反映は確認いただけます

     


     

    2017 0704
    CSSは、シリウス配布のレスポンシブTPでも作動は確認できております
    修正として、2段,3段画像に表示されるテキストの左よせを解消いたしました
    left: 400px;ですね、ただし好みで調整する際は数値変更...

     

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

     

    しかし、スマートフォンでの閲覧でテキスト位置が固定されていて
    文字隠れを起こしてしまう障害がありまして、レスポンシブコード追加で
    何とか...

     

    スマートフォンでは、小さく左寄せするよう指示改変
    @media screen and (max-width: 640px) {
    .content h2 {
    width: 700px;
    font-size: 32px;
    line-height: 26px;
    position: relative;
    left: 50px;
    top: 200px;
    }
    }

     

    気が付くことありましたら再追記いたしますね

     


     

     

    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テンプレートをハイソな高級感をイメージしたパララックスデザインスタイルへカスタマイズしてみましょう