Pure CSS Parallax

http://codepen.io/keithclark/pen/JycFw

■

Slide 1

パラグラフ　パラグラフ

Slide 2

パラグラフ　パラグラフ

Slide 3

パラグラフ　パラグラフ

The End

view source

JavaScript

{}

CSS

#target{
  position:absolute;
  display:inline-block;
  width:80px;
  left:80px;
  background-color:#ff0000;
  transform: translateZ(-1px) scale(4);
}



html {
  height: 100%;
  overflow: hidden;
}
 
body {
  margin:0;
  padding:0;
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: Nunito;
}



.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
  transform-style: inherit;
}
 
.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}
 
.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
 
.slide:nth-child(2n) .title {
  margin-left: 0;
  margin-right: auto;
}
 
.slide:nth-child(2n+1) .title {
  margin-left: auto;
  margin-right: 0;
}
 
.slide,.slide:before {
  background: 50% 50% / cover;
}







#title {
  background-image: -webkit-linear-gradient( top, #000000, #999999 );
   background-attachment: fixed;
}
 
#slide1:before {
  background-image: -webkit-linear-gradient( top, #990000, #999999 );
}
 
#slide2 {
  background-image: -webkit-linear-gradient( top, #009900, #999999 );
  background-attachment: fixed;
}
#slide3:before {
  background-image: -webkit-linear-gradient( top, #000099, #999999 );
}
#slide4 {
  background: #222;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-css/css-parallax/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。