Правила форума Подписки Ленточный
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Ловец снов (ОБТ) (0)
Контракт: Выходец с того ... (0)
Prosectors Project 1.7 (0)
Тайна Кордона (0)
История Джона 2 (ОБТ) (0)
У костра (193)
Анекдоты (145)
Города (94)
Обновления сайта (77)
Свалка (68)
StraNNik (1416)
RamzeS (513)
Каратель (170)
Narkostalker (121)
Кракен (93)
Fugaz56 (09.08.2023)
Пряня (22.06.2023)
yaroslavcohevis80 (16.11.2022)
61373872 (12.08.2022)
vhaack72 (15.06.2022)
  • Страница 1 из 1
  • 1
Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Анимированная кнопка для скачивания с использованием SVG и V
Анимированная кнопка для скачивания с использованием SVG и V
Слышу гимн зашитых ртов
StraNNik
Группа: Администратор
Ранг: Опытный
Сообщений: 1416
Карма: 33
Сообщение # 1
Дата: 01.02.2019 в 16:44

Довольно интересное и уникальное решение для кнопки загрузки/скачивания файлов. Данная кнопка анимируется и добавляет красивый эффект при клике по ней. Стиль, цвет и т.д. вы сможете изменить под ваши потребности в коде CSS

Подключаем Vue:
Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.1/vue-resource.min.js'></script>

HTML:
Код
<div class="site-canvas" id="app">
  <div class="download-button" @click="download = !download" :class="{'downloading':download}">
  <div class="download-button_icon">
  <span></span>
  <span></span>
  <span></span>
  </div>
  <div class="download-button_text">
  Download
  </div>
  <transition name="fade">
  <div class="files" v-if="download">
  <svg v-for="i in [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]" :style="fileStyles()" viewBox="0 0 8 8" class="file">
  <path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3z"></path>  
  </svg>
  </div>
  </transition>
  </div>
</div>

CSS:
Код
.download-button {
  position:fixed;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:120px;
  height:120px;
  background:#5757ff;
  border-radius:5px;
  box-shadow:0 10px 20px rgba(0,0,0,0.2);
  transition:250ms transform, 250ms box-shadow;
  cursor:pointer;
}
.download-button:hover {
  transform:scale(0.95);
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
}

.download-button_icon {
  position:absolute;
  margin:auto;
  top:10px;
  left:0;
  right:0;
  width:80px;
  height:80px;
}
.download-button_icon span {
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:4px;
  height:50px;
  background:#fff;
  border-radius:4px;
  content:'';
}

.download-button_icon span:nth-child(2),
.download-button_icon span:nth-child(3) {
  top:35px;
  height:25px;
  left:16px;
  transform:rotate(45deg);
}
.download-button_icon span:nth-child(3) {
  left:-16px;
  transform:rotate(-45deg);
}

.download-button_text {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  color:#fff;
  text-align:center;
  font-size:1em;
  font-weight:700;
  padding:15px 0;
}
.files {
  position:relative;
  margin-top:130px;
  text-align:center;
}
.files .file {
  width:15px;
  fill:#5757ff;
  animation:800ms fallingFile infinite ease-in;
}
@keyframes fallingFile {
  0%{opacity:0;transform:translate3d(0,-40px,0) rotate(0deg);}
  60%{opacity:1;}
  100%{opacity:0;transform:translate3d(0,120px,0) rotate(90deg);}
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

JS:
Код
(function(){
  var app = new Vue({
  el: '#app',
  data: {
  download: false
  },
  methods: {
  fileStyles: function() {
  let delay = -(Math.floor(Math.random() * 10) * 254);
  let duration = (Math.floor(Math.random() * 11) + 9) * 100;
  return {
  'animation-delay' : delay + 'ms',
  'animation-duration' : duration + 'ms'
  }
  }
  },
  mounted() {
   
  }
  });
})();


Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Анимированная кнопка для скачивания с использованием SVG и V
  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Microsoft Edge
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-29.11.2023