API tools faq
paste
Juno_okyo

Merry Christmas page for Blogspot

Juno_okyo
Dec 21st, 2014
445
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.79 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. DEMO HERE: http://junookyo.blogspot.com/p/merry-christmas.html
  3. =============== TUTORIAL ================
  4. + Step 1: Create a new blank page and save.
  5. + Step 2: Edit your html template and copy the following code to after the <body> tag.
  6. + Step 3: Replace url in first line with your new page url in step 1.
  7. + Step 4: Save and enjoy Christmas page!
  8. -->
  9. <b:if cond='data:blog.url == &quot;http://junookyo.blogspot.com/p/merry-christmas.html&quot;'>
  10. <style type='text/css'>
  11. #navbar, div.content{display:none}
  12. *{-moz-box-sizing:border-box;box-sizing:border-box}
  13. html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}
  14. body{font-family:&#39;Open Sans&#39;,sans-serif;font-size:16px;line-height:1.4;color:#E74C3C}
  15. h2{margin:0;font-family:&#39;Open Sans&#39;,sans-serif;font-weight:normal;line-height:1.2;text-rendering:optimizelegibility}
  16. h2{font-size:20px;margin-top:0;margin-bottom:22px}
  17. a{color:#34a8a6;text-decoration:none}
  18. a:hover,a:focus{color:#1c5a59}
  19. ul{list-style-type:disc}
  20. ul{padding:0;margin:0 0 22px 22px}
  21. .unstyled{margin:0;padding:0;list-style:none;list-style-image:none}
  22. ::-moz-selection{color:#fff;background:#34a8a6;text-shadow:none}
  23. ::selection{color:#fff;background:#34a8a6;text-shadow:none}
  24. .btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:none;margin:0;padding-top:0;padding-bottom:0;line-height:2.5;height:2.5em;padding-right:1.5em;padding-left:1.5em;overflow:visible;text-align:center;background-color:#34a8a6;color:#fff;border-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
  25. .btn:hover{background-color:#288180}
  26. .btn,.btn:hover{text-decoration:none}
  27. ::selection{color:#FFF;background:#34495E}
  28. ::-moz-selection{background:#34495E}
  29. ::-webkit-scrollbar{background:#555;width:16px}
  30. ::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 6px #E74C3C;background:#E74C3C}
  31. ::-webkit-scrollbar-track{}
  32. ::scrollbar{background:#34495E;height:200PX;width:19px}
  33. ::scrollbar-thumb{-webkit-box-shadow:inset 0 0 6px #E74C3C;background:#E74C3C}
  34. ::scrollbar-track{}
  35. @media screen and (min-width:550px){
  36.   html,body,.l-container{width:100%;height:100%}
  37. }
  38. body{background-color:#1BBC9B;color:#333;background-image:url(&quot;https://lh5.googleusercontent.com/-QGL_6vkaij8/VJYRfhXMtiI/AAAAAAAA-rg/9_g96h6C1BY/s0/body.png&quot;);background-repeat:repeat;background-position:top left;background-attachment:fixed;-webkit-transition:background-color 1000ms;transition:background-color 1000ms}
  39. body.night{background-color:#0d0f27;background-image:url(&quot;https://lh5.googleusercontent.com/-ehe0W-YBRa0/VJYSI-nLi6I/AAAAAAAA-ro/sH1FrMlsoxA/s0/sao.png&quot;)}
  40. .l-container{padding-left:0;padding-right:0;width:95%;max-width:1000px;margin:0 auto}
  41. @media screen and (max-width:549px){
  42.   .l-container{position:relative;margin-bottom:150px}
  43. }
  44. #scroll-proxy{height:10000px}
  45. #scroll-proxy.inactive{display:none}
  46. .symbol{position:relative}
  47. .symbol-title{font-size:18px;text-transform:uppercase}
  48. .symbol--carols .symbol-title{color:#eee0b7;font-size:20px}
  49. .symbol--mincepie .symbol-title{color:#f2e397;font-size:22px}
  50. .symbol-total{letter-spacing:1px}
  51. .symbol-title,.symbol-total{margin-bottom:0}
  52. .symbol--inline .symbol-title,.symbol--inline
  53. .symbol-total{display:inline-block;font-size:18px}
  54. @media screen and (min-width:550px){
  55.   .symbol--yuletide .symbol-title,.symbol--yuletide
  56.     .symbol-total{font-size:20px}
  57. }
  58. .overlay,.symbols--inside,.symbols--outside{zoom:1;filter:alpha(opacity=100);opacity:1;-webkit-transition:opacity 300ms;transition:opacity 300ms}
  59. .overlay.inactive,.symbols--inside.inactive,.symbols--outside.inactive{z-index:-10;-webkit-transition:opacity 300ms,z-index 0ms 300ms;transition:opacity 300ms,z-index 0ms 300ms;zoom:1;filter:alpha(opacity=0);opacity:0}
  60. .symbols--inside,.symbols--outside{position:absolute;width:100%;height:100%}
  61. .illust-container{position:fixed;top:0;left:0;width:100%;height:100%;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
  62. .illust-level{position:absolute;left:0;top:0}
  63. .illust-level--intro{position:relative;width:100%;height:700px;max-width:1400px;margin:0 auto}
  64. .illust-level--intro svg,.illust-level--intro img{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%}
  65. .illust-level--intro .symbol-title{position:relative;margin-top:0;z-index:3}
  66. .illust-level--town{position:fixed;top:50%;left:50%;z-index:2;width:350px;height:320px;-webkit-transform:translate(-50%,-160px);-ms-transform:translate(-50%,-160px);transform:translate(-50%,-160px)}
  67. .csstransforms3d .illust-level--town{-webkit-transform:translate3d(-50%,-160px,0);transform:translate3d(-50%,-160px,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
  68. .illust-level--symbolsTown{z-index:3;width:350px;height:320px;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}
  69. .illustItem{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center center}
  70. .illustItem--bgGrass{z-index:2;top:490px;left:50%;width:200%;height:50px;background-image:url(&quot;https://lh6.googleusercontent.com/--dAMenFgPgA/VJYSgh4NOOI/AAAAAAAA-rw/o3rhj-JCp4M/s0/may.png&quot;);background-repeat:repeat-x;background-position:left top;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}
  71. @media screen and (min-height:750px){
  72.   .illustItem--bgGrass{top:520px}
  73. }
  74. .illustItem--bgGrass:before{content:&#39;&#39;;display:block;margin-top:50px;width:100%;height:800px;background-color:#e2f7f6}
  75. .illustItem--fencePost{z-index:1;width:25px;min-height:252px}
  76. @media screen and (min-width:768px){
  77.   .illustItem--fencePost{width:49px}
  78. }
  79. .illustItem--fencePost.illustItem--fencePost--first{top:320px;left:12%;-webkit-transition:left 300ms;transition:left 300ms}
  80. @media screen and (min-width:820px){
  81.   .illustItem--fencePost.illustItem--fencePost--first{left:15%}
  82. }
  83. @media screen and (min-width:992px){
  84.   .illustItem--fencePost.illustItem--fencePost--first{left:20%}
  85. }
  86. @media screen and (min-height:750px){
  87.   .illustItem--fencePost.illustItem--fencePost--first{top:350px}
  88. }
  89. .illustItem--fencePost.illustItem--fencePost--second{top:360px;right:10%;-webkit-transition:right 300ms;transition:right 300ms}
  90. @media screen and (min-width:760px){
  91.   .illustItem--fencePost.illustItem--fencePost--second{right:15%}
  92. }
  93. @media screen and (min-height:750px){
  94.   .illustItem--fencePost.illustItem--fencePost--second{top:400px}
  95. }
  96. .illustItem--fencePost .symbol-title{display:inline-block;font-size:20px;}
  97. .illustItem--fence-arrow-left{z-index:2;text-align:right;width:130px;height:41px}
  98. @media screen and (min-width:768px){
  99.   .illustItem--fence-arrow-left{width:200px}
  100. }
  101. .illustItem--fence-arrow-left .symbol-title{padding-top:8px;padding-right:25px}
  102. @media screen and (max-width:768px){
  103.   .illustItem--fence-arrow-left .symbol-title{font-size:12px;padding-top:12px}
  104. }
  105. .illustItem--fence-arrow-right{z-index:2;width:120px;height:32px}
  106. @media screen and (min-width:768px){
  107.   .illustItem--fence-arrow-right{width:158px}
  108. }
  109. .illustItem--fence-arrow-right .symbol-title{padding-top:4px;padding-left:20px}
  110. @media screen and (max-width:768px){
  111.   .illustItem--fence-arrow-right .symbol-title{font-size:12px;padding-top:8px}
  112. }
  113. .illustItem--northpole{top:45px;left:-70px;-webkit-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg)}
  114. @media screen and (min-width:768px){
  115.   .illustItem--northpole{top:25px;left:-100px}
  116. }
  117. .illustItem--grotto{top:90px;left:-50px;-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg);text-transform:uppercase}
  118. .illustItem--lapland{top:55px;left:-30px;-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg)}
  119. @media screen and (min-width:768px){
  120.   .illustItem--lapland{top:20px;left:-50px}
  121. }
  122. .illustItem--holly{z-index:3;top:540px;left:-260px;width:400px;height:130px;background-repeat:repeat;background-position:right center;-webkit-transition:left 300ms;transition:left 300ms}
  123. @media screen and (min-width:660px){
  124.   .illustItem--holly{left:-200px}
  125. }
  126. @media screen and (min-width:720px){
  127.   .illustItem--holly{left:-160px}
  128. }
  129. @media screen and (min-width:840px){
  130.   .illustItem--holly{left:-100px}
  131. }
  132. @media screen and (min-width:980px){
  133.   .illustItem--holly{left:-40px}
  134. }
  135. @media screen and (min-height:750px){
  136.   .illustItem--holly{top:580px}
  137. }
  138. .illustItem--ivy{z-index:3;top:540px;right:-200px;width:325px;height:114px;padding:38px 0 0 80px;-webkit-transition:right 300ms;transition:right 300ms}
  139. @media screen and (min-width:660px){
  140.   .illustItem--ivy{right:-160px}
  141. }
  142. @media screen and (min-width:800px){
  143.   .illustItem--ivy{right:-80px}
  144. }
  145. @media screen and (min-width:992px){
  146.   .illustItem--ivy{right:0}
  147. }
  148. @media screen and (min-height:750px){
  149.   .illustItem--ivy{top:580px}
  150. }
  151. .illustItem--snowglobe{z-index:3;width:102%;height:116%;top:0;left:50%;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}
  152. .illustItem--town{position:relative;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
  153. .svg-town{width:100%;height:100%}
  154. .svg-house,.svg-carollers,.svg-star{-webkit-transition:opacity 300ms;transition:opacity 300ms}
  155. .svg-house.inactive,.svg-carollers.inactive,.svg-star.inactive{zoom:1;filter:alpha(opacity=0);opacity:0}
  156. .svg-house svg,.svg-house img,.svg-carollers svg,.svg-carollers img,.svg-star svg,.svg-star img{width:100%;height:100%}
  157. .svg-house{z-index:3;position:absolute;width:100%;height:100%;top:51%;left:49.72%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.266) translate(-50%,0);-ms-transform:scale(0.266) translate(-50%,0);transform:scale(0.266) translate(-50%,0)}
  158. .svg-lights{z-index:4;position:absolute;width:100%;height:100%;top:53.1%;left:50.5%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.4) translate(-50%,0);-ms-transform:scale(0.4) translate(-50%,0);transform:scale(0.4) translate(-50%,0)}
  159. .svg-sleigh{position:absolute;width:100%;height:100%;top:70%;left:50%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.14) translate(-43%,-245%) rotate(8deg);-ms-transform:scale(0.14) translate(-43%,-245%) rotate(8deg);transform:scale(0.14) translate(-43%,-245%) rotate(8deg)}
  160. .svg-sleigh.inactive{zoom:1;filter:alpha(opacity=0);opacity:0}
  161. .svg-star{position:absolute;width:100%;height:100%;top:38.5%;left:47%;background-color:#0d0f27;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.025) translate(-100%,0);-ms-transform:scale(0.025) translate(-100%,0);transform:scale(0.025) translate(-100%,0)}
  162. .svg-sledge{position:absolute;width:100%;height:100%;top:75%;left:64%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.14) translate(-50%,0);-ms-transform:scale(0.14) translate(-50%,0);transform:scale(0.14) translate(-50%,0)}
  163. .svg-carollers{z-index:3;position:absolute;width:100%;height:100%;top:72%;left:58%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.08) translate(-50%,0);-ms-transform:scale(0.08) translate(-50%,0);transform:scale(0.08) translate(-50%,0)}
  164. .svg-robins{z-index:3;position:absolute;width:100%;height:100%;top:72%;left:37%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.031) translate(0,0);-ms-transform:scale(0.031) translate(0,0);transform:scale(0.031) translate(0,0)}
  165. .svg-shopping{z-index:3;position:absolute;width:100%;height:100%;top:76%;left:17%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.06) translate(0,0);-ms-transform:scale(0.06) translate(0,0);transform:scale(0.06) translate(0,0)}
  166. .svg-peace{z-index:3;position:absolute;width:100%;height:100%;top:68%;left:69%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.05) translate(0,0);-ms-transform:scale(0.05) translate(0,0);transform:scale(0.05) translate(0,0)}
  167. .svg-nativity{z-index:2;position:absolute;width:100%;height:100%;top:54.62%;left:50%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.11) translate(-50%,0);-ms-transform:scale(0.11) translate(-50%,0);transform:scale(0.11) translate(-50%,0)}
  168. .svg-firstfloor{z-index:2;position:absolute;width:100%;height:100%;top:66.4%;left:50%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.1278) translate(-50.12%,0);-ms-transform:scale(0.1278) translate(-50.12%,0);transform:scale(0.1278) translate(-50.12%,0)}
  169. .svg-secondfloor{z-index:2;position:absolute;width:100%;height:100%;top:60%;left:50%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.1278) translate(-50.12%,0);-ms-transform:scale(0.1278) translate(-50.12%,0);transform:scale(0.1278) translate(-50.12%,0)}
  170. .illustItem--yuletide{width:184px;height:30px;bottom:-37px;left:24%;text-transform:uppercase;text-align:center}
  171. .illustItem--carols{width:212px;height:41px;top:233px;left:97px;padding:8px 0;-webkit-transform:scale(0.07) translate(0,15px);-ms-transform:scale(0.07) translate(0,15px);transform:scale(0.07) translate(0,15px);text-align:center}
  172. .illustItem--present{width:110px;height:41px;top:218px;left:141px;-webkit-transform:scale(0.04) translate(18px,5px) rotate(-30deg);-ms-transform:scale(0.04) translate(18px,5px) rotate(-30deg);transform:scale(0.04) translate(18px,5px) rotate(-30deg);text-align:left}
  173. .illustItem--nutcracker{width:140px;height:41px;top:220px;left:113px;-webkit-transform:scale(0.04) translate(21px,28px) rotate(14deg);-ms-transform:scale(0.04) translate(21px,28px) rotate(14deg);transform:scale(0.04) translate(21px,28px) rotate(14deg);text-align:left}
  174. .illustItem--bingcrosby,.illustItem--mariahcarey,.illustItem--wham{width:180px;height:41px;top:188px;text-align:center}
  175. .illustItem--bingcrosby{left:95px;-webkit-transform:scale(0.02) translate(13px,22px);-ms-transform:scale(0.02) translate(13px,22px);transform:scale(0.02) translate(13px,22px)}
  176. .illustItem--mariahcarey{left:99px;-webkit-transform:scale(0.02) translate(16px,22px);-ms-transform:scale(0.02) translate(16px,22px);transform:scale(0.02) translate(16px,22px)}
  177. .illustItem--mincepie{width:202px;height:57px;top:191px;left:63px;padding:8px 0;-webkit-transform:scale(0.025) translate(20px,5px);-ms-transform:scale(0.025) translate(20px,5px);transform:scale(0.025) translate(20px,5px);text-align:center}
  178. .illustItem--stocking,.illustItem--fireplace{width:202px;height:57px;left:59px;padding:8px 0;text-align:center}
  179. .illustItem--fireplace{top:187px;-webkit-transform:scale(0.031) translate(12px,0);-ms-transform:scale(0.031) translate(12px,0);transform:scale(0.031) translate(12px,0)}
  180. .illustItem--christmascards{width:100px;height:57px;top:186px;left:124px;padding:8px 0;-webkit-transform:scale(0.03) translate(28px,14px);-ms-transform:scale(0.03) translate(28px,14px);transform:scale(0.03) translate(28px,14px)}
  181. .illustItem--santa{width:180px;height:41px;top:126px;left:105px;-webkit-transform:scale(0.03) translate(-10px,9px) rotate(8deg);-ms-transform:scale(0.03) translate(-10px,9px) rotate(8deg);transform:scale(0.03) translate(-10px,9px) rotate(8deg);text-align:center}
  182. .illustItem--endquote{width:120px;top:86px;left:129px;-webkit-transform:scale(0.12) translate(20px,19px) skew(-12deg) rotate(-10deg);-ms-transform:scale(0.12) translate(20px,19px) skew(-12deg) rotate(-10deg);transform:scale(0.12) translate(20px,19px) skew(-12deg) rotate(-10deg);color:#fff;background-color:#0d0f27}
  183. .symbol-title-sub{display:block;font-size:80%;margin-bottom:2px}
  184. .page-footer{z-index:100;position:fixed;width:100%;padding:0 5% 16px;background:#fff;bottom:0;left:0}
  185. .symbol-title, .symbol-title a{color: brown !important;}
  186. #likebox, .g-plusone {margin-top: 5px;}
  187.  
  188. @media screen and (min-width:550px){
  189.   .page-footer{padding:10px 20px}
  190. }
  191. @media screen and (min-width:992px){
  192.   .page-footer{padding:12px 6%}
  193. }
  194. .page-footer:before{content:&#39;&#39;;position:absolute;bottom:100%;left:0;display:block;width:100%;height:44px;background-image:url(&quot;https://lh5.googleusercontent.com/-ry7uPaRUapQ/VJYm294PIAI/AAAAAAAA-tM/4m4LomjTiXI/s0/anh.png&quot;)}
  195. @media screen and (min-width:550px){
  196.   .page-footer:before{bottom:90%}
  197. }
  198. @media screen and (min-width:550px){
  199.   .page-footer:after{content:&#39;&#39;;position:absolute;bottom:10px;left:50%;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);display:block;width:125px;height:57px;background-image:url(&quot;https://lh3.googleusercontent.com/-LfV36j09O8w/VJYSx0x9CzI/AAAAAAAA-sE/INYJHxd6beQ/s0/muiten.png&quot;);background-position:-4px bottom;background-repeat:no-repeat;text-align:center}
  200. }
  201. .page-footer-links{text-align:center;text-transform:uppercase;font-size:18px}
  202. @media screen and (min-width:550px){
  203.   .page-footer-links{width:100%;text-align:right;margin-top:-10px}
  204. }
  205. .page-footer-links li{display:inline-block}
  206. @media screen and (min-width:768px){
  207.   .page-footer-links li{margin-bottom:0}
  208. }
  209. @media screen and (max-width:768px){
  210.   .page-footer-links li{display:block}
  211. }
  212. @media screen and (min-width:550px){
  213.   .page-footer-links li:first-child{float:left}
  214. }
  215. .page-footer-links li:last-child{margin-bottom:0}
  216. .page-footer-links a{color:black}
  217. .page-footer-links .page-footer-info{display:inline-block;text-decoration:underline;display:inline-block;vertical-align:middle;height:2.5em;line-height:2.5}
  218. @media screen and (min-width:550px){
  219.   .page-footer-links .page-footer-info{padding-top:5px}
  220. }
  221. .page-footer-links .page-footer-site{color:#333;background-color:white;padding-top:5px}
  222. @media screen and (min-width:550px){
  223.   .page-footer-links .page-footer-site{margin-left:20px}}
  224. </style>
  225. <body>
  226. <div class='l-container home'>
  227. <div class='illust-container'>
  228. <div class='illust-level illust-level--intro'>
  229. <div class='illustItem illustItem--bgGrass'/>
  230. <div class='illustItem illustItem--fencePost illustItem--fencePost--first'>
  231. <img alt='Fence post' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fencepost.svg'/>
  232. <div class='illustItem illustItem--northpole illustItem--fence-arrow illustItem--fence-arrow-left symbol symbol--northpole'>
  233. <img alt='Fence post Arrow Left' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fence-arrow-left.svg'/>
  234. <h2 class='symbol-title'><a href='https://junookyo.blogspot.com/' title='Juno_okyo'>Juno_okyo</a></h2>
  235. </div>
  236. <div class='illustItem illustItem--grotto illustItem--fence-arrow illustItem--fence-arrow-right symbol symbol--grotto'>
  237. <img alt='Fence post Arrow Right' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fence-arrow-right.svg'/>
  238. <h2 class='symbol-title'><a href='https://www.facebook.com/JunoOkyoBlog' title='Juno_okyo on Facebook' target='_blank'>Facebook</a></h2>
  239. </div>
  240. </div>
  241. <div class='illustItem illustItem--holly symbol symbol--holly'>
  242. <img alt='Holly' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/holly.svg'/>
  243. </div>
  244. <div class='illustItem illustItem--fencePost illustItem--fencePost--second'>
  245. <img alt='Fence post' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fencepost.svg'/>
  246. <div class='illustItem illustItem--lapland illustItem--fence-arrow illustItem--fence-arrow-right symbol symbol--lapland'>
  247. <img alt='Fence post arrow right' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fence-arrow-right.svg'/>
  248. <h2 class='symbol-title'><a href='https://twitter.com/juno_okyo' title='Juno_okyo on Twitter' target='_blank'>Twitter</a></h2>
  249. </div>
  250. </div>
  251. <div class='illustItem illustItem--ivy symbol symbol--ivy'>
  252. <img alt='Ivy' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/ivy.svg'/>
  253. </div>
  254. </div>
  255. </div>
  256. <div class='illust-level--town'>
  257. <div class='illustItem illustItem--snowglobe'>
  258. <img alt='Snow Globe' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/snowglobe.svg'/>
  259. </div>
  260. <div class='illustItem illustItem--town'>
  261. <img alt='Town' class='svg-town' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/town.svg'/>
  262. <div class='svg-house'>
  263. <img alt='House' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/house.svg'/>
  264. <img alt='lights' class='svg-lights' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/lights.svg'/>
  265. </div>
  266. <img alt='Sleigh' class='svg-sleigh' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/sleigh.svg'/>
  267. <div class='svg-star inactive'>
  268. <img alt='Star' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/star.svg'/>
  269. </div>
  270. <img alt='sledge' class='svg-sledge' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/sledge.svg'/>
  271. <img alt='robins' class='svg-robins' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/robins.svg'/>
  272. <img alt='peace' class='svg-peace' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/peace.svg'/>
  273. <img alt='shopping' class='svg-shopping' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/shopping.svg'/>
  274. <div class='svg-carollers'>
  275. <img alt='carollers' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/carolers.svg'/>
  276. </div>
  277. <img alt='firstfloor' class='svg-firstfloor' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/firstfloor.svg'/>
  278. <img alt='secondfloor' class='svg-secondfloor' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/secondfloor.svg'/>
  279. <img alt='nativity' class='svg-nativity' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/nativity.svg'/>
  280. <div class='illust-level illust-level--symbolsTown'>
  281. <div class='illustItem illustItem--yuletide symbol symbol--yuletide'>
  282. <h2 class='symbol-title'>NOEL 2014</h2>
  283. </div>
  284. <div class='symbols--outside'>
  285. <div class='illustItem illustItem--carols symbol symbol--carols'>
  286. <h2 class='symbol-title'>Merry Christmas</h2>
  287. </div>
  288. </div>
  289. <div class='symbols--inside inactive'>
  290. <div class='illustItem illustItem--nutcracker symbol symbol--nutcracker'>
  291. <h2 class='symbol-title'>HELLO</h2>
  292. </div>
  293. <div class='illustItem illustItem--present symbol symbol--present'>
  294. <h2 class='symbol-title'>2014</h2>
  295. </div>
  296. <div class='illustItem illustItem--mincepie symbol symbol--mincepie'>
  297. <h2 class='symbol-title'>Mince Pies</h2>
  298. </div>
  299. <div class='illustItem illustItem--christmascards symbol symbol--christmascards'>
  300. <h2 class='symbol-title'>Happy Christmas</h2>
  301. </div>
  302. <div class='illustItem illustItem--bingcrosby symbol symbol--bingcrosby'>
  303. <h2 class='symbol-title'>J2TeaM</h2>
  304. </div>
  305. <div class='illustItem illustItem--mariahcarey symbol symbol--mariahcarey'>
  306. <h2 class='symbol-title'>Juno_okyo</h2>
  307. </div>
  308. <div class='illustItem illustItem--endquote'>
  309. <h2 class='symbol-title'><span class='symbol-title-sub'>Have</span>a Very Merry Christmas!</h2>
  310. </div>
  311. </div>
  312. </div>
  313. </div>
  314. </div>
  315. <div id='scroll-proxy'/>
  316. <footer class='page-footer'>
  317.     <ul class='unstyled page-footer-links'>
  318.         <li><iframe id='likebox' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fjunookyo.blogspot.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=21&amp;appId=458084867627529' scrolling='no' frameborder='0' style='border:none; overflow:hidden; height:21px;' allowTransparency='true' /></li>
  319.         <li><div class='g-plusone' data-size='medium'/></li>
  320.     </ul>
  321. </footer>
  322. </div>
  323. <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>
  324. <script>
  325. ;
  326. (function (KO, $) {
  327.     $(function () {
  328.         KO.UI.init();
  329.     });
  330.     KO.UI = {
  331.         scrollActive: false,
  332.         supports: { transform3d: false },
  333.         init: function () {
  334.             this.handleZooming();
  335.         },
  336.         handleZooming: function () {
  337.             var zoomContent = $(&#39;.illust-container&#39;);
  338.             ZUI = new Zoomer(zoomContent);
  339.             window.scrollTo(0, 0);
  340.         }
  341.     };
  342.     function Zoomer(content) {
  343.         this.setLevels = function () {
  344.             if (this.docWidth &gt; 1500) {
  345.                 this.levels = 6.2;
  346.                 this.verticalTranslate = 3000;
  347.             } else if (this.docWidth &gt; 1350) {
  348.                 this.levels = 6;
  349.                 this.verticalTranslate = 2750;
  350.             } else if (this.docWidth &gt; 1250) {
  351.                 this.levels = 5.8;
  352.                 this.verticalTranslate = 2450;
  353.             } else if (this.docWidth &gt; 1150) {
  354.                 this.levels = 5.7;
  355.                 this.verticalTranslate = 2350;
  356.             } else if (this.docWidth &gt; 1050) {
  357.                 this.levels = 5.5;
  358.                 this.verticalTranslate = 2100;
  359.             } else if (this.docWidth &gt; 950) {
  360.                 this.levels = 5.35;
  361.                 this.verticalTranslate = 1900;
  362.             } else if (this.docWidth &gt; 850) {
  363.                 this.levels = 5.15;
  364.                 this.verticalTranslate = 1700;
  365.             } else {
  366.                 this.levels = 4.9;
  367.                 this.verticalTranslate = 1520;
  368.             }
  369.         };
  370.         this.content = content;
  371.         this.header = $(&#39;.page-header&#39;);
  372.         this.body = $(&#39;body&#39;);
  373.         this.town = $(&#39;.illust-level--town&#39;);
  374.         this.townSymbols = $(&#39;.illust-level--symbolsTown&#39;);
  375.         this.house = $(&#39;.svg-house&#39;);
  376.         this.carollers = $(&#39;.svg-carollers&#39;);
  377.         this.star = $(&#39;.svg-star&#39;);
  378.         this.scrolled = 0;
  379.         var body = document.body, html = document.documentElement;
  380.         this.docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
  381.         this.docWidth = html.clientWidth;
  382.         this.setLevels();
  383.         window.addEventListener(&#39;scroll&#39;, this, false);
  384.     }
  385.     Zoomer.prototype.handleEvent = function (event) {
  386.         if (this[event.type]) {
  387.             this[event.type](event);
  388.         }
  389.     };
  390.     Zoomer.prototype.scroll = function (event) {
  391.         this.recalculatePositions();
  392.     };
  393.     Zoomer.prototype.recalculatePositions = function () {
  394.         var INITIAL_TOWN_WIDTH = 350, INITIAL_TOWN_HEIGHT = 320, TARGET_TOWN_WIDTH = 2800, TARGET_TOWN_HEIGHT = 2560, TARGET_BG_ZSCALE = 200, OFFSET_MARGIN = 80, TARGET_VERTICAL_TRANSLATE = 2600;
  395.         var supportPageOffset = window.pageXOffset !== undefined;
  396.         var isCSS1Compat = (document.compatMode || &#39;&#39;) === &#39;CSS1Compat&#39;;
  397.         var yOffset = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
  398.         this.scrolled = yOffset / (this.docHeight - window.innerHeight);
  399.         var transformValue, townTransform, symboltransformValue;
  400.         this.checkStates();
  401.         var scrollFactor = this.scrolled &lt; 0.5 ? this.scrolled : 0.5;
  402.         var scale = Math.pow(3, scrollFactor * this.levels);
  403.         var townHeight = Math.round(scale * INITIAL_TOWN_HEIGHT);
  404.         var townWidth = Math.round(scale * INITIAL_TOWN_WIDTH);
  405.         var townOffset = Math.round(scale * OFFSET_MARGIN) - OFFSET_MARGIN;
  406.         if (scrollFactor &lt; 0.5) {
  407.             var townYPos = Math.round(townHeight / 2 + townOffset);
  408.             if (KO.UI.supports.transform3d) {
  409.                 transformValue = &#39;translate3d(0, 0, 0) scale(&#39; + scale + &#39;)&#39;;
  410.                 townTransform = &#39;translate3d(-50%, -&#39; + townYPos + &#39;px, 0)&#39;;
  411.                 symboltransformValue = &#39;translate3d(-&#39; + townWidth / 2 + &#39;px, -&#39; + townYPos + &#39;px, 0)&#39; + &#39; scale(&#39; + scale + &#39;)&#39;;
  412.             } else {
  413.                 transformValue = &#39;translate(0, 0) scale(&#39; + scale + &#39;)&#39;;
  414.                 townTransform = &#39;translate(-50%, -&#39; + townYPos + &#39;px)&#39;;
  415.                 symboltransformValue = &#39;translate(-&#39; + townWidth / 2 + &#39;px, -&#39; + townYPos + &#39;px)&#39; + &#39; scale(&#39; + scale + &#39;)&#39;;
  416.             }
  417.         } else {
  418.             var percentageThroughSection = (this.scrolled - 0.5) / 0.5;
  419.             var verticalTranslate = percentageThroughSection * this.verticalTranslate;
  420.             var townYPos = Math.round(townHeight / 2 + townOffset - verticalTranslate);
  421.             if (KO.UI.supports.transform3d) {
  422.                 transformValue = &#39;translate3d(0, 0, 0) scale(&#39; + scale + &#39;)&#39;;
  423.                 townTransform = &#39;translate3d(-50%, -&#39; + townYPos + &#39;px, 0)&#39;;
  424.             } else {
  425.                 transformValue = &#39;translate(0, 0) scale(&#39; + scale + &#39;)&#39;;
  426.                 townTransform = &#39;translate(-50%, -&#39; + townYPos + &#39;px)&#39;;
  427.             }
  428.         }
  429.         this.town[0].style.width = townWidth + &#39;px&#39;;
  430.         this.town[0].style.height = townHeight + &#39;px&#39;;
  431.         this.town[0].style.WebkitTransform = townTransform;
  432.         this.town[0].style.MozTransform = townTransform;
  433.         this.town[0].style.msTransform = townTransform;
  434.         this.town[0].style.transform = townTransform;
  435.         this.content[0].style.WebkitTransform = transformValue;
  436.         this.content[0].style.MozTransform = transformValue;
  437.         this.content[0].style.msTransform = transformValue;
  438.         this.content[0].style.transform = transformValue;
  439.         this.townSymbols[0].style.WebkitTransform = &#39;scale(&#39; + scale + &#39;)&#39;;
  440.         this.townSymbols[0].style.MozTransform = &#39;scale(&#39; + scale + &#39;)&#39;;
  441.         this.townSymbols[0].style.msTransform = &#39;scale(&#39; + scale + &#39;)&#39;;
  442.         this.townSymbols[0].style.transform = &#39;scale(&#39; + scale + &#39;)&#39;;
  443.     };
  444.     Zoomer.prototype.checkStates = function () {
  445.         if (this.scrolled &gt; 0) {
  446.             this.header.addClass(&#39;scaled&#39;);
  447.         } else {
  448.             this.header.removeClass(&#39;scaled&#39;);
  449.         }
  450.         if (this.scrolled &gt; 0.15) {
  451.             this.body.addClass(&#39;night&#39;);
  452.         } else {
  453.             this.body.removeClass(&#39;night&#39;);
  454.         }
  455.         if (this.scrolled &lt; 0.5) {
  456.             this.house.removeClass(&#39;inactive&#39;);
  457.             this.carollers.removeClass(&#39;inactive&#39;);
  458.             this.star.addClass(&#39;inactive&#39;);
  459.             this.townSymbols.find(&#39;.symbols--inside&#39;).addClass(&#39;inactive&#39;);
  460.             this.townSymbols.find(&#39;.symbols--outside&#39;).removeClass(&#39;inactive&#39;);
  461.         } else {
  462.             this.house.addClass(&#39;inactive&#39;);
  463.             this.carollers.addClass(&#39;inactive&#39;);
  464.             this.star.removeClass(&#39;inactive&#39;);
  465.             this.townSymbols.find(&#39;.symbols--inside&#39;).removeClass(&#39;inactive&#39;);
  466.             this.townSymbols.find(&#39;.symbols--outside&#39;).addClass(&#39;inactive&#39;);
  467.         }
  468.     };
  469. }(window.KO = window.KO || {}, jQuery));
  470. //@ sourceURL=pen.js
  471. </script>
  472. </body>
  473. </b:if>
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!