ホーム エクスプローラ ヘルプ
サインイン
bachir
/
lamine_wp
3
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ツリー: a8838049a7
ブランチ タグ
lamine_wp
/
node_modules
/
rellax
/
tests
/
percentage.html

percentage.html 6.0 KB
履歴 Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. 	<meta charset="UTF-8">
    5. 

  5. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 

  7. 	<title></title>
    8. 

  8. 	<style>
    9. 

  9. 		html, body{
    10. 

  10. 			color: #223;
    11. 

  11. 			font-size: 21pt;
    12. 

  12. 			margin: 0; padding: 0;
    13. 

  13. 		}
    14. 

  14. 		nav{
    15. 

  15. 			font-size: 21pt;
    16. 

  16. 			line-height: 1.5em;
    17. 

  17. 			position: fixed;
    18. 

  18. 			bottom: 0; left: 0;
    19. 

  19. 		}
    20. 

  20. 		nav a{ color: inherit; }
    21. 

  21. 

  22. 		.col{
    23. 

  23. 			text-align: center;
    24. 

  24. 			width: 50%;
    25. 

  25. 			float: left;
    26. 

  26. 			box-sizing: border-box;
    27. 

  27. 		}
    28. 

  28. 

  29. 		h4{ text-align: center;}
    30. 

  30. 

  31. 		.container{
    32. 

  32. 			outline: 1px solid #eed;
    33. 

  33. 			font-size: 42pt;
    34. 

  34. 			padding: 37.5vh 12.5vw;
    35. 

  35. 		}
    36. 

  36. 		.block{
    37. 

  37. 			background: #223;
    38. 

  38. 			color: #eed;
    39. 

  39. 			line-height: 25vh;
    40. 

  40. 			text-align: right;
    41. 

  41. 			padding: 0 42pt;
    42. 

  42. 			position: relative;
    43. 

  43. 		}
    44. 

  44. 		span{
    45. 

  45. 			background: #eed;
    46. 

  46. 			color: #223;
    47. 

  47. 			line-height: 25vh;
    48. 

  48. 			text-align: left;
    49. 

  49. 			padding: 0 42pt;
    50. 

  50. 			display: block;
    51. 

  51. 			width: 50%;
    52. 

  52. 			position: absolute;
    53. 

  53. 			top: 0; left: 0;
    54. 

  54. 			box-sizing: border-box;
    55. 

  55. 		}
    56. 

  56. 	</style>
    57. 

  57. </head>
    58. 

  58. <body>
    59. 

  59. 	<h4>data-rellax-speed = default</h4>
    60. 

  60. 	<section>
    61. 

  61. 		<div class="col">
    62. 

  62. 			<br>With Percentage (0.5) <br><br>
    63. 

  63. 			<div id="21" class="container"><div class="block">#1<span class="rellax" data-rellax-percentage="0.5">#1</span></div></div>
    64. 

  64. 			<div id="22" class="container"><div class="block">#2<span class="rellax" data-rellax-percentage="0.5">#2</span></div></div>
    65. 

  65. 			<div id="23" class="container"><div class="block">#3<span class="rellax" data-rellax-percentage="0.5">#3</span></div></div>
    66. 

  66. 			<div id="24" class="container"><div class="block">#4<span class="rellax" data-rellax-percentage="0.5">#4</span></div></div>
    67. 

  67. 			<div id="25" class="container"><div class="block">#5<span class="rellax" data-rellax-percentage="0.5">#5</span></div></div>
    68. 

  68. 			<div id="26" class="container"><div class="block">#6<span class="rellax" data-rellax-percentage="0.5">#6</span></div></div>
    69. 

  69. 		</div>
    70. 

  70. 		<div class="col">
    71. 

  71. 			<br>Without Percentage <br><br>
    72. 

  72. 			<div id="21" class="container"><div class="block">#1<span class="rellax">#1</span></div></div>
    73. 

  73. 			<div id="22" class="container"><div class="block">#2<span class="rellax">#2</span></div></div>
    74. 

  74. 			<div id="23" class="container"><div class="block">#3<span class="rellax">#3</span></div></div>
    75. 

  75. 			<div id="24" class="container"><div class="block">#4<span class="rellax">#4</span></div></div>
    76. 

  76. 			<div id="25" class="container"><div class="block">#5<span class="rellax">#5</span></div></div>
    77. 

  77. 			<div id="26" class="container"><div class="block">#6<span class="rellax">#6</span></div></div>
    78. 

  78. 		</div>
    79. 

  79. 	</section>
    80. 

  80. 

  81. 	<!-- /// -->
    82. 

  82. 	<h4>data-rellax-speed = 2</h4>
    83. 

  83. 	<section>
    84. 

  84. 		<div class="col">
    85. 

  85. 			<br>With Percentage (0.5) <br><br>
    86. 

  86. 			<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#1</span></div></div>
    87. 

  87. 			<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#2</span></div></div>
    88. 

  88. 			<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#3</span></div></div>
    89. 

  89. 			<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#4</span></div></div>
    90. 

  90. 			<div class="container"><div class="block">#5<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#5</span></div></div>
    91. 

  91. 			<div class="container"><div class="block">#6<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#6</span></div></div>
    92. 

  92. 		</div>
    93. 

  93. 		<div class="col">
    94. 

  94. 			<br>Without Percentage <br><br>
    95. 

  95. 			<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="2">#1</span></div></div>
    96. 

  96. 			<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="2">#2</span></div></div>
    97. 

  97. 			<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="2">#3</span></div></div>
    98. 

  98. 			<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="2">#4</span></div></div>
    99. 

  99. 			<div class="container"><div class="block">#5<span class="rellax" data-rellax-speed="2">#5</span></div></div>
    100. 

  100. 			<div class="container"><div class="block">#6<span class="rellax" data-rellax-speed="2">#6</span></div></div>
    101. 

  101. 		</div>
    102. 

  102. 	</section>
    103. 

  103. 

  104. 	<!-- /// -->
    105. 

  105. 	<h4>Misc</h4>
    106. 

  106. 	<section>
    107. 

  107. 		<div class="col">
    108. 

  108. 			<br>With Percentage (0.5) <br><br>
    109. 

  109. 			<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="1" data-rellax-percentage="0.5">#1</span></div></div>
    110. 

  110. 			<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="-1" data-rellax-percentage="0.5">#2</span></div></div>
    111. 

  111. 			<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="4" data-rellax-percentage="0.5">#3</span></div></div>
    112. 

  112. 			<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="-4" data-rellax-percentage="0.5">#4</span></div></div>
    113. 

  113. 			<div class="container"><div class="block">#5<span class="rellax" data-rellax-speed="0" data-rellax-percentage="0.5">#5</span></div></div>
    114. 

  114. 			<div class="container"><div class="block">#6<span class="rellax" data-rellax-speed="-10" data-rellax-percentage="0.5">#6</span></div></div>
    115. 

  115. 		</div>
    116. 

  116. 		<div class="col">
    117. 

  117. 			<br>Without Percentage <br><br>
    118. 

  118. 			<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="1">#1</span></div></div>
    119. 

  119. 			<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="-1">#2</span></div></div>
    120. 

  120. 			<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="0">#3</span></div></div>
    121. 

  121. 			<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="0">#4</span></div></div>
    122. 

  122. 			<div class="container"><div class="block">#5<span class="rellax" data-rellax-speed="0">#5</span></div></div>
    123. 

  123. 			<div class="container"><div class="block">#6<span class="rellax" data-rellax-speed="0">#6</span></div></div>
    124. 

  124. 		</div>
    125. 

  125. 	</section>
    126. 

  126. 

  127. 	<!-- Scripts -->
    128. 

  128. 	<script src="../rellax.js"></script>
    129. 

  129. 	<script>
    130. 

  130. 		var rellax = new Rellax();
    131. 

  131. 	</script>
    132. 

  132. </body>
    133. 

  133. </html>
    134.