[go: up one dir, main page]
API tools faq
paste
dracslaura

animating sliding door images to reveal text

dracslaura
Jun 18th, 2021 (edited)
3,847
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.16 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. (＼ ∧♛∧ .+° °*.
  4. (ヾ( *･ω･) °・ cr viliarreai if used !
  5. `し( つ つ━✩* .+°
  6. (／しーＪ
  7.  
  8. --->
  9.  
  10. <style>
  11. /*my credits! please dont remove, but you may the change the img to ur liking*/
  12. .dont-remove {
  13. position:fixed;
  14. z-index:99;
  15. bottom:0;margin-bottom:5px;
  16. left:0;margin-left:5px;
  17. }
  18.  
  19. /* DON'T EDIT THIS*/
  20. @* {
  21. box-sizing: border-box;
  22. }
  23. body {
  24. margin: 0;
  25. }
  26.  
  27. /*how the container will look when the image opens*/
  28. figure {
  29. position: relative;
  30. width: 20vw;
  31. height: 20vw;
  32. margin: 0 auto;
  33. overflow: hidden;
  34. background-color: #ffdbec;
  35. background-size: cover;
  36. }
  37.  
  38. /* DON'T EDIT THIS*/
  39. figure img {
  40. position: absolute;
  41. top: 0;
  42. left: 0;
  43. width: 100%;
  44. transition: 1s ease-in-out;
  45. }
  46.  
  47. /* DON'T EDIT THIS*/
  48. figure img:first-of-type {
  49. clip-path: url(#tophalf);
  50. clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  51. }
  52.  
  53. /* DON'T EDIT THIS*/
  54. figure img:last-of-type {
  55. clip-path: url(#bottomhalf);
  56. clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  57. }
  58.  
  59. /*how much the top part will open*/
  60. figure:hover img:first-of-type {
  61. transform: translateY(-30%);
  62. }
  63.  
  64. /*how much the bottom part will open (i recommend making it the same as the top one)*/
  65. figure:hover img:last-of-type {
  66. transform: translateY(30%);
  67. }
  68.  
  69. /*how ur text will look like when the image opens*/
  70. figcaption {
  71. font-family: times;
  72. text-shadow: -1.5px 0 #ffa8d2, 0 1.5px #ffa8d2, 1.5px 0 #ffbfde, 0 -1.5px #ffbfde, 0 0;
  73. padding-top: 7vw; /*you might need to change the padding top to center the text*/
  74. font-weight:bold;
  75. top: 0;
  76. font-size: 5vw;
  77. width: 100%;
  78. height: 100%;
  79. position: absolute;
  80. color: white;
  81. text-align: center;
  82. }
  83.  
  84. /* DON'T EDIT THIS*/
  85. #svghalves {
  86. width: 0;
  87. height: 0;
  88. }
  89.  
  90. /* DON'T EDIT THIS*/
  91. @media all and (max-width: 500px) {
  92. figure {
  93. width: 50%;
  94. height: 50vw;
  95. }
  96. figcaption {
  97. font-size: 50%;
  98. }
  99. }
  100.  
  101. /*links from teaclub.crd.co*/
  102. a.pink {
  103. display:inline;
  104. width: 250px;
  105. box-shadow: inset 0 0 0 0 #ff89c2;
  106. overflow: visible;
  107. -webkit-transition: all ease 0.5s;
  108. -moz-transition: all ease 0.5s;
  109. transition: all ease 0.5s;
  110. }
  111.  
  112. a.pink:hover {
  113. text-decoration: none;
  114. box-shadow: inset 0 100px 0 0 #ff89c2;}
  115.  
  116. a.pink:active, a.pink:link, a.pink:visited {
  117. color:#fff;
  118. text-decoration: none;}
  119.  
  120. </style>
  121. <a href="https://twitter.com/vilIarreaI" title="sliding door code created by ximena!"><img class="dont-remove" src="https://64.media.tumblr.com/tumblr_lkl5s8Ay6F1qfamg6.gif"></a>
  122. <figure>
  123. <!--- links here --->
  124.  
  125. <figcaption><a class="pink" href="#i">I.</a><a class="pink" href="#ii">II.</a><a class="pink" href="#iii">III.</a></figcaption>
  126.  
  127. <!--- IMPORTANT you have to put ur img link twice for this to work --->
  128.  
  129. <img src="https://data.whicdn.com/images/341701404/original.jpg" alt="">
  130. <img src="https://data.whicdn.com/images/341701404/original.jpg" alt="">
  131. </figure>
  132.  
  133. <!--- DON'T EDIT THIS --->
  134. <svg id="svghalves">
  135. <defs>
  136. <clipPath id="tophalf" clipPathUnits="objectBoundingBox">
  137. <polygon points="0 0,1 0,1 .5,0 .5" />
  138. </clipPath>
  139. <clipPath id="bottomhalf" clipPathUnits="objectBoundingBox">
  140. 0 50%, 100% 50%, 100% 100%, 0 100%
  141. <polygon points="0 .5,1 .5,1 1,0 1" />
  142. </clipPath>
  143.  
  144. </defs>
  145. </svg>
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!