JavaScript Konsol Efekti Yapımı

Temmuz 17, 2020 0 Views

Kütüphane kullanmadan JavaScript kodu ile sitenizin bazı alanlarında bulunan metinleri hareketlendirmek isteyebilirsiniz. Örneğin sitenizin karşılama alanında sloganlarınızı ve ya atasözlerinizi sergilediğiniz bir alan var ise orada kullanarak sitenize ziyaret eden kişinin dikkatini çekerek gösterebilirsiniz.

Front-end çalışmalarında size yardımcı olabilecek  Html, Css ve JavaScript içeriklerimide inceleyebilirsiniz.

Html Kodlarımız

<div class='console-container'>
  <span id='text'></span>
  <div class='console-underscore' id='console'>_>/div>
</div>

Css Stil Kodlarımız

@import url(https://fonts.googleapis.com/css?family=Khula:700);
body {
  background: #111;
}
.hidden {
  opacity: 0;
}
.console-container {
  font-family: Khula;
  font-size: 4em;
  text-align: center;
  height: 200px;
  width: 600px;
  display: block;
  position: absolute;
  color: white;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.console-underscore {
  display: inline-block;
  position: relative;
  top: -0.14em;
  left: 10px;
}

JavaScript Kodlarımız

// function([string1, string2],target id,[color1,color2])    
 consoleText(['Hello World.', 'Console Text', 'Made with Love.'], 'text',['tomato','rebeccapurple','lightblue']);
function consoleText(words, id, colors) {
  if (colors === undefined) colors = ['#fff'];
  var visible = true;
  var con = document.getElementById('console');
  var letterCount = 1;
  var x = 1;
  var waiting = false;
  var target = document.getElementById(id)
  target.setAttribute('style', 'color:' + colors[0])
  window.setInterval(function() {
    if (letterCount === 0 && waiting === false) {
      waiting = true;
      target.innerHTML = words[0].substring(0, letterCount)
      window.setTimeout(function() {
        var usedColor = colors.shift();
        colors.push(usedColor);
        var usedWord = words.shift();
        words.push(usedWord);
        x = 1;
        target.setAttribute('style', 'color:' + colors[0])
        letterCount += x;
        waiting = false;
      }, 1000)
    } else if (letterCount === words[0].length + 1 && waiting === false) {
      waiting = true;
      window.setTimeout(function() {
        x = -1;
        letterCount += x;
        waiting = false;
      }, 1000)
    } else if (waiting === false) {
      target.innerHTML = words[0].substring(0, letterCount)
      letterCount += x;
    }
  }, 120)
  window.setInterval(function() {
    if (visible === true) {
      con.className = 'console-underscore hidden'
      visible = false;
    } else {
      con.className = 'console-underscore'
      visible = true;
    }
  }, 400)
}

Önizleme

Brute Force Saldırılarına Karşı Web Sitenizi Koruma Önlemleri Nelerdir?

Brute-force, Türkçe’de kelime anlamı olarak ‘kaba kuvvet’ anlamına gelir ve bu saldırıları yapan kişiler en basit anlatımıyla deneme yanılma yöntemiyle şifreleri çözmeyi amaçlar. WordPress’i indirmiş olan her kişi…

Previous Article

Css Nabız (Pulse) Efekti Yapımı

Ekstra harici kütüphane kullanmadan sadece Css ve Html kullarak nabız (pulse ) efekti nasıl yapabileceğinizi anlatacağım. Bu efekti yaparken ":before,:after ve animation" kodlarından yararlanacağız. Front-end bilginizi geliştirmek için…

Next Article