Yam Code

New Paste Browse

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width", initial-scale=1.0>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Sandip Dust</title>
        <link rel="stylesheet" href="style/style.css">
    </head>

<body>
      <style>
#snowflakeContainer {
    position: absolute;
    left: 0px;
    top: 0px;
}
.snowflake {
    padding-left: 15px;
    font-family: Cambria, Georgia, serif;
    font-size: 14px;
    line-height: 24px;
    position: fixed;
    color: #FFFFFF;
    user-select: none;
    z-index: 1000;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.snowflake:hover {
    cursor: default;
}
  </style>
<div id='snowflakeContainer'>
    <p class='snowflake'>*</p>
</div>
<script>// The star of every good animation
var requestAnimationFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

var transforms = [&quot;transform&quot;, 
                  &quot;msTransform&quot;, 
                  &quot;webkitTransform&quot;, 
                  &quot;mozTransform&quot;, 
                  &quot;oTransform&quot;];
                   
var transformProperty = getSupportedPropertyName(transforms);

// Array to store our Snowflake objects
var snowflakes = [];

// Global variables to store our browser&#39;s window size
var browserWidth;
var browserHeight;

// Specify the number of snowflakes you want visible
var numberOfSnowflakes = 50;

// Flag to reset the position of the snowflakes
var resetPosition = false;

//
// It all starts here...
//
function setup() {
 window.addEventListener(&quot;DOMContentLoaded&quot;, generateSnowflakes, false);
 window.addEventListener(&quot;resize&quot;, setResetFlag, false);
}
setup();

//
// Vendor prefix management
//
function getSupportedPropertyName(properties) {
    for (var i = 0; i &lt; properties.length; i++) {
        if (typeof document.body.style[properties[i]] != &quot;undefined&quot;) {
            return properties[i];
        }
    }
    return null;
}

//
// Constructor for our Snowflake object
//
function Snowflake(element, radius, speed, xPos, yPos) {

// set initial snowflake properties
    this.element = element;
    this.radius = radius;
    this.speed = speed;
    this.xPos = xPos;
    this.yPos = yPos;
 
 // declare variables used for snowflake&#39;s motion
    this.counter = 0;
    this.sign = Math.random() &lt; 0.5 ? 1 : -1;
 
 // setting an initial opacity and size for our snowflake
    this.element.style.opacity = .1 + Math.random();
    this.element.style.fontSize = 12 + Math.random() * 50 + &quot;px&quot;;
}

//
// The function responsible for actually moving our snowflake
//
Snowflake.prototype.update = function () {

// using some trigonometry to determine our x and y position
    this.counter += this.speed / 5000;
    this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
    this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;

// setting our snowflake&#39;s position
    setTranslate3DTransform(this.element, Math.round(this.xPos), Math.round(this.yPos));
    
    // if snowflake goes below the browser window, move it back to the top
    if (this.yPos &gt; browserHeight) {
     this.yPos = -50;
    }
}

//
// A performant way to set your snowflake&#39;s position
//
function setTranslate3DTransform(element, xPosition, yPosition) {
 var val = &quot;translate3d(&quot; + xPosition + &quot;px, &quot; + yPosition + &quot;px&quot; + &quot;, 0)&quot;;
    element.style[transformProperty] = val;
}

//
// The function responsible for creating the snowflake
//
function generateSnowflakes() {
 
 // get our snowflake element from the DOM and store it
    var originalSnowflake = document.querySelector(&quot;.snowflake&quot;);
    
    // access our snowflake element&#39;s parent container
    var snowflakeContainer = originalSnowflake.parentNode;
    
    // get our browser&#39;s size
 browserWidth = document.documentElement.clientWidth;
    browserHeight = document.documentElement.clientHeight;
         
    // create each individual snowflake
    for (var i = 0; i &lt; numberOfSnowflakes; i++) {
    
     // clone our original snowflake and add it to snowflakeContainer
        var snowflakeCopy = originalSnowflake.cloneNode(true);
        snowflakeContainer.appendChild(snowflakeCopy);

// set our snowflake&#39;s initial position and related properties
        var initialXPos = getPosition(50, browserWidth);
        var initialYPos = getPosition(50, browserHeight);
        var speed = 5+Math.random()*40;
        var radius = 4+Math.random()*10;
        
        // create our Snowflake object
        var snowflakeObject = new Snowflake(snowflakeCopy, 
                 radius, 
                 speed, 
                 initialXPos, 
                 initialYPos);
        snowflakes.push(snowflakeObject);
    }
    
    // remove the original snowflake because we no longer need it visible
 snowflakeContainer.removeChild(originalSnowflake);
 
 // call the moveSnowflakes function every 30 milliseconds
    moveSnowflakes();
}

//
// Responsible for moving each snowflake by calling its update function
//
function moveSnowflakes() {
    for (var i = 0; i &lt; snowflakes.length; i++) {
        var snowflake = snowflakes[i];
        snowflake.update();
    }
    
 // Reset the position of all the snowflakes to a new value
    if (resetPosition) {
     browserWidth = document.documentElement.clientWidth;
     browserHeight = document.documentElement.clientHeight; 
     
  for (var i = 0; i &lt; snowflakes.length; i++) {
         var snowflake = snowflakes[i];
         
         snowflake.xPos = getPosition(50, browserWidth);
         snowflake.yPos = getPosition(50, browserHeight);
     }
     
     resetPosition = false;
    }
    
    requestAnimationFrame(moveSnowflakes);
}

//
// This function returns a number between (maximum - offset) and (maximum + offset)
//
function getPosition(offset, size) {
 return Math.round(-1*offset + Math.random() * (size+2*offset));
}

//
// Trigger a reset of all the snowflakes&#39; positions
//
function setResetFlag(e) {
 resetPosition = true;
}</script>

Paste Settings

Paste Title : [Optional]

Paste Folder : [Optional]

Syntax Highlighting : [Optional]

Paste Expiration : [Optional]

Paste Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Paste Settings

Site Languages