So-net無料ブログ作成

パララックスを使ったホームページ [ネットビジネス]

パララックスとは?

 


 
スクロールした時に背景だけスクロールの速度を変えたり、要素ごとに異なる速度でスクロール表示させる効果パララックス(parallax)といいます。

 

パララックスを使ったホームページ


勉強のためにパララックスを使ったWebサイトを作成しました。

https://piyo2.click/

 

 

パララックス実装に必要な知識は?



    • jQuery・JavaScriptの知識

 

    • レイヤー(階層構造)の概念



この2つの知識が必要になります。
 
WordPressでパララックスを実現する時は、有料のWordPressテーマ grazioso があります。
僕はパララックスを実装する時は、HTML & CSS でトップページを作っています。

 

パララックスのメリットとデメリット


パララックスを実装したWebサイトのメリットは、訪問者に好印象・インパクトを与えられますが、一方、Webサイトが重くなるというデメリットもあります。

情報を詰め込みすぎてWebサイトが重くなりすぎないように、コンテンツの構成を考えてください。

パララックスを実装する


パララックスを実装するにあたり、「Vegas2」を使用しました。


vegas2


 
Vegas2 に関する情報は、 TRANSITIONS で取得できます。


vegas.min.css、vegas.min.css と vegas.js それから jquery-2.1.3.min.js を外部ファイルとして記述します。

<link rel="stylesheet" href="css/vegas.min.css">
<script src="js/vegas.min.js"></script>
<script> $(function(){ $('#ほげほげ').vegas({
slides:[
    { src: 'images/mainvisual01.jpg' },
    { src: 'images/mainvisual02.jpg' },
    { src: 'images/mainvisual03.jpg' } ],
    delay: 7000,
    timer: false,
    transitionDuration: 3000
    });
});
</script>



スポンサーリンク






nice!(0) 
共通テーマ:moblog

nice! 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。