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


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

    関連記事


     スポンサーリンク

    parallaxをサイト幅に合わせ設置する解説

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

     

    当ページでは、DEMOで入れてますのでご参照ください...
    て、サイト全体を意味しない..個別のエントリーページでも可能なんですね
    (スタイルシートの割り込みにCSSを追加すれば可能)

     

     

    では、シリウスのサイト幅に合わせて、parallaxを設定します

     


     

    今回は、サイト幅内、記事カラムに、parallaxを配置する手順ですが

     

    こちらで不明な箇所は、その1でご確認ください
    CSS形成パララックスデザインを導入する設置手順..その1

     

     

    記事内に置くとこんなスタイルに自動調整されるのですが、
    無理くり入れ込んだので多少ずれありです

     

    一番上はGIF画像です

     

     

    Parallax

     

     

    記事は記事カラム内で追記します

     

     

    今回は、すぐ使えるCSS記述をコピーしてHTMLとスタイルシートに
    張り付ければの二作業
    画像は小さくともサイトサイズに自動調整されますので3つ
    いいものお探しください

     

    Parallax-2

     

     

    ここも記事内追記

     

     

    Parallax-3

     

     

    記事内

     

    ここの位置は記事2に書いてます                                          

    ここのパララックスは、シリウス記事内に読み込まれるHTML記述を
    配置しているので記事内サイズで表示されています

     

    スタイルの割り込みを使いページ全体に表すこともできたのですが
    パララックスレイアウト以下にもう一つ通常サイトが現れる障害ありで
    断念

     

    後ほど、対応策は考えてみます

     

     

    ここは記事3に書いてます

    ここは記事3で追記しています

     


     

    記事内で表示させたい方は、当ページのソースを取り込んで
    不要なものだけ削除してください

     

    スタイルシート内の記載は、以下になります

     

    背景に使う画像コードに、3つ書き換えてください

     

    スタイルシートの一番下においてください

     

    div.parallax{
    height:300px;
    background-position: 90% 10%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

     

    }
    .content{
    padding:30px 0;

     

    }
    .box{
    max-width: 100%;
    margin: 0 auto;

     

    }

     

    .box2{
    max-width: 100%;
    margin: 0 auto;

     

    }

     

     

     

    .box h2{
    line-height: 600px;
    font-size: 50px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

     

    }
    .parallax_img_1{
    background:url(img/1a.png);

     

    }
    .parallax_img_2{

     

    background:url(img/71images_p.jpg);
    }

     

    .parallax_img_3{
    background:url(img/dscf0114.jpg);
    }

     

    ここまで、

     

     

     


     

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

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

    ≫続きを読む

     

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

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

    ≫続きを読む

     

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

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

    ≫続きを読む

     

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

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

    ≫続きを読む

     

     

     

     

    ページトップ
    CSS形成のみでパララックスをサイトに導入..その1
    シリウスサイトをパララックス仕様にカスタマイズ
    シリウスカスタマイズTOP

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