javascript.fullPage.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. /**
  2. * fullPage 1.4.5
  3. * https://github.com/alvarotrigo/fullPage.js
  4. * MIT licensed
  5. *
  6. * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
  7. */
  8. html, body {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. #superContainer {
  13. height: 100%;
  14. position: relative;
  15. }
  16. .section {
  17. position: relative;
  18. -webkit-box-sizing: border-box;
  19. -moz-box-sizing: border-box;
  20. box-sizing: border-box;
  21. }
  22. .slide {
  23. float: left;
  24. }
  25. .slide, .slidesContainer {
  26. height: 100%;
  27. display: block;
  28. }
  29. .slides {
  30. height: 100%;
  31. overflow: hidden;
  32. position: relative;
  33. -webkit-transition: all 0.3s ease-out;
  34. -moz-transition: all 0.3s ease-out;
  35. -o-transition: all 0.3s ease-out;
  36. transition: all 0.3s ease-out;
  37. }
  38. .section.table, .slide.table {
  39. display: table;
  40. width: 100%;
  41. }
  42. .tableCell {
  43. display: table-cell;
  44. vertical-align: middle;
  45. width: 100%;
  46. height: 100%;
  47. }
  48. .slidesContainer {
  49. float: left;
  50. position: relative;
  51. }
  52. .controlArrow {
  53. position: absolute;
  54. top: 50%;
  55. cursor: pointer;
  56. width: 0;
  57. height: 0;
  58. border-style: solid;
  59. margin-top: -38px;
  60. }
  61. .controlArrow.prev {
  62. left: 15px;
  63. width: 0;
  64. border-width: 38.5px 34px 38.5px 0;
  65. border-color: transparent #fff transparent transparent;
  66. }
  67. .controlArrow.next {
  68. right: 55px;
  69. width: 74px;
  70. height: 74px;
  71. border-radius: 50%;
  72. border: 0;
  73. opacity: .5;
  74. background: url(../images/next.png) center center no-repeat;
  75. background-size:100% ;
  76. top: 50%;
  77. /*border-width: 38.5px 0 38.5px 34px;
  78. border-color: transparent transparent transparent #fff;*/
  79. }
  80. .scrollable {
  81. overflow: scroll;
  82. }
  83. .easing {
  84. -webkit-transition: all 0.7s ease-out;
  85. -moz-transition: all 0.7s ease-out;
  86. -o-transition: all 0.7s ease-out;
  87. transition: all 0.7s ease-out;
  88. }
  89. #fullPage-nav {
  90. position: fixed;
  91. z-index: 100;
  92. margin-top: -32px;
  93. top: 50%;
  94. opacity: 1;
  95. }
  96. #fullPage-nav.right {
  97. right: 17px;
  98. }
  99. #fullPage-nav.left {
  100. left: 17px;
  101. }
  102. .fullPage-slidesNav {
  103. position: absolute;
  104. z-index: 4;
  105. left: 50%;
  106. opacity: 1;
  107. }
  108. .fullPage-slidesNav.bottom {
  109. bottom: 17px;
  110. }
  111. .fullPage-slidesNav.top {
  112. top: 17px;
  113. }
  114. #fullPage-nav ul,
  115. .fullPage-slidesNav ul {
  116. margin: 0;
  117. padding: 0;
  118. }
  119. #fullPage-nav li,
  120. .fullPage-slidesNav li {
  121. display: block;
  122. width: 14px;
  123. height: 13px;
  124. margin: 7px;
  125. position:relative;
  126. }
  127. .fullPage-slidesNav li {
  128. display: inline-block;
  129. }
  130. #fullPage-nav li a,
  131. .fullPage-slidesNav li a {
  132. display: block;
  133. position: relative;
  134. z-index: 1;
  135. width: 100%;
  136. height: 100%;
  137. cursor: pointer;
  138. text-decoration: none;
  139. }
  140. #fullPage-nav li .active span,
  141. .fullPage-slidesNav .active span {
  142. background: #333;
  143. }
  144. #fullPage-nav span,
  145. .fullPage-slidesNav span {
  146. top: 2px;
  147. left: 2px;
  148. width: 8px;
  149. height: 8px;
  150. border: 1px solid #000;
  151. background: rgba(0, 0, 0, 0);
  152. -webkit-border-radius: 50%;
  153. -moz-border-radius: 50%;
  154. border-radius: 50%;
  155. position: absolute;
  156. z-index: 1;
  157. }
  158. .fullPage-tooltip {
  159. position: absolute;
  160. color: #fff;
  161. font-size: 14px;
  162. font-family: arial, helvetica, sans-serif;
  163. top: -2px;
  164. }
  165. .fullPage-tooltip.right {
  166. right: 20px;
  167. }
  168. .fullPage-tooltip.left {
  169. left: 20px;
  170. }