Advertisement
marshallsmyth

Marquee Gallery Code

Feb 15th, 2023
1,659
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.27 KB | None | 0 0
  1.  
  2.  
  3. <body><style> @import url(https://fonts.googleapis.com/css?family=Handlee|Macondo);
  4. ::-webkit-scrollbar { width:13px; } ::-webkit-scrollbar-track {background:#ff0; }
  5. ::-webkit-scrollbar-thumb { border-radius:2px;background:lightgreen; }
  6.  
  7. body {background:url("https://ueestatic.fullerton.edu/static/arbo/images/biomes/temperate.jpg");background-size:100% 100%;
  8. background-repeat:no-repeat;overflow:auto;width:100%;height:100%;position:fixed; }
  9.  
  10.  
  11.  
  12. #MarqueeBox{
  13. position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
  14. width: 380px;
  15. height: 590px;
  16. padding: 10px 20 0 0;
  17. border: 3px solid #FF0110;
  18. background-color: #0174;
  19. background-image: url("");
  20. z-index: 5;   font-family:handlee; color:#050; font-size:44px;padding:-44px 0 0 0;
  21. }
  22.  
  23. .Marquee {
  24.  height: 482px;
  25.  width: 400px;
  26.  margin: 0 auto;
  27.  position: relative;
  28.  overflow: hidden;
  29. }
  30.  
  31. .MoveIt {
  32. width: 400px;
  33. height: 10000px;
  34. position: absolute;
  35. overflow-y:hidden;
  36. top: 0;
  37. left: 0;
  38. -moz-animation: MoveIt 25s linear infinite;
  39. -webkit-animation: MoveIt 25s linear infinite;
  40. animation: MoveIt 10s linear infinite;
  41. }
  42.  
  43. .MoveIt:hover {
  44. -moz-animation-play-state: paused;
  45. -webkit-animation-play-state: paused;
  46. animation-play-state: paused;
  47. }
  48.  
  49. @keyframes MoveIt {
  50. 0% {
  51.  -moz-transform: translateY(515px);
  52.  -webkit-transform: translateY(515px);
  53.  transform: translateY(515px);
  54. }
  55.  100% {
  56.  -moz-transform: translateY(-1280px);
  57.  -webkit-transform: translateY(-1280px);
  58.  transform: translateY(-1280px);
  59.  }
  60.  
  61.  
  62.  
  63. </style>
  64.  
  65. <div id="marqueebox">
  66. <b><center>Gallery</center></b>
  67. <div class="Marquee">
  68. <div class="MoveIt">
  69. <center>
  70. <img src="https://i.imgur.com/AyshZIr.jpg" style="width:90%;" alt="Gallery Picture"/><p>
  71. <img src="https://i.imgur.com/5KhCwAJ.jpg" style="width:90%;" alt="Gallery Picture"/><p>
  72. <img src="https://i.imgur.com/hUpA4rd.jpg" style="width:90%;" alt="Gallery Picture"/><p>
  73. <img src="https://i.imgur.com/NVycFjK.png" style="width:90%;" alt="Gallery Picture"/><p>
  74. <img src="https://i.imgur.com/5X7M5JS.jpg" style="width:90%;" alt="Gallery Picture"/><p>
  75. <img src="https://i.imgur.com/2UBIvNO.jpg" style="width:90%;" alt="Gallery Picture"/><p>
  76. <img src="https://i.imgur.com/xE8cdMi.jpg" style="width:90%;" alt="Gallery Picture"/><p>
  77.  
  78. </center></div></div>
  79.  
  80.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement