ddfullscreenslider.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. html.fssopen, html.fssopen body{ /* class added to HTML element when full screen slider is open to hide potential body scrollbars */
  2. width: 100%;
  3. height: 100%;
  4. top: 0;
  5. left: 0;
  6. margin: 0;
  7. overflow: hidden;
  8. }
  9. section.dd_fullscreenslider{
  10. position: fixed;
  11. left: 0;
  12. top: 0;
  13. width: 100%;
  14. height: 100%;
  15. z-index: 2000;
  16. font-size: 16px; /* base font size */
  17. visibility: visible;
  18. overflow: hidden;
  19. }
  20. div.slidewrapper{ /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */
  21. width: 100%;
  22. height: 100%;
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
  27. -moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */
  28. -webkit-transition: -webkit-transform 0.5s;
  29. transition: transform 0.5s;
  30. }
  31. ul.fssnav{ /* UL list dynamically added by script for Slider navigation */
  32. list-style: none;
  33. display: none;
  34. padding: 0;
  35. margin: 0;
  36. position: fixed;
  37. top: 50%; /* vertically center menu */
  38. right: 20px; /* distance from right edge of screen */
  39. transform: translateY(-50%); /* vertically center menu */
  40. }
  41. ul.fssnav li{
  42. margin-bottom: 15px;
  43. }
  44. ul.fssnav li a{
  45. text-decoration: none;
  46. border: 5px solid white; /* border color of nav links */
  47. border-radius: 50%;
  48. width: 10px; /* dimensions of nav links */
  49. height: 10px;
  50. display: block;
  51. position: relative;
  52. text-indent: -500px;
  53. outline: none;
  54. overflow: hidden;
  55. }
  56. ul.fssnav li a::after{ /* create "fill" element inside A */
  57. content: "";
  58. position: absolute;
  59. width: 100%;
  60. height: 100%;
  61. top: 100%;
  62. left: 0;
  63. background: white; /* color of "fill" element */
  64. transition: top 0.5s; /* transition for "fill up" effect */
  65. }
  66. ul.fssnav li.selected a::after{
  67. top: 0; /* fill up selected A element from bottom to top */
  68. }
  69. section.dd_fullscreenslider article.slide{ /* CSS for each slide */
  70. width: 100%;
  71. height: 100%;
  72. display: block;
  73. font-family: 'Lato', sans-serif; /* Use google font */
  74. font-size: 1.2em;
  75. line-height: 2em;
  76. color: white;
  77. overflow: hidden;
  78. -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
  79. -moz-box-sizing: border-box;
  80. z-index: 1000;
  81. -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
  82. }
  83. section.dd_fullscreenslider article.slide h2{ /* H2 Header inside each slide */
  84. font-size: 3em;
  85. margin: 0;
  86. line-height: 1.1em;
  87. letter-spacing: 3px;
  88. }
  89. section.dd_fullscreenslider article.slide .scrollable{ /* Assign this class to elements within a slide that should be scrollable */
  90. overflow: auto;
  91. }
  92. section.dd_fullscreenslider article.slide a{
  93. color: yellow;
  94. }
  95. section.dd_fullscreenslider article.slide:nth-of-type(2){ /* 2nd demo slide bgcolor */
  96. background: #22AFE2;
  97. }
  98. section.dd_fullscreenslider article.slide:nth-of-type(3){ /* 3rd demo slide bgcolor */
  99. background: #88D332;
  100. }
  101. section.dd_fullscreenslider article.slide:nth-of-type(4){ /* 4th demo slide bgcolor */
  102. background: #A36400;
  103. }
  104. section.dd_fullscreenslider div.closex{ /* Large x close button inside Slider */
  105. width: 50px;
  106. height: 50px;
  107. overflow: hidden;
  108. display: block;
  109. position: fixed;
  110. cursor: pointer;
  111. text-indent: -1000px;
  112. opacity: 0.8;
  113. z-index: 1001;
  114. top: 5px;
  115. right: 3px;
  116. }
  117. section.dd_fullscreenslider div.closex::before, section.dd_fullscreenslider div.closex::after{ /* render large x inside close button */
  118. content: "";
  119. display: block;
  120. position: absolute;
  121. width: 100%;
  122. height: 6px;
  123. background: white; /* color of x button */
  124. top: 50%;
  125. margin-top: -3px;
  126. -ms-transform: rotate(-45deg);
  127. -webkit-transform: rotate(-45deg);
  128. transform: rotate(-45deg);
  129. }
  130. section.dd_fullscreenslider div.closex::after{ /* render large cross inside close button */
  131. -ms-transform: rotate(-135deg);
  132. -webkit-transform: rotate(-135deg);
  133. transform: rotate(-135deg);
  134. }