Scurtă descriere


Site-ul artweber oferă resurse pentru PhotoShop cum ar fi psd-uri ( Bannere , Logo , Avatare , și coperte pentru Facebook , YouTube ) Iar pentru a-ți realiza propriile creații oferim resurse PhotoShop ( Font-uri , Gradient-uri , Wallpapere , Stil-uri și multe altele ) și pentru site-uri oferim diferite Script-uri , Index-uri.

1661
Resurse
1610
Utilizatori
78
Comentarii
5
Ani online

Forumul ArtWeber Cerere Lucrare Inregistreaza-te Resurse Premium Cum să Downloadez
Meniu
5 Resurse întâmplătoare
    1120

    Index - Downlaod..

    128

    Index - PlayNion..

    198

    Font - Zeichen..

    122

    FileCloud -..

    1599

    PSD - No Avatar..

Tutoriale
    967

    Două tonuri Photoshop Tutorial

    1362

    Cum se instaleaza noi stiluri in Photoshop

    707

    Modificați culoarea barei de adrese din browserul Google Chrome Mobil

    1323

    Cum faci redirect HTTP la HTTPS

    776

    Zăpadă cu ajutorul CSS3 animație

Iti place ceea ce facem
Da
Nu
Nu-ma intereseaza
Parteneri
Rețele sociale

Cine este conectat

1 vizitator pe site. dintre ei:
Oaspeți1

Premium
Fii și tu mai deosebit
0

ANIMATED DOWNLOAD/UPLOAD BUTTONS

Gregory Web Master » HTML & CSS
ANIMATED DOWNLOAD/UPLOAD BUTTONS


Aș dori să vă împărtășesc câteva animații uimitoare pentru butoanele de descărcare (incarcare). Aceste butoane au un stil modern și animație cross-browser-ul atunci când faceți clic. Puteți personaliza schema de culori în stiluri.

Urmăriți demo-ul!

Să începem să instalăm aceste butoane frumoase.

În primul rând, trebuie să scriem codul HTML pentru butoane:

<a href="" class="button">
  <ul>
  <li>Download</li>
  <li>Downloading</li>
  <li>Open File</li>
  </ul>
  <div>
  <svg viewBox="0 0 24 24"></svg>
  </div>
</a>

<a href="" class="button dark-single">
  <div>
  <svg viewBox="0 0 24 24"></svg>
  </div>
</a>

<div></div>

<a href="" class="button white-single">
  <div>
  <svg viewBox="0 0 24 24"></svg>
  </div>
</a>

<a href="" class="button dark">
  <ul>
  <li>Download</li>
  <li>Downloading</li>
  <li>Open File</li>
  </ul>
  <div>
  <svg viewBox="0 0 24 24"></svg>
  </div>
</a>


Apoi adăugați următorul cod în partea de jos a foii de stil (.css):

.button.dark-single {
  --background: none;
  --rectangle: #242836;
  --success: #4bc793;
}
.button.white-single {
  --background: none;
  --rectangle: #f5f9ff;
  --arrow: #275efe;
  --success: #275efe;
  --shadow: rgba(10, 22, 50, 0.1);
}
.button.dark {
  --background: #242836;
  --rectangle: #1c212e;
  --arrow: #f5f9ff;
  --text: #f5f9ff;
  --success: #2f3545;
}

.button {
  --background: #275efe;
  --rectangle: #184fee;
  --success: #4672f1;
  --text: #fff;
  --arrow: #fff;
  --checkmark: #fff;
  --shadow: rgba(10, 22, 50, 0.24);
  display: flex;
  overflow: hidden;
  text-decoration: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background: var(--background);
  border-radius: 8px;
  box-shadow: 0 2px 8px -1px var(--shadow);
  transition: box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease;
}
.button:active {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  box-shadow: 0 1px 4px -1px var(--shadow);
}
.button ul {
  margin: 0;
  padding: 16px 40px;
  list-style: none;
  text-align: center;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: var(--text);
}
.button ul li:not(:first-child) {
  top: 16px;
  left: 0;
  right: 0;
  position: absolute;
}
.button ul li:nth-child(2) {
  top: 76px;
}
.button ul li:nth-child(3) {
  top: 136px;
}
.button > div {
  position: relative;
  width: 60px;
  height: 60px;
  background: var(--rectangle);
}
.button > div:before, .button > div:after {
  content: "";
  display: block;
  position: absolute;
}
.button > div:before {
  border-radius: 1px;
  width: 2px;
  top: 50%;
  left: 50%;
  height: 17px;
  margin: -9px 0 0 -1px;
  background: var(--arrow);
}
.button > div:after {
  width: 60px;
  height: 60px;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  border-radius: 0 0 80% 80%;
  background: var(--success);
  top: 0;
  left: 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.button > div svg {
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
  margin: -9px 0 0 -10px;
  fill: none;
  z-index: 1;
  stroke-width: 2px;
  stroke: var(--arrow);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button.loading ul {
  -webkit-animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * 0.065ms);
  animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * 0.065ms);
}
.button.loading > div:before {
  -webkit-animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * 0.065ms);
  animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * 0.065ms);
}
.button.loading > div:after {
  -webkit-animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * 0.065ms);
  animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * 0.065ms);
}
.button.loading > div svg {
  -webkit-animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * 0.065ms);
  animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * 0.065ms);
}

@-webkit-keyframes text {
  10%,
  85% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  }
  95%,
  100% {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
  }
}

@keyframes text {
  10%,
  85% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  }
  95%,
  100% {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
  }
}
@-webkit-keyframes line {
  5%,
  10% {
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  }
  40% {
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
  }
  65% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  75%,
  100% {
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  }
}
@keyframes line {
  5%,
  10% {
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  }
  40% {
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
  }
  65% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  75%,
  100% {
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  }
}
@-webkit-keyframes svg {
  0%,
  20% {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  }
  21%,
  89% {
  stroke-dasharray: 26px;
  stroke-dashoffset: 26px;
  stroke-width: 3px;
  margin: -10px 0 0 -10px;
  stroke: var(--checkmark);
  }
  100% {
  stroke-dasharray: 26px;
  stroke-dashoffset: 0;
  margin: -10px 0 0 -10px;
  stroke: var(--checkmark);
  }
  12% {
  opacity: 1;
  }
  20%,
  89% {
  opacity: 0;
  }
  90%,
  100% {
  opacity: 1;
  }
}
@keyframes svg {
  0%,
  20% {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  }
  21%,
  89% {
  stroke-dasharray: 26px;
  stroke-dashoffset: 26px;
  stroke-width: 3px;
  margin: -10px 0 0 -10px;
  stroke: var(--checkmark);
  }
  100% {
  stroke-dasharray: 26px;
  stroke-dashoffset: 0;
  margin: -10px 0 0 -10px;
  stroke: var(--checkmark);
  }
  12% {
  opacity: 1;
  }
  20%,
  89% {
  opacity: 0;
  }
  90%,
  100% {
  opacity: 1;
  }
}
@-webkit-keyframes background {
  10% {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  }
  40% {
  -webkit-transform: scaleY(0.15);
  transform: scaleY(0.15);
  }
  65% {
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  border-radius: 0 0 50% 50%;
  }
  75% {
  border-radius: 0 0 50% 50%;
  }
  90%,
  100% {
  border-radius: 0;
  }
  75%,
  100% {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  }
}
@keyframes background {
  10% {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  }
  40% {
  -webkit-transform: scaleY(0.15);
  transform: scaleY(0.15);
  }
  65% {
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  border-radius: 0 0 50% 50%;
  }
  75% {
  border-radius: 0 0 50% 50%;
  }
  90%,
  100% {
  border-radius: 0;
  }
  75%,
  100% {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  }
}


Și acum rămâne pentru noi să introducem codul js înainte de eticheta de închidere (în partea de jos a paginii).
Vă rugăm să rețineți că codul este scris pentru a fi introdus într-un document HTML și are o bibliotecă TweenMax din depozitul CDNJS.

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
<script>$('.button').each(function(e) {

  let duration = 3000,
  btn = $(this),
  svg = btn.find('svg'),
  svgPath = new Proxy({
  y: null,
  smoothing: null
  }, {
  set(target, key, value) {
  target[key] = value;
  if(target.y !== null && target.smoothing !== null) {
  svg.html(getPath(target.y, target.smoothing, null))
  }
  return true;
  },
  get(target, key) {
  return target[key];
  }
  });

  btn.css('--duration', duration);

  svgPath.y = 20;
  svgPath.smoothing = 0;

  btn.on('click', e => {

  if(!btn.hasClass('loading')) {

  btn.addClass('loading');

  TweenMax.to(svgPath, duration * .065 / 1000, {
  smoothing: .3
  });

  TweenMax.to(svgPath, duration * .265 / 1000, {
  y: 12,
  ease: Elastic.easeOut.config(1.12, .4)
  }).delay(duration * .065 / 1000);

  setTimeout(() => {
  svg.html(getPath(0, 0, [
  [3, 14],
  [8, 19],
  [21, 6]
  ]));
  }, (duration / 2));

  }

  return false;

  });

});

function getPoint(point, i, a, smoothing) {
  let cp = (current, previous, next, reverse) => {
  let p = previous || current,
  n = next || current,
  o = {
  length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
  angle: Math.atan2(n[1] - p[1], n[0] - p[0])
  },
  angle = o.angle + (reverse ? Math.PI : 0),
  length = o.length * smoothing;
  return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
  },
  cps = cp(a[i - 1], a[i - 2], point, false),
  cpe = cp(point, a[i - 1], a[i + 1], true);
  return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}

function getPath(update, smoothing, pointsNew) {
  let points = pointsNew ? pointsNew : [
  [4, 12],
  [12, update],
  [20, 12]
  ],
  d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
  return `<path d="${d}" />`;
}</script>


Nu uitați că trebuie să aveți conectat fișierul bibliotecii jQuery

Asta e tot, trebuie doar să personalizați totul în funcție de nevoile dvs.
Mult noroc tuturor !!!

Download ANIMATED DOWNLOAD/UPLOAD BUTTONS


Link direct:
BB-code link:
HTML link:

Atenție!
Acest material a fost furnizat de artweber.ro doar în scop informativ. Administrația nu este responsabilă pentru conținutul acesteia
Dacă dețineți drepturile de autor la acest material/resursa contactați imediat un administrator.
ANIMATED, Download, UPLOAD, BUTTONS

Resurse aleatoare:

Stimate vizitator, esti pe site ca utilizator neînregistrat.
Vă recomandăm să vă Înregistrați.
informație
Ai vrea sa lasi un comentariu? Conectați-vă la contul dvs. pentru a lăsa comentarii. Nu ai cont? Aveți posibilitatea să creați un cont gratuit acum.