Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
OpenXRay 1.6.02+ (1)
Сталкерские иконки группи... (0)
Темно-светлые социальные ... (0)
Светящаяся кнопка rip Бар... (0)
Cмайл вашего настроения д... (0)
У костра (191)
Анекдоты (145)
Города (94)
Обновление сайта (67)
Создание НПС (63)
StraNNik (1321)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
sej963821 (14.09.2019)
danilov380 (13.09.2019)
gusarowdemon (05.09.2019)
belarusgames7 (26.08.2019)
kapitonovleon2003 (24.08.2019)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Анимированная кнопка для скачивания с использованием SVG и V
Анимированная кнопка для скачивания с использованием SVG и V
StraNNik
StraNNik
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1321
Карма: 28 | Хабар: 10
Слышу гимн зашитых ртов
Дата: Пятница, 01.02.2019, 16:44/ Сообщение №: 1

Довольно интересное и уникальное решение для кнопки загрузки/скачивания файлов. Данная кнопка анимируется и добавляет красивый эффект при клике по ней. Стиль, цвет и т.д. вы сможете изменить под ваши потребности в коде 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() {
   
  }
  });
})();




Тихо на улице, пусто в квартире..Спасибо реактору №4

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

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