JavaScript Konsol Efekti Yapımı

Temmuz 17, 2020 0 Views
JavaScript Konsol  Efekti Yapımı blog cover console Ayhan ALTINOK

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? blog cover brutal force Ayhan ALTINOK

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…

Css Nabız (Pulse) Efekti Yapımı blog cover pluse Ayhan ALTINOK

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…

Yorumlar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yorum Yaz
Yukarı Kaydır
Beni takip edin
Tema
Diller
Müzik
Search results will appear here