API tools faq
paste
Guest User

Untitled

a guest
May 23rd, 2018
71
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.52 KB | None | 0 0
raw download clone embed print report
  1. .cb-slideshow,
  2. .cb-slideshow:after {
  3. position: fixed;
  4. width: 100%;
  5. height: 100%;
  6. top: 0px;
  7. left: 0px;
  8. z-index: 0;
  9. }
  10. .cb-slideshow:after {
  11. content: '';
  12. background: transparent url(../images/pattern.png) repeat top left;
  13. }
  14. .cb-slideshow li span {
  15. width: 100%;
  16. height: 100%;
  17. position: absolute;
  18. top: 0px;
  19. left: 0px;
  20. color: transparent;
  21. background-size: cover;
  22. background-position: 50% 50%;
  23. background-repeat: none;
  24. opacity: 0;
  25. z-index: 0;
  26. -webkit-backface-visibility: hidden;
  27. -webkit-animation: imageAnimation 36s linear infinite 0s;
  28. -moz-animation: imageAnimation 36s linear infinite 0s;
  29. -o-animation: imageAnimation 36s linear infinite 0s;
  30. -ms-animation: imageAnimation 36s linear infinite 0s;
  31. animation: imageAnimation 36s linear infinite 0s;
  32. }
  33. .cb-slideshow li div {
  34. z-index: 1000;
  35. position: absolute;
  36. bottom: 30px;
  37. left: 0px;
  38. width: 100%;
  39. text-align: center;
  40. opacity: 0;
  41. -webkit-animation: titleAnimation 36s linear infinite 0s;
  42. -moz-animation: titleAnimation 36s linear infinite 0s;
  43. -o-animation: titleAnimation 36s linear infinite 0s;
  44. -ms-animation: titleAnimation 36s linear infinite 0s;
  45. animation: titleAnimation 36s linear infinite 0s;
  46. }
  47. .cb-slideshow li div h3 {
  48. font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  49. font-size: 240px;
  50. padding: 0;
  51. line-height: 200px;
  52. color: rgba(169,3,41, 0.8);
  53. }
  54. .cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) }
  55. .cb-slideshow li:nth-child(2) span {
  56. background-image: url(../images/2.jpg);
  57. -webkit-animation-delay: 6s;
  58. -moz-animation-delay: 6s;
  59. -o-animation-delay: 6s;
  60. -ms-animation-delay: 6s;
  61. animation-delay: 6s;
  62. }
  63. .cb-slideshow li:nth-child(3) span {
  64. background-image: url(../images/3.jpg);
  65. -webkit-animation-delay: 12s;
  66. -moz-animation-delay: 12s;
  67. -o-animation-delay: 12s;
  68. -ms-animation-delay: 12s;
  69. animation-delay: 12s;
  70. }
  71. .cb-slideshow li:nth-child(4) span {
  72. background-image: url(../images/4.jpg);
  73. -webkit-animation-delay: 18s;
  74. -moz-animation-delay: 18s;
  75. -o-animation-delay: 18s;
  76. -ms-animation-delay: 18s;
  77. animation-delay: 18s;
  78. }
  79. .cb-slideshow li:nth-child(5) span {
  80. background-image: url(../images/5.jpg);
  81. -webkit-animation-delay: 24s;
  82. -moz-animation-delay: 24s;
  83. -o-animation-delay: 24s;
  84. -ms-animation-delay: 24s;
  85. animation-delay: 24s;
  86. }
  87. .cb-slideshow li:nth-child(6) span {
  88. background-image: url(../images/6.jpg);
  89. -webkit-animation-delay: 30s;
  90. -moz-animation-delay: 30s;
  91. -o-animation-delay: 30s;
  92. -ms-animation-delay: 30s;
  93. animation-delay: 30s;
  94. }
  95. .cb-slideshow li:nth-child(2) div {
  96. -webkit-animation-delay: 6s;
  97. -moz-animation-delay: 6s;
  98. -o-animation-delay: 6s;
  99. -ms-animation-delay: 6s;
  100. animation-delay: 6s;
  101. }
  102. .cb-slideshow li:nth-child(3) div {
  103. -webkit-animation-delay: 12s;
  104. -moz-animation-delay: 12s;
  105. -o-animation-delay: 12s;
  106. -ms-animation-delay: 12s;
  107. animation-delay: 12s;
  108. }
  109. .cb-slideshow li:nth-child(4) div {
  110. -webkit-animation-delay: 18s;
  111. -moz-animation-delay: 18s;
  112. -o-animation-delay: 18s;
  113. -ms-animation-delay: 18s;
  114. animation-delay: 18s;
  115. }
  116. .cb-slideshow li:nth-child(5) div {
  117. -webkit-animation-delay: 24s;
  118. -moz-animation-delay: 24s;
  119. -o-animation-delay: 24s;
  120. -ms-animation-delay: 24s;
  121. animation-delay: 24s;
  122. }
  123. .cb-slideshow li:nth-child(6) div {
  124. -webkit-animation-delay: 30s;
  125. -moz-animation-delay: 30s;
  126. -o-animation-delay: 30s;
  127. -ms-animation-delay: 30s;
  128. animation-delay: 30s;
  129. }
  130. /* Animation for the slideshow images */
  131. @-webkit-keyframes imageAnimation {
  132. 0% {
  133. opacity: 0;
  134. -webkit-animation-timing-function: ease-in;
  135. }
  136. 8% {
  137. opacity: 1;
  138. -webkit-transform: scale(1.05);
  139. -webkit-animation-timing-function: ease-out;
  140. }
  141. 17% {
  142. opacity: 1;
  143. -webkit-transform: scale(1.1);
  144. }
  145. 25% {
  146. opacity: 0;
  147. -webkit-transform: scale(1.1);
  148. }
  149. 100% { opacity: 0 }
  150. }
  151. @-moz-keyframes imageAnimation {
  152. 0% {
  153. opacity: 0;
  154. -moz-animation-timing-function: ease-in;
  155. }
  156. 8% {
  157. opacity: 1;
  158. -moz-transform: scale(1.05);
  159. -moz-animation-timing-function: ease-out;
  160. }
  161. 17% {
  162. opacity: 1;
  163. -moz-transform: scale(1.1);
  164. }
  165. 25% {
  166. opacity: 0;
  167. -moz-transform: scale(1.1);
  168. }
  169. 100% { opacity: 0 }
  170. }
  171. @-o-keyframes imageAnimation {
  172. 0% {
  173. opacity: 0;
  174. -o-animation-timing-function: ease-in;
  175. }
  176. 8% {
  177. opacity: 1;
  178. -o-transform: scale(1.05);
  179. -o-animation-timing-function: ease-out;
  180. }
  181. 17% {
  182. opacity: 1;
  183. -o-transform: scale(1.1);
  184. }
  185. 25% {
  186. opacity: 0;
  187. -o-transform: scale(1.1);
  188. }
  189. 100% { opacity: 0 }
  190. }
  191. @-ms-keyframes imageAnimation {
  192. 0% {
  193. opacity: 0;
  194. -ms-animation-timing-function: ease-in;
  195. }
  196. 8% {
  197. opacity: 1;
  198. -ms-transform: scale(1.05);
  199. -ms-animation-timing-function: ease-out;
  200. }
  201. 17% {
  202. opacity: 1;
  203. -ms-transform: scale(1.1);
  204. }
  205. 25% {
  206. opacity: 0;
  207. -ms-transform: scale(1.1);
  208. }
  209. 100% { opacity: 0 }
  210. }
  211. @keyframes imageAnimation {
  212. 0% {
  213. opacity: 0;
  214. animation-timing-function: ease-in;
  215. }
  216. 8% {
  217. opacity: 1;
  218. transform: scale(1.05);
  219. animation-timing-function: ease-out;
  220. }
  221. 17% {
  222. opacity: 1;
  223. transform: scale(1.1);
  224. }
  225. 25% {
  226. opacity: 0;
  227. transform: scale(1.1);
  228. }
  229. 100% { opacity: 0 }
  230. }
  231. /* Animation for the title */
  232. @-webkit-keyframes titleAnimation {
  233. 0% {
  234. opacity: 0;
  235. -webkit-transform: translateY(200px);
  236. }
  237. 8% {
  238. opacity: 1;
  239. -webkit-transform: translateY(0px);
  240. }
  241. 17% {
  242. opacity: 1;
  243. -webkit-transform: scale(1);
  244. }
  245. 19% { opacity: 0 }
  246. 25% {
  247. opacity: 0;
  248. -webkit-transform: scale(10);
  249. }
  250. 100% { opacity: 0 }
  251. }
  252. @-moz-keyframes titleAnimation {
  253. 0% {
  254. opacity: 0;
  255. -moz-transform: translateY(200px);
  256. }
  257. 8% {
  258. opacity: 1;
  259. -moz-transform: translateY(0px);
  260. }
  261. 17% {
  262. opacity: 1;
  263. -moz-transform: scale(1);
  264. }
  265. 19% { opacity: 0 }
  266. 25% {
  267. opacity: 0;
  268. -moz-transform: scale(10);
  269. }
  270. 100% { opacity: 0 }
  271. }
  272. @-o-keyframes titleAnimation {
  273. 0% {
  274. opacity: 0;
  275. -o-transform: translateY(200px);
  276. }
  277. 8% {
  278. opacity: 1;
  279. -o-transform: translateY(0px);
  280. }
  281. 17% {
  282. opacity: 1;
  283. -o-transform: scale(1);
  284. }
  285. 19% { opacity: 0 }
  286. 25% {
  287. opacity: 0;
  288. -o-transform: scale(10);
  289. }
  290. 100% { opacity: 0 }
  291. }
  292. @-ms-keyframes titleAnimation {
  293. 0% {
  294. opacity: 0;
  295. -ms-transform: translateY(200px);
  296. }
  297. 8% {
  298. opacity: 1;
  299. -ms-transform: translateY(0px);
  300. }
  301. 17% {
  302. opacity: 1;
  303. -ms-transform: scale(1);
  304. }
  305. 19% { opacity: 0 }
  306. 25% {
  307. opacity: 0;
  308. -webkit-transform: scale(10);
  309. }
  310. 100% { opacity: 0 }
  311. }
  312. @keyframes titleAnimation {
  313. 0% {
  314. opacity: 0;
  315. transform: translateY(200px);
  316. }
  317. 8% {
  318. opacity: 1;
  319. transform: translateY(0px);
  320. }
  321. 17% {
  322. opacity: 1;
  323. transform: scale(1);
  324. }
  325. 19% { opacity: 0 }
  326. 25% {
  327. opacity: 0;
  328. transform: scale(10);
  329. }
  330. 100% { opacity: 0 }
  331. }
  332. /* Show at least something when animations not supported */
  333. .no-cssanimations .cb-slideshow li span{
  334. opacity: 1;
  335. }
  336. @media screen and (max-width: 1140px) {
  337. .cb-slideshow li div h3 { font-size: 100px }
  338. }
  339. @media screen and (max-width: 600px) {
  340. .cb-slideshow li div h3 { font-size: 50px }
  341. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!