A Pen by Łukasz Zembrzuski

Thumbnail
This awesome code was written by zembrzuski, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright zembrzuski ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Łukasz Zembrzuski</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="fullScreen" id="fullScreen">
    <canvas id="canvas2d"></canvas>
</div>

<div class="hands">
 <div class="reka hand"> 
        <img src="https://lukasz-zembrzuski.pl/wp-content/uploads/2018/03/hand-right.png" alt="reka1"/> 
</div>

<div class="reka2 hand">
  <img src="https://lukasz-zembrzuski.pl/wp-content/uploads/2018/03/hand-left.png" alt="reka2"/>
</div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/zembrzuski/a-pen-by-andx141ukasz-zembrzuski-zRzMab */
html, body { 
    overflow-x: hidden; 
    background-image: url("https://lukasz-zembrzuski.pl/wp-content/uploads/2018/03/nebula-starfield.jpg");

    padding: 0px; margin: 0px; 
    width: 100%; height: 100%; 
}
.fullScreen { 
  position: absolute;
    height: 100vh;
  width: 100%;
  min-height: 650px;
}
.canvas{
  position: relative;
}
.hands {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 650px;
  min-width:700px;
  left:50%;
  transform: translateX(-50%);
  
  -webkit-animation-name: slideFromRight;
    -webkit-animation-duration: .7s; 
    animation-name: slideFromRight;
    animation-duration: 1.5s;
}
.hand {
  min-height: 50%;
  width: 100%;
  position: relative;
}

img {
  height: 100%;
}

@-webkit-keyframes slideFromRight {
    from {width: calc(100% - 0px);}
    
}
@keyframes slideFromRight {
    from {width: calc(175% - -0px);}
     
  
 }
.reka2 img
{
  position: absolute;
  left: -10%;
  bottom: -40%;
  height: auto;
  width: 500px;
  /* animacja */ 
/*     -webkit-animation-name: slideFromLeft; 
    -webkit-animation-duration: .7s; 
    animation-name: slideFromLeft;
    animation-duration: 1.5s; */
}
.reka img {
  position: absolute;
  right: -50px;
  top: 0;
  height: auto;
  width: 450px;
}
.reka2 {
}

/* @-webkit-keyframes slideFromLeft {
    from {left: calc(-100% - 0px);}
    
}
@keyframes slideFromLeft {
    from {left: calc(-75% - -0px);}
     
} */





/*Downloaded from https://www.codeseek.co/zembrzuski/a-pen-by-andx141ukasz-zembrzuski-zRzMab */
var Star = function(x, y, maxSpeed) {
    this.x = x;
    this.y = y;
    this.slope = y / x; 
    this.opacity = 0;
    this.speed = Math.max(Math.random() * maxSpeed, 1);
  
};


Star.prototype.distanceTo = function(originX, originY) {
    return Math.sqrt(Math.pow(originX - this.x, 2) + Math.pow(originY - this.y, 2));
};


Star.prototype.resetPosition = function(x, y, maxSpeed) {
    Star.apply(this, arguments);
    return this;
};

/**
 var zembrzuski robi gwiazdy
 */
var zembrzuski = {
  
  
    getRandomStar: function(minX, minY, maxX, maxY, maxSpeed) {
        var coords = zembrzuski.getRandomPosition(minX, minY, maxX, maxY);
        return new Star(coords.x, coords.y, maxSpeed);
    },

    
    getRandomPosition: function(minX, minY, maxX, maxY) {
        return {
            x: Math.floor((Math.random() * maxX) + minX),
            y: Math.floor((Math.random() * maxY) + minY)
        };
    }
};

var StarField = function(containerId) {
    this.container = document.getElementById(containerId);
    this.canvasElem = this.container.getElementsByTagName('canvas')[0];
    this.canvas = this.canvasElem.getContext('2d');

    this.width = this.container.offsetWidth;
    this.height = this.container.offsetHeight;

    this.starField = [];
};


StarField.prototype._updateStarField = function() {
    var i, 
        star, 
        randomLoc, 
        increment;

    for (i = 0; i < this.numStars; i++) {
        star = this.starField[i];
        
        increment = Math.min(star.speed, Math.abs(star.speed / star.slope));
        star.x += (star.x > 0) ? increment : -increment;
        star.y = star.slope * star.x;
        
        star.opacity += star.speed / 150;
        
      
        if ((Math.abs(star.x) > this.width / 2) || 
            (Math.abs(star.y) > this.height / 2)) {
           
            randomLoc = zembrzuski.getRandomPosition(
                -this.width / 10, -this.height / 10, 
                   this.width / 5, this.height / 5
            );
            star.resetPosition(randomLoc.x, randomLoc.y, this.maxStarSpeed);
        }
    }
};


StarField.prototype._renderStarField = function() {
    var i,
        star;
    this.canvas.fillStyle = "rgba(255, 0, 0, 0)"; // tło      CLEAR RECT CZYSCI CALY CANVAS :)
    this.canvas.clearRect(0, 0, this.width, this.height);
    // gwiazdki
    for (i = 0; i < this.numStars; i++) {
        star = this.starField[i];
      
        this.canvas.fillStyle = "rgba(217, 66, 244, " + star.opacity + ")";
        this.canvas.fillRect(
            star.x + this.width / 2, 
            star.y + this.height / 2, 
            2, 2);
    }
};

/**
 * funkcja ogarniajaca animacje aktualizuje starfield
 * i render
 */
StarField.prototype._renderFrame = function(elapsedTime) {
    var timeSinceLastFrame = elapsedTime - (this.prevFrameTime || 0);
    
    window.requestAnimationFrame(this._renderFrame.bind(this));

 
    if (timeSinceLastFrame >= 30 || !this.prevFrameTime) {
        this.prevFrameTime = elapsedTime;
        this._updateStarField();
        this._renderStarField();
    }
};



/**
 *Upewnia sie ze canvas miesci sie w containerze
 */
StarField.prototype._adjustCanvasSize = function(width, height) {
    // Ustawia rozmiar canvasu do containera 
    this.width = this.canvasElem.width = width || this.container.offsetWidth;
    this.height = this.canvasElem.height = height || this.container.offsetHeight;
};


StarField.prototype._watchCanvasSize = function(elapsedTime) {
    var timeSinceLastCheck = elapsedTime - (this.prevCheckTime || 0),
        width,
        height;

    window.requestAnimationFrame(this._watchCanvasSize.bind(this));

    // 
    // (Cap do ~3fps)
    if (timeSinceLastCheck >= 333 || !this.prevCheckTime) {
        this.prevCheckTime = elapsedTime;
        width = this.container.offsetWidth;
        height = this.container.offsetHeight;
        if (this.oldWidth !== width || this.oldHeight !== height) {
            this.oldWidth = width;
            this.oldHeight = height;
            this._adjustCanvasSize(width, height);
        }
    }
};

/**
 * główna pętla
 * @param {int} numStars liczba gwiazdek
 */
StarField.prototype._initScene = function(numStars) {
    var i;
    for (i = 0; i < this.numStars; i++) {
        this.starField.push(
            zembrzuski.getRandomStar(-this.width / 2, -this.height / 2, this.width, this.height, this.maxStarSpeed)
        );
    }

    // inty nie przetrzymywane
    window.requestAnimationFrame(this._renderFrame.bind(this));
    window.requestAnimationFrame(this._watchCanvasSize.bind(this));
};

/**
 * Rozpoczyna wszystko
 *  {int} numStars liczba gwiazd do renderu
 * @param {int} maxStarSpeed maxymalna szybkosc gwiazdek pixel/klatka
 */
StarField.prototype.render = function(numStars, maxStarSpeed) {
    this.numStars = numStars || 100;
    this.maxStarSpeed = maxStarSpeed || 3;

    this._initScene(this.numStars);
};

/**
 * requestAnimationFrame z set timeout fallback / gladzenie animacji
 */
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = 
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
      
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

// Rozpoczyna!
var starField = new StarField('fullScreen').render(333, 3);

Comments