можно забрать?
крутой диз, его можно под форум любой тематики натянуть.
почистить его? у меня там куча дополнительных оформлений которые будут лишними
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
You are here » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Эксперименты Will O The Wisp
можно забрать?
крутой диз, его можно под форум любой тематики натянуть.
почистить его? у меня там куча дополнительных оформлений которые будут лишними
#p177109,Gerda wrote:можно забрать?
крутой диз, его можно под форум любой тематики натянуть.почистить его? у меня там куча дополнительных оформлений которые будут лишними
да могу почистить. все равно его надо будет в архив упаковывать, чтоб была возможность перезалить картинки и т.д.
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.
таблица
<!--Текст в шапку--> <div id="tableFont"> <div id="news"> <a href="#"> 🐰 Гостевая</a> </div> <div id="news"> <a href="#"> 🐱 Анкета</a> </div> <div id="news" style="margin-left: 120px;"> <a href="#"> 🐭 ФАК</a> </div> <div id="news"> <a href="#"> 🦊 Анкета</a> </div> <style> #news { position: relative; margin-left: 80px; padding: 3px; width: 120px; height: 18px; background: #ffffff73; border-radius: 20px; display: inline-block; top: -10px; text-align: center; } #news a{ font-family: 'mr_honeybeeg'; color: #000; font-size: 11px; } </style> <div style=" margin: 20px 0px 0px 6px; background: #ffffff; width: 963px; height: 140px; position: absolute; "> <div style=" margin-left: 10px; position: absolute; top: -15px; width: 190px; font-family: Klaristha-Thin; color: #aaa7e1; font-size: 3em; text-shadow: 2px 2px 2px #ecccc1; font-weight: 600; height: 20px; text-align: center; "> Intro </div> <div style=" margin-left: 10px; position: absolute; top: 20px; width: 190px; color: #6763b1; font-size: 10px; text-shadow: 2px 2px 2px #fff; font-weight: 400; height: 115px; text-align: justify; background: #9ca1d745; overflow: auto; "> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div style=" margin-left: 210px; position: absolute; top: -15px; width: 190px; font-family: Klaristha-Thin; color: #aaa7e1; font-size: 3em; text-shadow: 2px 2px 2px #ecccc1; font-weight: 600; height: 20px; text-align: center; "> Personalities </div> <div style=" margin-left: 225px; position: absolute; top: 25px; width: 190px; "> <style> .minreqpic { border: 1px solid #dedede; padding: 3px; background-color: #fff; width: 40px; height: 40px; margin-top: 2px; margin-bottom: 0px; margin-right: 0px; margin-left: 0px; } .minreqpic img{ width: 40px; height: 40px; } </style> <table> <tr> <td> <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='тут'></div> </td> <td> <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='там'></div> </td> <td> <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='тут'></div> </td> </tr> </table> <table> <tr> <td> <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='там'></div> </td> <td> <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='дам'></div> </td> <td> <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='бым'></div> </td> </tr> </table> </div> <div style=" margin-left: 550px; position: absolute; top: -15px; width: 160px; font-family: Klaristha-Thin; color: #aaa7e1; font-size: 3em; text-shadow: 2px 2px 2px #ecccc1; font-weight: 600; height: 20px; text-align: center; "> News </div> <div style=" margin-left: 555px; position: absolute; top: 20px; width: 165px; color: #6763b1; font-size: 10px; text-shadow: 2px 2px 2px #fff; font-weight: 400; height: 115px; text-align: justify; background: #9ca1d745; overflow: auto; "> <p class="data">93/19/2922</p>Lorem ipsum dolor sit amet laborum<br> </div> <style> #u-ava{ position: absolute; margin: 0px 0px 0px 0px; } #u-text a{ font-size: 1.4em; width: 100%; display: block; color: #a6a6df; margin-top: 10px; text-shadow: none; height: 20px; text-align: center; text-overflow: ellipsis; border-bottom: 2px solid #aea9e3; white-space: nowrap; font-family: mr_honeybeeg; font-weight: 400; } #u-text { margin: 0px 0px 0px -115px; position: absolute; width: 90px; padding: 2px; height: 105px; } </style> <div style=" margin-left: 837px; padding-top: 0px; top: 15px; position: absolute; "> <div id="u-ava"></div> <script type="text/javascript"> if (UserAvatar == ""){UserAvatar = "https://i.imgur.com/Loj69oi.png"} var arr=document.getElementsByTagName("div") i=0 while(arr[i] ){ if(arr[i].id=="u-ava") { name=arr[i].innerHTML name=name.substring(0) arr[i].innerHTML="<a href='/profile.php?section=avatar&id="+UserID+"' title='Сменить аватар'><img style='max-width:110px;max-height:110px;border: 5px double #9ca0d7;' src="+UserAvatar+"></a>"+name } if(arr[i].id=="u-ava" && GroupID == "3") { arr[i].innerHTML="<a href='/register.php'><img style='padding-top:0px; max-width:110px;max-height:110px;border: 5px double #9ca0d7;' src='https://i.ibb.co/x7GDbZm/image.png' title='Зарегаться'></a>"+name } i++} </script> <div id="u-text"></div> <script type="text/javascript"> var arr=document.getElementsByTagName("div") i=0 while(arr[i] ){ if(arr[i].id=="u-text") { name=arr[i].innerHTML name=name.substring(0) arr[i].innerHTML="<a href='/respect.php?id="+UserID+"'>Уважение</a><a href='/profile.php?id="+UserID+"'>Мой профиль</a> <a href='/messages.php'>Личные сообщения</a>"+name }i++} </script> <script type="text/javascript"> var arr=document.getElementsByTagName("div") i=0 str=document.URL while(arr[i] ){ if(arr[i].id == "u-text" && GroupID == "3"){ name=arr[i].innerHTML name=name.substring(0) arr[i].innerHTML="<li id=\'navpiar\'><a onclick='/viewtopic.php?id=2'><span style=\'cursor:pointer\'>Будь как дома</span></a></li>" }i++} </script> <figure> <audio controls src="#" style="width: 110px;height: 20px;position: absolute;margin: 100px 0px 0px -115px;filter: opacity(0.2);"> </audio> </figure> </div> <div style=" margin-left: 404px; position: absolute; padding-top: 0px; top: -40px; width: 130px; height: 130px; border-radius: 50%; border: 2px solid #fff; background: url(https://64.media.tumblr.com/94f4d2da6f09060a751afba0b47842d9/ada143f7b4c4ec19-e0/s500x750/d1ce754718352c043a559fe8a01e2a6eaf7d57e7.gif); background-color: #ccc; background-position: center center; background-size: cover; background-blend-mode: overlay; z-index: 0; "> </div> <div style=" margin-left: 509px; position: absolute; padding-top: 0px; top: -30px; width: 50px; height: 50px; background: url(https://i.imgur.com/Czy3XLw.png); background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-position: center center; background-repeat: no-repeat; z-index: 1; "> </div> <div style=" margin-left: 410px; position: absolute; top: 85px; width: 180px; font-family: Klaristha-Thin; color: #aaa7e1; font-size: 3em; text-shadow: 2px 2px 2px #ecccc1; font-weight: 600; height: 20px; "> Название <b style="font-size: 0.5em !important; color: #eca1d8; font-family: mr_honeybeeg; line-height: 1px; position: absolute; margin: 44px 0px 0px -122px; width: 170px; text-shadow: 0 0 #9b9fd6; text-transform: lowercase; font-weight: 400; height: 10px;"> Названия </b> </div> </div>
стрелки
<!--Стрелки вверх и вниз--> <div style="position:fixed;z-index:1002; right: 10%; bottom: 30%;"> <a href="#top" onclick="$('html,body').scrollTop(0); return false;"> <img src="https://i.imgur.com/Czy3XLw.png" alt="Вверх страницы" style=" position: fixed; margin-left: 1px; width: 5vw; margin-top: -60px; filter: hue-rotate(320deg); "></a> <br> <a href="#bottom" onclick="$('html,body').scrollTop(document.body.scrollHeight); return false;"> <img style="width: 5vw; filter: hue-rotate(320deg);" src="https://i.imgur.com/Czy3XLw.png" alt="Вниз страницы"></a> </div> <!-- КОНЕЦ -->
можно еще баннеры
<!---------------------------- баннеры ----------------------------> <div id="partners"> <div style="text-align: center;"> <style> :root { --size: clamp(10rem, 1rem + 40vmin, 30rem); --gap: calc(var(--size) / 14); --duration: 60s; --scroll-start: 0; --scroll-end: calc(-100% - var(--gap)); } .marquee { display: flex; overflow: hidden; user-select: none; gap: var(--gap); mask-image: linear-gradient( var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0) ); } .marquee__group { flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll-x var(--duration) linear infinite; } .marquee--vertical .marquee__group { flex-direction: column; } .marquee--vertical .marquee__group { animation-name: scroll-y; } .marquee--reverse .marquee__group { animation-direction: reverse; animation-delay: -3s; } @keyframes scroll-x { from { transform: translateX(var(--scroll-start)); } to { transform: translateX(var(--scroll-end)); } } /* Parent wrapper */ .wrapper { display: flex; flex-direction: column; margin: auto; max-width: 100vw; } </style> <article class="wrapper"> <div class="marquee"> <div class="marquee__group"> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> </div> <div aria-hidden="true" class="marquee__group"> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> </div> </div> <div class="marquee marquee--reverse"> <div class="marquee__group"> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a> </div> <div aria-hidden="true" class="marquee__group"> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> <a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a> </div> </div> </article> </div> </div> <style>#partners {text-align: center; height: 70px; margin: 35px 0px 0px -10px; overflow-y: auto; position: absolute; width: 960px; z-index: 100; padding: 3px; border: 2px solid #c8d6e1; background: url(https://i.ibb.co/7R3RgQR/image.png); overflow: hidden; box-shadow: #c8d6e1 0px 1px 4px 0px;} #partners:hover { filter: none;} #partners img {opacity: 0.8;} #partners img:hover, #partners img:focus {opacity: 1.0;} </style>
да могу почистить. все равно его надо будет в архив упаковывать, чтоб была возможность перезалить картинки и т.д.
там именно что картинки в шапке рандомные, под профиль тоже
не требуют обрезки и подгонки
разве что выглядеть будут потом не очень где-то
дополнительно: оформление форумов
<table> <tr> <td style="width: 30%;"><a href="#" class="anew1">гостевая книга</a><br> <a href="#" class="anew1">гостевая книга</a><br> <a href="#" class="anew1">гостевая книга</a><br> <a href="#" class="anew1">гостевая книга</a><br> <a href="#" class="anew1">гостевая книга</a><br></td> <td><p align="justify";> <i>Описание</i> Не думайте, что я уклоняюсь от работы. Я люблю работу. Работа увлекает меня. Я часами могу сидеть и смотреть, как работают. </tr> </table>
плюсы
<!--// Быстроплюсы v.2 РЕНО by Deff //--> <script type="text/javascript" src="https://forumstatic.ru/files/0012/d8/04/58219.js" addComment="1"></script>
использование рамок для картинок в этом месте
.post-content img[alt="imgBorder"] { background: url(http://www.lenagold.ru/fon/pred/bum/map/map01.jpg) repeat; padding: 10px 10px 10px 10px; width: 90%; }
картинки для анкет и оформления применять так:
img=imgBorder] тут оно самое[/img
со скобами
меню-меню
можно вставить в объявление и любоваться
<style> .social { position: fixed; top: 20px; } .social ul { padding: 0px; -webkit-transform: translate(-550px, 0); -moz-transform: translate(-550px, 0); -ms-transform: translate(-550px, 0); -o-transform: translate(-550px, 0); transform: translate(-550px, 0); } .social ul li { display: block; margin: 5px; background: rgba(0, 0, 0, 0.36); width: 300px; text-align: right; padding: 10px; -webkit-border-radius: 0 30px 30px 0; -moz-border-radius: 0 30px 30px 0; border-radius: 0 30px 30px 0; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .social ul li:hover { -webkit-transform: translate(110px, 0); -moz-transform: translate(110px, 0); -ms-transform: translate(110px, 0); -o-transform: translate(110px, 0); transform: translate(110px, 0); background: rgba(255, 255, 255, 0.4); } .social ul li:hover a { color: #000; } .social ul li:hover i { color: #fff; background: red; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .social ul li i { margin-left: 10px; color: #000; background: #fff; padding: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 20px; height: 20px; font-size: 20px; background: #ffffff; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } </style> <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <nav class="social"> <ul> <li><a href="#">Форум<i class="fa fa-comments"></i></a></li> <li><a href="#">Не форум<i class="fa fa-folder-open"></i></a></li> <li><a href="#">Еще форум<i class="fa fa-database"></i></a></li> <li><a href="#">Снова<i class="fa fa-long-arrow-up"></i></a></li> </ul> </nav>
код добавляет гирлянду к элементу с примерами использования
хотя как это использовать я не знаю
Will O The Wisp Я всё равно это добавила: Новогодние украшения для форума и сайта (css/js)
Штука крутая!
Отвечаю на вопросы вот здесь | Мой блог
"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер
Елочка интерактивная, кредиты в коде
[html] <style> .cc { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .bc { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } /*============================*/ /*============TREE============*/ .tree { width: 70vh; height: 80%; } .segment::before { content: ' '; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; border-style: solid; border-color: transparent transparent #1f4f15 transparent; border-radius: 40%; } .segment { top: 35%; overflow: hidden; } .segment::after { content: ' '; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-style: solid; border-color: transparent transparent #F9F9F9 transparent; border-radius: 35%; } .segment[value="0"]{width: 70vh; height: 70vh; z-index:0;} .segment[value="1"]{width: 50vh; height: 50vh; z-index:1;} .segment[value="2"]{width: 30vh; height: 30vh; z-index:2;} .segment[value="0"]::before{border-width: 35vh;} .segment[value="1"]::before{border-width: 25vh;} .segment[value="2"]::before{border-width: 15vh;} .segment[value="0"]::after{border-width: 23.5vh;} .segment[value="1"]::after{border-width: 14vh;} .segment[value="2"]::after{border-width: 7vh;} .highlight { position: absolute; width: 10%; height: 35%; bottom: 3.25%; left: 67.25%; border-radius: 0 0 0 100%; transform: rotate(-45deg); background: #216315; } .stump { position: absolute; left: 50%; bottom: 0; width: 15vh; height: 25vh; background: #3f2b27; transform: translateX(-50%); border-radius: 6vh; overflow: hidden; } .stump::after { content: ' '; position: absolute; right: 0; width: 15%; height: 100%; background: #47332b; border-radius: 0 0 0 100%; } .ball { position: absolute; bottom: 0; width: 5vh; height: 5vh; border-radius: 5vh; background: #7a3232; transform-origin: 50% -50%; transition: all 0.2s ease-in-out; z-index: 3; } .ball::after { content: ' '; position: absolute; top: 10%; right: 12.5%; width: 50%; height: 40%; border-radius: 100%; background: #D14B4B; } .ball:nth-child(1) { bottom: 10%; left: 20%; } .ball:nth-child(2) { bottom: 7.5%; left: 65%; } .ball:nth-child(3) { bottom: 3%; left: 42.5%; } /*============TREE============*/ /*============================*/ /*============================*/ /*==========PRESENTS==========*/ .present:before { content: ' '; display: none; } .present.open::before { position: absolute; width: 100%; height: 35%; transform: translateY(-100%); background: #5B1616; border-radius: 10%; display: block; } .present { position: absolute; left: 0; bottom: 0; width: 12vh; height: 12vh; background: #7f2121; transition: transform 0.2s ease-in; transform-origin: center center; border-radius: 10%; cursor: pointer; } .bow { width: 30%; height: 100%; background: #D4C228; z-index: 2; } .bow::after { content: ' '; display: block; width: 90%; height: 100%; background: #E0CF43; transform: rotate(90deg); } .bow:nth-child(2) { top: 0; left: -62.5%; width: 175%; height: 30%; transform: translate(14%,-100%) scale(0.575); z-index: 2; background: #847A23; display: none; } .bow:nth-child(2)::after { position: absolute; top: -49%; left: 31.5%; width: 37.5%; height: 175%; background: #9D912D; } .present.open .bow:nth-child(2) { display: block; } /*==========PRESENTS==========*/ /*============================*/ /*============================*/ /*==========LETTERS===========*/ .letter { position: absolute; font-size: 5vh; color: white; transition: all 1.2s ease-in-out; text-align: center; } /*==========LETTERS===========*/ /*============================*/ </style> <script> /* * Made by C.Dinkelborg for GetDigital * Geekolaus Aktion * Aktionscode: G6NK5AUVB * @2016 all rights reserved */ var balls = document.getElementsByClassName("ball"); var presents = document.getElementsByClassName("present"); for(var i=0; i<balls.length; i++) { balls[i].addEventListener("mouseover",onMouseOverBall); balls[i].addEventListener("touchstart",onMouseOverBall); }; for(var i=0; i<presents.length; i++) { presents[i].addEventListener("mouseover",onMouseOverPresent); presents[i].addEventListener("click",onClickPresent); }; function onMouseOverBall(e) { if(!this.swinging) { var rect = this.getBoundingClientRect(); if(e.clientX < (rect.left+this.clientWidth/2)) // This means mouse is left of ball { this.swinging = true; this.style.transform = "rotate(-45deg)"; setTimeout(function(){swing(this,300-70)}.bind(this),300); } else { this.swinging = true; swing(this,300); } } } function swing(ball,time) { //console.log(ball); if(ball.style.transform == "rotate(45deg)") { ball.style.transform = "rotate(-45deg)"; } else { ball.style.transform = "rotate(45deg)"; } if(time>0) { setTimeout(function() { swing.call(this, ball,time-70); },time); } else { ball.style.transform = ""; ball.swinging = false; } } function onMouseOverPresent(e) { if(!this.wiggling && !this.classList.contains("open")) { var rect = this.getBoundingClientRect(); if(e.clientX < (rect.left+this.clientWidth/2)) // This means mouse is left of present { this.wiggling = true; this.style.transform = "rotate(45deg)"; setTimeout(function(){wiggle(this,300-70,"left")}.bind(this),300); } else { this.wiggling = true; wiggle(this,300,"right"); } } } function onClickPresent() { setTimeout(function() { this.classList.add("open"); unfold(); }.bind(this),1000); } function wiggle(present,time,direction) { if(direction == "left") { if(present.style.transform == "rotate(45deg)") { present.style.transform = "rotate(0deg)"; } else { present.style.transform = "rotate(45deg)"; } } else { if(present.style.transform == "rotate(-45deg)") { present.style.transform = "rotate(0deg)"; } else { present.style.transform = "rotate(-45deg)"; } } if(time>0) { setTimeout(function() { wiggle.call(this, present,time-70,(direction == "left")?"right":"left"); },time); } else { present.style.transform = ""; present.wiggling = false; } } var letters = document.getElementsByClassName("letter"); function unfold() { for(var i=0; i<letters.length; i++) { letters[i].style.top = "-75vh"; letters[i].style.transform = "translateY("+i*5+"vh)"; } } //SNOW EFFECT WITH KIND SUPPORT FROM //http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect window.onload = function(){ //canvas init var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //canvas dimensions var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; //snowflake particles var mp = 25; //max particles var particles = []; for(var i = 0; i < mp; i++) { particles.push({ x: Math.random()*W, //x-coordinate y: Math.random()*H, //y-coordinate r: Math.random()*4+1, //radius d: Math.random()*mp //density }) } //Lets draw the flakes function draw() { ctx.clearRect(0, 0, W, H); ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; ctx.beginPath(); for(var i = 0; i < mp; i++) { var p = particles[i]; ctx.moveTo(p.x, p.y); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); } ctx.fill(); update(); } //Function to move the snowflakes //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes var angle = 0; function update() { angle += 0.01; for(var i = 0; i < mp; i++) { var p = particles[i]; //Updating X and Y coordinates //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards //Every particle has its own density which can be used to make the downward movement different for each flake //Lets make it more random by adding in the radius p.y += Math.cos(angle+p.d) + 1 + p.r/2; p.x += Math.sin(angle) * 2; //Sending flakes back from the top when it exits //Lets make it a bit more organic and let flakes enter from the left and right also. if(p.x > W+5 || p.x < -5 || p.y > H) { if(i%3 > 0) //66.67% of the flakes { particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d}; } else { //If the flake is exitting from the right if(Math.sin(angle) > 0) { //Enter from the left particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; } else { //Enter from the right particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d}; } } } } } //animation loop setInterval(draw, 33); } </script> <canvas id="canvas"></canvas> <div class="tree cc"> <div class="stump"> </div> <div class="segment cc" value="0"> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> <div class="highlight bc"></div> <div class="segment cc" value="1"> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> <div class="highlight bc"></div> <div class="segment cc" value="2"> <div class="ball"></div> <div class="ball"></div> <div class="highlight bc"></div> </div> </div> </div> <div class="present"> <div class="bow cc"></div> <div class="bow cc"></div> <div class="letter cc">F</div> <div class="letter cc">R</div> <div class="letter cc">O</div> <div class="letter cc">H</div> <div class="letter cc">E</div> <div class="letter cc">S</div> <div class="letter cc"> </div> <div class="letter cc">F</div> <div class="letter cc">E</div> <div class="letter cc">S</div> <div class="letter cc">T</div> <div class="letter cc">!</div> </div> </div> [/html]
Елочка интерактивная, кредиты в коде
Спасибо за находку, опубликовала: Новогодние украшения для форума и сайта (css/js)
Хотя ты и сам можешь публиковать в темы с украшениями, если хочешь.
Отвечаю на вопросы вот здесь | Мой блог
"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер
Automation Baby
я тут в таком софтовом варианте, ничего не комментирую, а надо бы окончательно доводить до рабочего состояния
какие-то принципы может будут полезны, но в целом ради хранения и запоминания коды
You are here » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Эксперименты Will O The Wisp