Елка: До нового года осталось...


Елка: До нового года осталось...

3614
10 из 10
Проголосовало: 3






Будем делать новогоднюю ёлку с обратным отсчетом времени до Нового года. Ёлка сделана на CSS3, а счетчик использует jQuery плагин. И плюс шарики с пожеланиями.

Разметка HTML

Code
<div class="text">До Нового Года осталось...</div>
<div class="fir-tree"><div class="stem"></div>
<div class="conf-stem"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
   
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
   
<div id="bauble-container">
  <div id="star-five"></div>
  <div class="desc">
  <div class="bauble red-bauble" id="bauble1"></div>
  <small>Дед Мороз прислал нам ёлку,
  Огоньки на ней зажёг,
  И блестят на ней иголки,
  А на веточках - снежок!</small>
  </div>
   
   
  <div class="desc">
  <div class="bauble blue-bauble" id="bauble2"></div>
  <small>Засверкай, огнями елка,
  Hac на праздник позови!
  Все желания исполни,
  Все мечты осуществи!</small>
  </div>
   
  <div class="desc">
   
  <div class="bauble yellow-bauble" id="bauble3"></div>
  <small>Стоит она пушистая,
  От снега серебристая!
  Красивые иголки
  У новогодней ёлки. </small>
  </div>
   
  <div class="desc">
  <div class="bauble green-bauble" id="bauble4"></div>
   
  <small>Здравствуй, праздник новогодний,
  Праздник ёлки и зимы!
  Всех друзей своих сегодня
  Позовём на ёлку мы. </small>
  </div>
   
  <div class="desc">
  <div class="bauble yellow-bauble" id="bauble5" style="margin-left: 70px"></div>
  <small>Стоит она пушистая,
  От снега серебристая!
  Красивые иголки
  У новогодней ёлки. </small>
   
  </div>
   
  <div class="desc">
  <div class="bauble red-bauble" id="bauble6"></div>
  <small>Висят на ветках шарики,
  Волшебные фонарики,
  И бусы и снежинки,
  И голубые льдинки!</small>
  </div>
   
  <div class="desc">
  <div class="bauble blue-bauble" id="bauble7" style="margin-left: 20px"></div>
  <small>Висят на ветках шарики,
  Волшебные фонарики,
  И бусы и снежинки,
  И голубые льдинки!</small>
  </div>
   
  <div class="desc">
  <div class="bauble red-bauble" id="bauble8" style="margin-left: 80px"></div>
  <small>Висят на ветках шарики,
  Волшебные фонарики,
  И бусы и снежинки,
  И голубые льдинки!</small>
  </div>
   
  <div class="desc">
   
  <div class="bauble yellow-bauble" id="bauble9" style="margin-left: 0px;"></div>
  <small>Стоит она пушистая,
  От снега серебристая!
  Красивые иголки
  У новогодней ёлки. </small>
  </div>
   
  <div class="desc">
  <div class="bauble green-bauble" id="bauble10" style="margin-left: 100px"></div>
   
  <small>Дети водят хоровод,
  Хлопают в ладоши.
  Здравствуй, здравствуй,
  Новый год! Ты такой хороший! .</small>
  </div>
   
  <div class="desc">
  <div class="bauble withe-bauble" id="bauble11"></div>
  <small>Засверкай, огнями елка,
  Hac на праздник позови!
  Все желания исполни,
  Все мечты осуществи! .</small>
   
  </div>
   
  <div class="desc">
  <div class="bauble yellow-bauble" id="bauble12" style="margin-left: 120px; margin-top:-5px;"></div>
  <small>Висят на ветках шарики,
  Волшебные фонарики,
  И бусы и снежинки,
  И голубые льдинки!</small>
  </div>
   
</div>
   
<div class="timer">
<div id="defaultCountdown">
</div></div>
   
</div>


CSS

Code
body {
  background: White;
}
   
.text {
   
  margin: 0 auto;
  width: 800px;
  font-size: 40px;
  color: #000;  
  font-family: Verdana, Arial;
  text-align: center;
  font-weight:bold;
  text-shadow: 4px 4px 7px rgba(0,0,0,0.2),
  0px -6px 38px rgba(255,255,255,0.3);
}
   
.fir-tree {
  position: absolute;
  top: 80%;
  left: 45%;
  width: 100px;
  height: 30px;
}
   
.fir-tree .conf-stem {
  position: absolute;
  top: 14px;
  width: 100px;
  border-bottom: 16px solid Silver;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;  
}
   
.fir-tree .stem {
  position: absolute;
  top: -120%;
  left: 41%;
  width: 30px;
  height: 60px;
  background: Brown;
}
   
.fir-tree .a {
  position: inherit;
  top: -430%;
  left: -65%;
  width:0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 120px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;  
}
   
.fir-tree .b {
  position: inherit;
  top: -485%;
  left: -55%;
  width:0;
  height: 0;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 110px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .c {
  position: inherit;
  top: -535%;
  left: -45%;
  width:0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .d {
  position: inherit;
  top: -585%;
  left: -35%;
  width:0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 90px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .e {
  position: inherit;
  top: -635%;
  left: -25%;
  width:0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 80px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;  
}
   
.fir-tree .f {
  position: inherit;
  top: -685%;
  left: -15%;
  width:0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 70px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .g {
  position: inherit;
  top: -725%;
  left: -5%;
  width:0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 60px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .h {
  position: inherit;
  top: -765%;
  left: 5%;
  width:0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .i {
  position: inherit;
  top: -805%;
  left: 15%;
  width:0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .j {
  position: inherit;
  top: -835%;
  left: 25%;
  width:0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .k {
  position: inherit;
  top: -855%;
  left: 35%;
  width:0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .l {
  position: inherit;
  top: -872%;
  left: 45%;
  width:0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid Green;
/* Only FF, Safari, Chrome (I don't use this in IE and Opera because this function doesn't work correctly) */
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}
   
.fir-tree .timer{
  position: absolute;
  top: -670%;
  left: 10%;
  z-index: 50;
  font-size: 15px;
  color: #ffffff;  
  font-family: Verdana, Arial;
}
   
   
   
/* Timer */
.countdown_show1 .countdown_section {
  width: 200%;
}
.countdown_show2 .countdown_section {
  width: 100%;
}
.countdown_show3 .countdown_section {
  width: 100%;
}
.countdown_show4 .countdown_section {
  width: 100%;
}
.countdown_show5 .countdown_section {
  width: 100%;
}
.countdown_show6 .countdown_section {
  width: 100%;
}
.countdown_show7 .countdown_section {
  width: 60%;
}
.countdown_section {
  display: block;
  float: left;
  font-size: 80%;
  text-align: center;
}
.countdown_amount {
  font-size: 200%;
}
.countdown_descr {
  display: block;
  width: 100%;
}
#bauble-container
{
  list-style: none; /* Remove bullets */
  width: 100px;
  padding: 0;  
  position: absolute;
  top: -250px;
}
   
#bauble-container div
{
  height: 10px;
  margin-bottom: 10px;
}
   
   
/* Style the bauble */
.bauble
{
  -moz-border-radius: 10px;
  border-radius: 10px;
   
  -moz-box-shadow: 0 0 5px #777777;
  box-shadow: 0 0 5px #777777;
  -webkit-box-shadow: 0 0 5px #777777;
   
  border: 1px solid rgba(0,0,0,0.3);
  position: relative;
  height: 10px;
  width: 10px;
  z-index: 9999;
   
  -moz-animation:loading 10s linear infinite;
  -webkit-animation:loading 10s linear infinite;
  -ms-animation:loading 10s linear infinite;
  -o-animation:loading 10s linear infinite;
  animation:loading 10s linear infinite;
}
#bauble1 {  
-moz-animation-delay:1.5s;  
-webkit-animation-delay:1.5s;  
-ms-animation-delay:1.5s;  
-o-animation-delay:1.5s;  
animation-delay:1.5s;  
}
#bauble2 {  
-moz-animation-delay:3s;  
-webkit-animation-delay:3s;  
-ms-animation-delay:3s;  
-o-animation-delay:3s;  
animation-delay:3s;  
}
#bauble3 {  
-moz-animation-delay:0.5s;  
-webkit-animation-delay:0.5s;  
-ms-animation-delay:0.5s;  
-o-animation-delay:0.5s;  
animation-delay:0.5s;  
}
#bauble4 {  
-moz-animation-delay:2s;  
-webkit-animation-delay:2s;  
-ms-animation-delay:2s;  
-o-animation-delay:2s;  
animation-delay:2s;  
}
#bauble5 {  
-moz-animation-delay:2.5s;  
-webkit-animation-delay:2.5s;  
-ms-animation-delay:2.5s;  
-o-animation-delay:2.5s;  
animation-delay:2.5s;  
}
#bauble6 {  
-moz-animation-delay:3.5s;  
-webkit-animation-delay:3.5s;  
-ms-animation-delay:3.5s;  
-o-animation-delay:3.5s;  
animation-delay:3.5s;  
}
#bauble7 {  
-moz-animation-delay:4s;  
-webkit-animation-delay:4s;  
-ms-animation-delay:4s;  
-o-animation-delay:4s;  
animation-delay:4s;  
}
#bauble8 {  
-moz-animation-delay:5s;  
-webkit-animation-delay:5s;  
-ms-animation-delay:5s;  
-o-animation-delay:5s;  
animation-delay:5s;  
}
#bauble9 {  
-moz-animation-delay:4.5s;  
-webkit-animation-delay:4.5s;  
-ms-animation-delay:4.5s;  
-o-animation-delay:4.5s;  
animation-delay:4.5s;  
}
#bauble10 {  
-moz-animation-delay:1.5s;  
-webkit-animation-delay:1.5s;  
-ms-animation-delay:1.5s;  
-o-animation-delay:1.5s;  
animation-delay:1.5s;  
}
#bauble11 {  
-moz-animation-delay:2.5s;  
-webkit-animation-delay:2.5s;  
-ms-animation-delay:2.5s;  
-o-animation-delay:2.5s;  
animation-delay:2.5s;  
}
#bauble12 {  
-moz-animation-delay:3.5s;  
-webkit-animation-delay:3.5s;  
-ms-animation-delay:3.5s;  
-o-animation-delay:3.5s;  
animation-delay:3.5s;  
}
   
@keyframes loading {
  0%{transform:scale(1,1);}
  30%{transform:scale(0.5,0.5);}
  60%{transform:scale(1.2,1.2);}
  100%{transform:scale(1,1);}
}
@-moz-keyframes loading {
  0%{-moz-transform:scale(1,1);}
  30%{-moz-transform:scale(0.5,0.5);}
  60%{-moz-transform:scale(1.2,1.2);}
  100%{-moz-transform:scale(1,1);}  
}
@-webkit-keyframes loading {
  0%{-webkit-transform:scale(1,1);}
  30%{-webkit-transform:scale(0.5,0.5);}
  60%{-webkit-transform:scale(1.2,1.2);}
  100%{-webkit-transform:scale(1,1);}  
}
@-ms-keyframes loading {
  0%{-ms-transform:scale(1,1);}
  30%{-ms-transform:scale(0.5,0.5);}
  60%{-ms-transform:scale(1.2,1.2);}
  100%{-ms-transform:scale(1,1);}
}
@-o-keyframes loading {
  0%{-o-transform:scale(1,1);}
  30%{-o-transform:scale(0.5,0.5);}
  60%{-o-transform:scale(1.2,1.2);}
  100%{-o-transform:scale(1,1);}
}
   
/* Colorize them */
.red-bauble
{
  background: #c8171f;
  background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
  background: -webkit-radial-gradient(center,circle cover, #f9d0be, #c8171f);
  margin-left: 50px;
}
   
.blue-bauble
{
  background: #00a1ee; /* Fallback */
  background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
  background: -webkit-radial-gradient(center,circle cover, #cde6f9, #00a1ee);
  margin-left: 40px;
}
   
.yellow-bauble
{
  background: #fcb83d; /* Fallback */  
  background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
  background: -webkit-radial-gradient(center,circle cover, #fcf3a6, #fcb83d);
  margin-left: 60px;
}
   
.green-bauble
{
  background: #4d8d00; /* Fallback */
  background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
  background: -webkit-radial-gradient(center,circle cover, #d1e5b2, #4d8d00);
  margin-left: 30px;
}
.withe-bauble
{
  background: #fff; /* Fallback */
  background: -moz-radial-gradient(center 45deg,circle cover, #fff, #000);
  background: -webkit-radial-gradient(center, circle cover, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
  margin-left: -20px;
}
   
.desc{
  width:10px;
  position: relative;
}
.desc small {  
  background:Azure;  
  text-align:center;  
  width:220px;  
  padding:5px;  
  border: 1px solid Highlight;  
  border-radius:3px;  
  display:none;  
  color: ActiveCaption;  
  font-size:0.8em;  
  text-indent:0;
  z-index: 9999;  
}
   
.desc:hover small {  
  display:block;  
  position:absolute;  
  top:0px;  
  left:50%;  
  margin:-70px;  
  z-index:9999;  
  -moz-animation:mymove .25s linear;  
  -webkit-animation:mymove .25s linear;  
}  
#star-five {
  margin: 0;
  position: absolute;
  display: block;
  color: red;
  width: 0px;
  left:45px;
  top: -15px;
  height: 0px !important;
  border-right: 10px solid transparent;
  border-bottom: 8px solid red;
  border-left: 10px solid transparent;
  -moz-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -o-transform: rotate(35deg);
  box-shadow:0 0 9px red;
}
#star-five:before {
  border-bottom: 6px solid red;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -4px;
  left: -6px;
  display: block;
  content: '';
  -webkit-transform: rotate(-35deg);
  -moz-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  -o-transform: rotate(-35deg);
  box-shadow:0 0 9px red;
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  top: 0px;
  left: -10px;
  width: 0px;
  height: 0px;
  border-right: 10px solid transparent;
  border-bottom: 8px solid red;
  border-left: 10px solid transparent;
  -webkit-transform: rotate(-70deg);
  -moz-transform: rotate(-70deg);
  -ms-transform: rotate(-70deg);
  -o-transform: rotate(-70deg);
  content: '';
  box-shadow:0 0 9px red;
}


javascript

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.countdown.min.js" type="text/javascript"></script>
<script src="js/jquery.countdown-ru.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  var austDay = new Date(2012, 1, 1, 00, 00, 00) ;
  austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 1);
  $('#defaultCountdown').countdown({until: austDay});
  $('#year').text(austDay.getFullYear());
});
</script>


файлы js заливаете себе на сайт
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 6
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: