ФАКЕР
Заблокирован
- Сообщения
- 857
- Решения
- 9
- Реакции
- 85
- Баллы
- 1,730
А кто нибудь может этого санту под xen адаптировать?)
HTML
CSS
JS
HTML
Код:
<div id="Santa_Slide_Panel" onclick="void(0)">
<svg version="1.1" id="santa"
viewBox="0 0 300 300" class="shizzle-animated Santa_Climbing_Chimney">
<g id="Santa_Claus">
<g id="head">
<path id="body" class="santa-0" d="M42.4,74.5c0,0,12.1,10.3,15,14.9c13.8,21.9,48.9,73,48.9,73s7,83.1-56.5,103.4l-47.3-5.6V70.5
L42.4,74.5z"/>
<path id="right_ear" class="santa-1" d="M132.2,130c-2.1,3.2-6.4,4-9.6,1.9l-0.4-0.2c-3.2-2.1-4-6.4-1.9-9.6l0,0
c2.1-3.2,6.4-4,9.6-1.9l0.4,0.2C133.5,122.6,134.3,126.9,132.2,130L132.2,130z"/>
<path id="left_ear" class="santa-1" d="M64.6,66.9c-2.1,3.2-6.4,4-9.6,1.9l-0.4-0.2c-3.2-2.1-4-6.4-1.9-9.6l0,0
c2.1-3.2,6.4-4,9.5-1.9l0.4,0.2C65.8,59.5,66.7,63.7,64.6,66.9L64.6,66.9z"/>
<path id="face_back" class="santa-1 UpDown_1" d="M125.4,96.4L90,62.5c-7.9-7.6-21.8-6-27.7,0.2c0,0,0,0-3,3.6c-3.3,4-8.1,10.8-9.2,14.2
l61.5,55.8c5.2-3.4,10.4-8.1,13.8-11.3c2.3-2.2,1.1-1,1.1-1C132.3,117.8,133.4,104,125.4,96.4z"/>
<g id="cheeks" class="UpDown_1">
<g class="left_cheek">
<g>
<ellipse transform="matrix(0.6666 -0.7454 0.7454 0.6666 -44.3544 80.8524)" class="cheeks" cx="68.2" cy="90" rx="7.1" ry="9.6"/>
</g>
</g>
<g class="right_cheek">
<g>
<path class="cheeks" d="M108.3,128c-2.6,2.9-7.8,2.5-11.7-0.9c-3.8-3.4-4.8-8.6-2.2-11.5c2.6-2.9,7.8-2.5,11.7,0.9
S111,125,108.3,128z"/>
</g>
</g>
</g>
<path id="beard" class="santa-4 UpDown_1" d="M117.9,131c-7.2,3.7-11.6-2.4-11.6-2.4c-6-5.8-10.2-6.7-17.2-4.4c1.8-6.3,0.4-13.4-4.1-19l0.1-0.1
c-0.4-0.3-0.7-0.7-1.1-1c-0.3-0.4-0.7-0.7-1-1l-0.1,0.1c-5.8-4.2-13-5.3-19.2-3.2c2-7.1,0.9-11.2-5.2-17c0,0-6.3-4.2-3-11.5
c0.4-0.8,8-10,8-10s-28.7,9.7-34,16.1l0,0c-0.4,0.3-0.7,0.7-1.1,1c-5.9,6.2-6.8,15.4-2.8,23.1c-2.4,1-4.6,2.5-6.5,4.4
c-7.6,7.9-6.9,20.9,1.6,29c0.5,0.5,1,0.9,1.5,1.3c-0.7,8.5,2.5,15.4,9.6,22.5l0,0c0.2,0.2,0.3,0.3,0.5,0.5c0.1,0.1,0.2,0.2,0.3,0.3
l0,0c7.4,6.8,13.4,8.6,21.8,7.6c0.4,0.5,0.9,1,1.4,1.5c8.5,8.1,21.5,8.2,29.1,0.3c1.9-2,3.3-4.3,4.1-6.7c7.8,3.6,17,2.3,22.9-3.9
c0.3-0.4,0.7-0.7,1-1.1l0,0c6.2-5.6,14.5-34.7,14.5-34.7S118.7,130.6,117.9,131z"/>
<g id="mustache" class="UpDown_1">
<path class="santa-6" d="M113.5,149.5c-2.6-0.9-5.5-5.2-9.6-10.2c-4-5-0.4-13.2-6.9-22.6c-5.3-7.6-13.7-7.8-16.7-7.6
c0-3.9-1-10.4-7.1-14.9c-9.2-6.8-17.5-3.4-22.4-7.6s-9.1-7.2-9.9-9.9S38.8,88.3,44.7,99c3.3,6,16.7,22.2,29.4,17.4
c-3.8,11.1,8.4,22.6,14.1,25.6C95.1,145.7,116.1,150.4,113.5,149.5z"/>
<path class="santa-7" d="M113.5,149.5c-1.1-0.4-2.1-1.2-2.9-2.1c-0.9-0.8-1.6-1.8-2.4-2.7l-4.5-5.6c-0.8-0.9-1.3-2.1-1.6-3.3
c-0.4-1.2-0.5-2.4-0.7-3.6c-0.3-2.4-0.6-4.7-1.1-7c-0.1-0.6-0.3-1.1-0.5-1.7l-0.6-1.6l-0.7-1.6l-0.8-1.5c-0.3-0.5-0.6-1-0.9-1.5
l-0.2-0.4l-0.3-0.3l-0.6-0.7c-0.4-0.5-0.8-0.8-1.1-1.3c-0.4-0.4-0.8-0.8-1.3-1.1c-0.9-0.7-1.8-1.3-2.9-1.8c-1-0.5-2.1-0.9-3.2-1.2
c-2.2-0.6-4.5-0.9-6.8-0.7h-0.8V109c0-2.3-0.3-4.7-1.1-6.9c-0.8-2.2-2-4.2-3.6-5.9c-0.4-0.4-0.8-0.8-1.3-1.2l-0.7-0.6l-0.7-0.5
c-1-0.7-2-1.3-3-1.8c-2.1-1.1-4.4-1.8-6.8-2.2c-2.4-0.4-4.8-0.6-7.2-1.1c-1.2-0.3-2.4-0.6-3.5-1.3s-1.9-1.5-2.9-2.3
c-1.8-1.5-3.7-3-5.5-4.7c-0.9-0.8-1.8-1.7-2.4-2.9c-0.2-0.3-0.3-0.6-0.4-0.9v-0.1v-0.1l0,0c0,0,0,0.1,0.2,0.1s0.3-0.1,0.3-0.1l0,0
v0.1c-0.1,0.5-0.2,1.1-0.2,1.7c-0.1,2.4,0.1,4.8,0.4,7.1c0.4,2.4,0.9,4.7,1.6,6.9c0.7,2.3,1.6,4.4,2.8,6.4c1.2,2,2.7,3.9,4.2,5.7
c1.6,1.8,3.2,3.5,5,5s3.7,2.9,5.7,4.1c2,1.1,4.2,2,6.4,2.3c1.1,0.2,2.2,0.2,3.4,0.1c1.1-0.1,2.2-0.4,3.3-0.8l1.8-0.6l-0.4,2.2
l-0.4,1.6c-0.2,0.5-0.1,1.1-0.2,1.7s0,1.1,0,1.7c0,0.3,0,0.6,0.1,0.9l0.2,0.8c0.1,0.6,0.2,1.1,0.4,1.7c0.2,0.5,0.3,1.1,0.6,1.6
c0.2,0.5,0.4,1.1,0.7,1.6l0.8,1.6c0.6,1,1.3,2,2,2.9c0.3,0.5,0.7,0.9,1.1,1.4s0.8,0.9,1.2,1.3c0.8,0.9,1.7,1.7,2.5,2.5
c0.9,0.8,1.8,1.6,2.8,2.3c1,0.7,2,1.3,3,1.8c1.1,0.5,2.2,1,3.3,1.4c2.3,0.9,4.6,1.6,6.9,2.4c2.3,0.7,4.7,1.4,7,2
c1.2,0.3,2.4,0.6,3.5,0.9l1.8,0.4l0.9,0.2L113.5,149.5l0.2-0.1l0,0l0,0v0.1l0,0C113.6,149.6,113.5,149.6,113.5,149.5L113.5,149.5z
M113.5,149.4c0.1,0,0.1,0,0.2,0.1l0,0v0.1h-0.1h-0.1h-0.1l-0.5-0.1l-0.9-0.2l-1.8-0.4l-3.6-0.8c-2.4-0.6-4.7-1.2-7.1-1.8
c-2.4-0.6-4.7-1.3-7-2.1c-1.2-0.4-2.3-0.8-3.5-1.3c-1.1-0.5-2.3-1.1-3.3-1.8c-1.1-0.7-2-1.4-3-2.2c-1-0.8-1.9-1.6-2.7-2.5
c-0.4-0.4-0.9-0.9-1.3-1.4s-0.8-0.9-1.2-1.4c-0.8-1-1.5-2-2.2-3.1l-0.9-1.6c-0.3-0.6-0.5-1.1-0.8-1.7s-0.4-1.2-0.6-1.8
c-0.2-0.6-0.4-1.2-0.5-1.9l-0.2-0.9c0-0.3,0-0.6-0.1-1c0-0.6-0.1-1.3,0-1.9s0.1-1.3,0.2-1.9l0.5-1.9l1.3,1.2
c-1.2,0.4-2.5,0.7-3.8,0.9c-1.3,0.1-2.6,0-3.9-0.1c-1.3-0.2-2.5-0.6-3.7-1c-1.2-0.5-2.3-1-3.4-1.6c-2.2-1.2-4.2-2.7-6-4.4
c-1.8-1.6-3.6-3.4-5.1-5.3c-1.6-1.9-3.1-3.8-4.3-6s-2.1-4.5-2.8-6.8c-0.7-2.4-1.2-4.8-1.4-7.2c-0.3-2.4-0.4-4.9-0.2-7.3
c0.1-0.6,0.1-1.2,0.3-1.9c0-0.1,0.1-0.2,0.1-0.3c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.2-0.2,0.5-0.2c0.3,0.1,0.3,0.2,0.4,0.3
c0,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.1,0,0.1v0.1c0.1,0.3,0.2,0.5,0.3,0.8c0.5,1,1.3,1.9,2.2,2.7c1.7,1.7,3.6,3.2,5.4,4.8
c0.9,0.8,1.8,1.6,2.8,2.2c1,0.6,2.1,1,3.3,1.3c2.3,0.5,4.7,0.7,7.1,1.1c2.4,0.4,4.8,1.1,7,2.1c1.1,0.5,2.2,1.1,3.2,1.8l0.8,0.5
l0.8,0.6c0.5,0.4,0.9,0.8,1.4,1.2c1.8,1.7,3.2,3.9,4.1,6.2c0.9,2.3,1.4,4.8,1.4,7.3l-0.8-0.8c2.5-0.2,5,0,7.4,0.7
c1.2,0.3,2.4,0.8,3.5,1.3s2.1,1.3,3.1,2.1c0.5,0.4,0.9,0.8,1.4,1.3c0.4,0.5,0.9,0.9,1.2,1.4l0.5,0.7l0.3,0.4l0.2,0.4
c0.3,0.5,0.7,1,0.9,1.6l0.8,1.7l0.7,1.7l0.5,1.8c0.1,0.6,0.3,1.2,0.4,1.8c0.2,1.2,0.4,2.4,0.5,3.6s0.2,2.4,0.3,3.6
c0.1,1.2,0.2,2.4,0.5,3.5c0.3,1.1,0.7,2.2,1.4,3.2c0.7,0.9,1.4,1.9,2.1,2.8l2.2,2.8c0.7,0.9,1.5,1.8,2.3,2.7
C111.5,148.2,112.4,149,113.5,149.4L113.5,149.4z"/>
</g>
<path class="santa-white" d="M68.2,85.1"/>
<g id="nose">
<circle class="nose" cx="84.2" cy="107.9" r="10.7"/>
</g>
<g id="face">
<g id="eye_brows">
<g id="left_brow" class="eyesandbrow">
<path class="santa-6" d="M99,84.3c0,0,6.4-9.6-10.5-18.1c-9.7-4.9-17.8,5.2-17.8,5.2S86.7,67.4,99,84.3z"/>
</g>
<g id="right_brow" class="eyesandbrow">
<path class="santa-6" d="M104.4,89.4c0,0,9.3-6.9,18.6,9.6c5.3,9.5-4.3,18-4.3,18S121.8,101,104.4,89.4z"/>
</g>
</g>
<g id="eyes">
<g id="left_eye">
<path id="left_eye_1_" class="santa-11 " d="M84.6,91.5c-1,1.1-2.8,1.1-3.9,0.1l0,0c-1.1-1-1.1-2.8-0.1-3.9l5.6-5.8
c1-1.1,2.8-1.1,3.9-0.1l0,0c1.1,1,1.1,2.8,0.1,3.9L84.6,91.5z"/>
<circle id="left_eyeball" class="eyeball eyesandbrow" cx="88.5" cy="83.4" r="1.1"/>
</g>
<g id="right_eye">
<path id="right_eye_1_" class="santa-11 " d="M102.3,108.4c-1,1.1-2.8,1.1-3.9,0.1l0,0c-1.1-1-1.1-2.8-0.1-3.9l5.6-5.8
c1-1.1,2.8-1.1,3.9-0.1l0,0c1.1,1,1.1,2.8,0.1,3.9L102.3,108.4z"/>
<circle id="right_eyeball" class="eyeball eyesandbrow" cx="106.2" cy="100.3" r="1.1"/>
</g>
</g>
</g>
<g id="hat" class="UpDown_1">
<path class="santa-13" d="M105.3,31.6c0,0,20.8,4.7,27.5,7.6c6.7,3,17.4,10.6,22.4,18.3c7.8,12,12.9,20.6,12.5,40.5
c-0.1,5.6-1.6,16.9-6.3,28.6l-8.9-0.1c0,0-0.8-7.3-8.4-28.4"/>
<path class="santa-14" d="M139.6,107.5c0,0,20.2-13.9,13.9-31.7c-6.5-18.6-37.8-49.3-57.9-44C75.5,37,75.2,50.3,75.2,50.3"/>
<g>
<circle class="santa-white" cx="158.5" cy="130.8" r="11.5"/>
<g>
<path class="santa-white" d="M157.1,119.4c0,0-9.3,1-9.8,10.8c-0.5,11.3,11,12.1,11,12.1"/>
<path class="santa-7" d="M157.1,119.4c0,0-0.5,0.2-1.4,0.6c-0.8,0.4-2,1-3.1,2s-2.2,2.3-2.9,3.9c-0.3,0.8-0.6,1.7-0.7,2.6
c-0.1,0.5-0.1,0.9-0.2,1.4v0.4v0.3c0,0.3,0,0.5,0,0.8c0,0.9,0.2,1.9,0.4,2.7c0.2,0.9,0.6,1.7,1,2.5c0.9,1.5,2.2,2.7,3.4,3.5
c1.3,0.8,2.5,1.4,3.3,1.7c0.9,0.3,1.4,0.5,1.4,0.5s-0.5,0.1-1.5,0.1s-2.4-0.2-4-0.8c-0.8-0.3-1.7-0.7-2.5-1.3
c-0.8-0.6-1.6-1.3-2.3-2.2c-0.7-0.9-1.2-2-1.6-3.1c-0.4-1.1-0.5-2.3-0.6-3.5c0-0.3,0-0.5,0-0.8v-0.5v-0.4c0-0.6,0.1-1.2,0.3-1.7
c0.2-1.1,0.6-2.2,1.2-3.2c0.5-1,1.2-1.8,2-2.5c0.7-0.7,1.6-1.2,2.3-1.6c1.5-0.8,2.9-1.1,3.9-1.1
C156.6,119.4,157.1,119.4,157.1,119.4z"/>
</g>
</g>
<image style="overflow:visible;enable-background:new ;" width="84" height="82" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABSCAYAAADKMvPcAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcdJREFUeNrs3UuSwjAQA1DaF8j9
j5kTMCuqWACZJG23pJa3LDDPssvfIh7JZd/357fPtm2Lh3iJmYBHRRE4KiCVUaMKUhU2EDCVUAMF
UwU20DDZUQMRkxk1UDFZYQMdkw01GDCZUIMFkwWVDhQdNhgxkVEvgR79kM6LgPgvwp2Kd1qyxtEP
zqzsTFgU1J+gsyqpvGM1KirH1lC3E7qqpRWHgFFZkZnfVZXWUd2qaqgDYUBXQoWaFCuMqXBLN3ZU
yA0GZlTorTDGBQD8hi0bKsWxAhMqzeEXCyrVMS0DKt25Nzoq5e0MZFTaO0SoqNS33RBR6a8PoqFK
XHJFQh0KoHCnniplRlLPNpbcK4xqVMl3Q5Wosg+xqlClX7ZVoMo/FVyNOtRBV0+p5BM6K6nfGqoN
6CrUVqArUNuBzoB9Rx1dQVufejIk9dVA7UGzUYc5c7u/QZNR3eWTu78TmpxUgyYXgyan1KDJqAZ1
l8dOqUGdUOyUGtQJNahBXa6PtwZ1Qg3aanpl0INydn/UoMmTf4Mmr6R8BHKju39aljqhyWt8gyZi
ustf6O5Hu09OaFIyndAT6Wz/rKYK06A/MDv89xPcMvNT+RNgAHRQ+6wwubXuAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 58 45)"> </image>
</g>
<g class="UpDown_1">
<path id="mouth" d="M72.4,118.4c1.8,1.4,2.6,3.7,1.7,4.9l0,0c-0.9,1.2-3.4,1.1-5.2-0.2l0,0c-1.8-1.4-2.6-3.7-1.7-4.9l0,0
C68.1,116.9,70.4,116.9,72.4,118.4L72.4,118.4z"/>
<path id="mouth_2" d="M71.5,119.1c1.1,0.8,1.7,2.2,1.2,2.8l0,0c-0.5,0.7-1.9,0.5-3-0.3l0,0c-1.1-0.8-1.7-2.2-1.2-2.8l0,0
C69,118.1,70.3,118.1,71.5,119.1L71.5,119.1z"/>
</g>
<g id="hand_top">
<path class="santa-16" d="M9.9,64.9L9.9,64.9c11.9,0,21.5,6.2,21.5,13.9v9.7c0,7.7-9.6,13.9-21.5,13.9l0,0"/>
<g>
<path class="santa-17" d="M13.7,91.4L13.7,91.4c4,0,7.2,1.9,7.2,4.2V106c0,2.3-3.2,4.2-7.2,4.2l0,0"/>
<g>
<g class="santa-18">
<path d="M26.8,91.1c0,8.4-9.6,15.1-21.5,15.1l0,0c-11.9,0-21.5-6.8-21.5-15.1V80.5c0-8.4,9.6-15.1,21.5-15.1l0,0
c11.9,0,21.5,6.8,21.5,15.1V91.1z"/>
</g>
<g>
<path class="santa-13" d="M29.8,88.1c0,8.4-9.6,15.1-21.5,15.1l0,0c-11.9,0-21.5-6.8-21.5-15.1V77.5c0-8.4,9.6-15.1,21.5-15.1l0,0
c11.9,0,21.5,6.8,21.5,15.1V88.1z"/>
</g>
</g>
</g>
</g>
<g id="hand_bottom">
<path class="santa-19" d="M10.2,212.9L10.2,212.9c4,0,7.2,1.9,7.2,4.2v10.4c0,2.3-3.2,4.2-7.2,4.2l0,0"/>
<g>
<path class="santa-20" d="M23.2,226.7L23.2,226.7c12,0,21.6,6.7,21.6,14.9V252c0,8.2-9.7,14.9-21.6,14.9l0,0"/>
<g>
<g class="santa-18">
<path d="M35.5,254.6c0,9-9.7,16.3-21.6,16.3l0,0c-12,0-21.6-7.3-21.6-16.3v-11.4c0-9,9.7-16.3,21.6-16.3l0,0
c12,0,21.6,7.3,21.6,16.3V254.6z"/>
</g>
<g>
<path class="santa-13" d="M38.5,251.6c0,9-9.7,16.3-21.6,16.3l0,0c-12,0-21.6-7.3-21.6-16.3v-11.4c0-9,9.7-16.3,21.6-16.3l0,0
c12,0,21.6,7.3,21.6,16.3V251.6z"/>
</g>
</g>
</g>
</g>
</g>
</g>
<text id="hohoho1" transform="matrix(1.2043 0 0 1 198.0001 35.0002)" class="hohoho1">HO!</text>
<text id="hohoho2" transform="matrix(1.2043 0 0 1 232.7998 81.4999)" class="hohoho2">HO!</text>
<text id="hohoho3" transform="matrix(1.2043 0 0 1 207.001 145.2382)"class="hohoho3">HO!</text>
</svg>
<div id="Santa_Greeting">
<div id="Santa_Message">
<p>'Twas the night before Christmas, when all through the house</p>
<p>Not a creature was stirring, not even a mouse;</p>
<p>The stockings were hung by the chimney with care,</p>
<p>In hopes that St. Nicholas soon would be there;</p>
<p>The children were nestled all snug in their beds;</p>
<p>While visions of sugar-plums danced in their heads;</p>
<p>And mamma in her 'kerchief, and I in my cap,</p>
<p>Had just settled our pains for a long winter's nap,</p>
<p>When out on the lawn there arose such a clatter,</p>
<p>I sprang from my bed to see what was the matter.</p>
<p>Away to the window I flew like a flash,</p>
<p>Tore open the shutters and threw up the sash.</p>
<p>The moon on the peast of the new-fallen snow,</p>
<p>Gave a lustre of midday to objects below,</p>
<p>When what to my wondering eyes did appear,</p>
<p>But a miniature sleigh and eight tiny rein-deer,</p>
<p>With a little old driver so lively and quick,</p>
<p>I knew in a moment he must be St. Nick.</p>
<p>More rapid than eagles his coursers they came,</p>
<p>And he whistled, and shouted, and called them by name:</p>
<p>"Now, <em>Dasher</em>! now, <em>Dancer</em>! now <em>Prancer</em> and <em>Vixen</em>!</p>
<p>On, <em>Comet</em>! on, <em>Cupid</em>! on, <em>Donner</em> and <em>Blitzen</em>!</p>
<p>To the top of the porch! to the top of the wall!</p>
<p>Now dash away! dash away! dash away all!"</p>
<p>As leaves that before the wild hurricane fly,</p>
<p>When they meet with an obstacle, mount to the sky;</p>
<p>So up to the housetop the coursers they flew</p>
<p>With the sleigh full of toys, and St. Nicholas too—</p>
<p>And then, in a twinkling, I heard on the roof</p>
<p>The prancing and pawing of each little hoof.</p>
<p>As I drew in my head, and was turning around,</p>
<p>Down the chimney St. Nicholas came with a bound.</p>
<p>He was dressed all in fur, from his head to his foot,</p>
<p>And his clothes were all tarnished with ashes and soot;</p>
<p>A bundle of toys he had flung on his back,</p>
<p>And he looked like a pedler just opening his pack.</p>
<p>His eyes—how they twinkled! his dimples, how merry!</p>
<p>His cheeks were like roses, his nose like a cherry!</p>
<p>His droll little mouth was drawn up like a bow,</p>
<p>And the beard on his chin was as white as the snow;</p>
<p>The stump of a pipe he held tight in his teeth,</p>
<p>And the smoke, it encircled his head like a wreath;</p>
<p>He had a poad face and a little round belly</p>
<p>That shook when he laughed, like a bowl full of jelly.</p>
<p>He was chubby and plump, a right jolly old elf,</p>
<p>And I laughed when I saw him, in spite of myself;</p>
<p>A wink of his eye and a twist of his head</p>
<p>Soon gave me to know I had nothing to dread;</p>
<p>He spoke not a word, but went straight to his work,</p>
<p>And filled all the stockings; then turned with a jerk,</p>
<p>And laying his finger aside of his nose,</p>
<p>And giving a nod, up the chimney he rose;</p>
<p>He sprang to his sleigh, to his team gave a whistle,</p>
<p>And away they all flew like the down of a thistle.</p>
<p>But I heard him exclaim, ere he drove out of sight—</p>
<p><em>“Happy Christmas to all, and to all a good night!”</em></p>
</div>
</div>
</div>CSS
Код:
#santa {
position: absolute;
width: 30%;
top: 7%;
right: 0%;
z-index: 1000;
}
#mouth {
animation: HoHoHoMouth 6s infinite 6s;
-webkit-animation: HoHoHoMouth 6s infinite 6s;
opacity: 0;
}
#hohoho1 {
animation: HoHoHoText1 6s infinite 6s;
-webkit-animation: HoHoHoText1 6s infinite 6s;
fill: white;
font-size:20px;
font-weight:700;
opacity: 0;
}
#hohoho2 {
animation: HoHoHoText2 6s infinite 6s;
-wbkit-animation: HoHoHotext2 6s infinite 6s;
font-size:25px;
font-weight:700;
opacity: 0;
fill: red;
}
#hohoho3 {
animation: HoHoHoText3 6s infinite 6s;
-webkit-animation: HoHoHoText3 6s infinite 6s;
font-size:35px;
font-weight:700;
opacity: 0;
fill: yellow;
}
@-webkit-keyframes HoHoHoText1 {
0% {
opacity:0;
}
30% {
opacity:1;
}
40% {
opacity:0;
}
}
@-webkit-keyframes HoHoHoText2 {
0% {
opacity:0;
}
50% {
opacity:1;
}
60% {
opacity:0;
}
}
@-webkit-keyframes HoHoHoText3 {
0% {
opacity:0;
}
70% {
opacity:1;
}
80% {
opacity:0;
}
}
@-webkit-keyframes HoHoHoMouth {
0% {
opacity:0;
}
30% {
opacity:1;
}
40% {
opacity:0;
}
50% {
opacity:1;
}
60% {
opacity:0;
}
70% {
opacity:1;
}
80% {
opacity:0;
}
}
@keyframes HoHoHoText1 {
0% {
opacity:0;
}
30% {
opacity:1;
}
40% {
opacity:0;
}
}
@keyframes HoHoHoText2 {
0% {
opacity:0;
}
50% {
opacity:1;
}
60% {
opacity:0;
}
}
@keyframes HoHoHoText3 {
0% {
opacity:0;
}
70% {
opacity:1;
}
80% {
opacity:0;
}
}
@keyframes HoHoHoMouth {
0% {
opacity:0;
}
30% {
opacity:1;
}
40% {
opacity:0;
}
50% {
opacity:1;
}
60% {
opacity:0;
}
70% {
opacity:1;
}
80% {
opacity:0;
}
}
#Santa_Container {
position: absolute;
margin-right: -35%
}
#Santa_Slide_Panel {
position: absolute;
width: 80%;
height: 100%;
overflow: hidden;
margin-left: -55%;
-webkit-transition: all 3s ease;
transition: all 1000ms ease;
cursor: pointer
}
#Santa_Slide_Panel:hover {
margin-left: 0%;
}
#Santa_Greeting {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 28.75%;
z-index: 100;
/* Brick Tiled Background */
background-color: silver;
background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
#Santa_Message {
position: absolute;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch; /* Accelerates Overflow Scrolling on IOS */
padding:15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 60%;
width: 60%;
box-shadow: 0 0 0 15px #587A55, 0 0 0 17px #587A55, 0 0 0 19px ghostwhite, 0 0 0 26px #1E340E, 0 0 0 40px #1E340E;
background: ghostwhite;
}
#Santa_Message p {
font-family: 'Linden Hill', serif;
font-size: 110%;
color: #587A55;
}
/* ANIMATIONS */
.UpDown_1 {
animation: bottom_animation 6s infinite;
-webkit-animation: bottom_animation 6s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.eyesandbrow {
animation: bottom_animation 6s infinite;
-webkit-animation: bottom_animation 6s infinite;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.shizzle-animated {
visibility: visible !important;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
.Santa_Climbing_Chimney {
-webkit-animation-name: Santa_Climbing_Chimney;
animation-name: Santa_Climbing_Chimney;
animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@-webkit-keyframes Santa_Climbing_Chimney {
0% {
-webkit-transform: translateY(200%);
}
50% {
opacity: 0.7;
-webkit-transform: translateY(100%) rotate(-7deg);
}
75% {
-webkit-transform: translateY(50%) rotate(7deg);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) rotate(0deg);
}
}
@keyframes Santa_Climbing_Chimney {
0% {
transform: translateY(200%);
}
50% {
opacity: 0.7;
transform: translateY(100%) rotate(-7deg);
}
75% {
transform: translateY(50%) rotate(7deg);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0deg);
}
}
.slideScaleUpIn {
-webkit-animation-delay: 1s;
animation-duration: 1s;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 3s;
animation-duration: 3s;
-webkit-animation-name: slideScaleUpIn;
animation-name: slideScaleUpIn;
}
@-webkit-keyframes slideScaleUpIn {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px) scale(.1);
}
80% {
opacity: 1;
-webkit-transform: scale(.8);
}
}
@keyframes slideScaleUpIn {
0% {
opacity: 0;
transform: translateY(-2000px) scale(.1);
}
80% {
opacity: 1;
transform: scale(.8);
}
}
@keyframes bottom_animation {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(2deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(2deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-keyframes bottom_animation {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(2deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(2deg);
}
100% {
transform: rotate(0deg);
}
}
/* SVG DEFAULT STYLING FROM ILLUSTRATOR */
.santa-0 {
fill: #C10E0E;
}
.santa-1 {
fill: #F4C7B3;
}
.santa-2 {
opacity: 0.2;
}
.cheeks {
fill: #EAB5A0;
}
.santa-4 {
fill: #F2F2F2;
stroke: #E6E6E6;
stroke-width: 1.8489;
stroke-miterlimit: 10;
}
.santa-5 {
fill: none;
}
.santa-6 {
fill: #F2F2F2;
}
.santa-7 {
fill: #E6E6E6;
}
.santa-white {
fill: #FFFFFF;
}
.nose {
fill: #EAB5A0;
}
.santa-11 {
fill: #5E5958;
}
.eyeball {
fill: #F9F5F4;
}
.santa-13 {
fill: #D60B0B;
}
.santa-14 {
fill: #BC0202;
}
.santa-15 {
fill: #C6C6C6;
}
.santa-16 {
fill: none;
stroke: #F2F2F2;
stroke-width: 16.7815;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.santa-17 {
fill: #C40808;
}
.santa-18 {
opacity: 0.15;
}
.santa-19 {
fill: #B50808;
}
.santa-20 {
fill: none;
stroke: #F2F2F2;
stroke-width: 17.3975;
stroke-linecap: round;
stroke-miterlimit: 10;
}
/* WebKit Scrollbar Styling */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: -10%;
background-color: rgba(0,62,9,1.00);
}
/* Page Stuff */
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body,
html {
background-color: #000;
color: #fff;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: serif;
}JS
Код:
// JS snow. I always liked the look of Zach's snow.
(function ($) {
//
// Zachary Johnson
// https://www.zachstronaut.com/posts/2009/12/21/happy-xmas-winternet.html
// December 2009
//
var ww = 0;
var wh = 0;
var maxw = 0;
var minw = 0;
var maxh = 0;
var textShadowSupport = true;
var xv = 0;
var snowflakes = ["\u2744", "\u2745", "\u2746"];
var prevTime;
var absMax = 200;
var flakeCount = 0;
$(init);
function init()
{
var detectSize = function ()
{
ww = $(window).width();
wh = $(window).height();
maxw = ww + 300;
minw = -300;
maxh = wh + 300;
};
detectSize();
$(window).resize(detectSize);
if (!$('body').css('textShadow'))
{
textShadowSupport = false;
}
/* Should work in Windows 7 /*
if (/windows/i.test(navigator.userAgent))
{
snowflakes = ['*']; // Windows sucks and doesn't have Unicode chars installed
//snowflakes = ['T']; //No FF support for Wingdings
}
*/
// FF seems to just be able to handle like 50... 25 with rotation
// Safari seems fine with 150+... 75 with rotation
var i = 50;
while (i--)
{
addFlake(true);
}
prevTime = new Date().getTime();
setInterval(move, 50);
}
function addFlake(initial)
{
flakeCount++;
var sizes = [
{
r: 1.0,
css: {
fontSize: 15 + Math.floor(Math.random() * 20) + 'px',
textShadow: '9999px 0 0 rgba(238, 238, 238, 0.5)'
},
v: 2
},
{
r: 0.6,
css: {
fontSize: 50 + Math.floor(Math.random() * 20) + 'px',
textShadow: '9999px 0 2px #eee'
},
v: 6
},
{
r: 0.2,
css: {
fontSize: 90 + Math.floor(Math.random() * 30) + 'px',
textShadow: '9999px 0 6px #eee'
},
v: 12
},
{
r: 0.1,
css: {
fontSize: 150 + Math.floor(Math.random() * 50) + 'px',
textShadow: '9999px 0 24px #eee'
},
v: 20
}
];
var $nowflake = $('<span class="winternetz">' + snowflakes[Math.floor(Math.random() * snowflakes.length)] + '</span>').css(
{
/*fontFamily: 'Wingdings',*/
color: '#eee',
display: 'block',
position: 'fixed',
background: 'transparent',
width: 'auto',
height: 'auto',
margin: '0',
padding: '0',
textAlign: 'left',
zIndex: 9999
}
);
if (textShadowSupport)
{
$nowflake.css('textIndent', '-9999px');
}
var r = Math.random();
var i = sizes.length;
var v = 0;
while (i--)
{
if (r < sizes[i].r)
{
v = sizes[i].v;
$nowflake.css(sizes[i].css);
break;
}
}
var x = (-300 + Math.floor(Math.random() * (ww + 300)));
var y = 0;
if (typeof initial == 'undefined' || !initial)
{
y = -300;
}
else
{
y = (-300 + Math.floor(Math.random() * (wh + 300)));
}
$nowflake.css(
{
left: x + 'px',
top: y + 'px'
}
);
$nowflake.data('x', x);
$nowflake.data('y', y);
$nowflake.data('v', v);
$nowflake.data('half_v', Math.round(v * 0.5));
$('body').append($nowflake);
}
function move()
{
if (Math.random() > 0.8)
{
xv += -1 + Math.random() * 2;
if (Math.abs(xv) > 3)
{
xv = 3 * (xv / Math.abs(xv));
}
}
// Throttle code
var newTime = new Date().getTime();
var diffTime = newTime - prevTime;
prevTime = newTime;
if (diffTime < 55 && flakeCount < absMax)
{
addFlake();
}
else if (diffTime > 150)
{
$('span.winternetz:first').remove();
flakeCount--;
}
$('span.winternetz').each(
function ()
{
var x = $(this).data('x');
var y = $(this).data('y');
var v = $(this).data('v');
var half_v = $(this).data('half_v');
y += v;
x += Math.round(xv * v);
x += -half_v + Math.round(Math.random() * v);
// because flakes are rotating, the origin could be +/- the size of the flake offset
if (x > maxw)
{
x = -300;
}
else if (x < minw)
{
x = ww;
}
if (y > maxh)
{
$(this).remove();
flakeCount--;
addFlake();
}
else
{
$(this).data('x', x);
$(this).data('y', y);
$(this).css(
{
left: x + 'px',
top: y + 'px'
}
);
// only spin biggest three flake sizes
if (v >= 6)
{
$(this).animate({rotate: '+=' + half_v + 'deg'}, 0);
}
}
}
);
}
})(jQuery);
