kodlar
Gif: https://gifyu.com/image/SDsIT
Gif: https://gifyu.com/image/SDsIT
Kod:
<html>
<head>
<!-- Howler.js kütüphanesini içe aktarıyor -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.3/howler.min.js"></script>
<title>Hacked - TurkHacks</title>
<!-- Sosyal medya paylaşımı için bir görüntü ayarlıyor -->
<meta property="og:image" content="https://s1.postimg.org/13pocq3san/5h311-1nj3c706.jpg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap ve diğer kütüphaneleri içe aktarıyor -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js.download"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
body, html {
height: 100%;
background: url('background_image.jpg') no-repeat center center fixed; /* Arka plan resmi ayarlıyor */
background-size: cover;
position: relative;
}
#particles-js {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index: 1;
background: rgba(0, 0, 0, 0.5); /* Arka planı karartıyor */
}
h1 {
font: 1.5em Cinzel, serif;
font-weight: 400;
letter-spacing: .35em;
text-shadow: 0 0 25px rgba(254, 254, 255, .85);
width: 70%;
}
footer {
margin: 25%;
}
#a {
onmousedown: stop;
animation-name: rotate;
animation-duration: 5s;
animation-play-state: running;
animation-timing-function: linear;
animation-iteration-count: infinite;
opacity: 1.0;
filter: alpha(opacity=50);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
@keyframes rotate {
10% {transform: rotateY(36deg)}
20% {transform: rotateY(72deg)}
30% {transform: rotateY(108deg)}
40% {transform: rotateY(144deg)}
50% {transform: rotateY(180deg)}
60% {transform: rotateY(216deg)}
70% {transform: rotateY(252deg)}
80% {transform: rotateY(288deg)}
90% {transform: rotateY(324deg)}
100% {transform: rotateY(360deg)}
}
</style>
</head>
<body>
<center>
<!-- Ana resim gösteriliyor -->
<img src="https://s12.gifyu.com/images/SDswT.gif" width="1000">
</center>
<br><br>
<div id="particles-js">
<!-- Partikül animasyonu için bir div oluşturuluyor -->
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1365" height="949"></canvas>
</div>
<script type="text/javascript">
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){
particlesJS('particles-js', {
"particles": {
"number": {"value": 80, "density": {"enable": true, "value_area": 800}},
"color": {"value": "#ffffff"},
"shape": {
"type": "circle",
"stroke": {"width": 0, "color": "#000000"},
"polygon": {"nb_sides": 5},
"image": {"width": 100, "height": 100}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {"enable": false, "speed": 1, "opacity_min": 0.1, "sync": false}
},
"size": {
"value": 5,
"random": true,
"anim": {"enable": false, "speed": 40, "size_min": 0.1, "sync": false}
},
"line_linked": {"enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1},
"move": {
"enable": true, "speed": 6, "direction": "none", "random": false,
"straight": false, "out_mode": "out", "attract": {"enable": false, "rotateX": 600, "rotateY": 1200}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {"onhover": {"enable": true, "mode": "repulse"}, "onclick": {"enable": true, "mode": "push"}, "resize": true},
"modes": {
"grab": {"distance": 400, "line_linked": {"opacity": 1}},
"bubble": {"distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3},
"repulse": {"distance": 200},
"push": {"particles_nb": 4},
"remove": {"particles_nb": 2}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
});
});
</script>
<script>
var yPos = 200;
var xPos = 200;
var explosionSize = 200;
var launchColour = '#ffff80';
var timer = null;
var dims = 8;
var evn = 360 / 14;
var firework = new Array();
var ieType = (typeof window.innerWidth != 'number');
var ieRef = ((ieType) && (document.compatMode) && (document.compatMode.indexOf("CSS") != -1)) ? document.documentElement : document.body;
var thisStep = 0;
var step = 5;
for (i = 0; i < 14; i++) {
document.write('<div id="sparks' + i + '" style="position:absolute;top:0px;left:0px;border-radius:50%;height:' + dims + 'px;width:' + dims + ';font-size:' + dims + ';background-color:' + launchColour + '"></div>');
firework[i] = document.getElementById("sparks" + i).style;
}
function winDims() {
winH = (ieType) ? ieRef.clientHeight : window.innerHeight;
winW = (ieType) ? ieRef.clientWidth : window.innerWidth;
bestFit = (winW >= winH) ? winH : winW;
}
winDims();
window.onresize = new Function("winDims()");
function Reset() {
var dsy = (ieType) ? ieRef.scrollTop : window.pageYOffset;
thisStep = -1;
launchColour = launchCol[Math.floor(Math.random() * launchCol.length)];
explosionSize = Math.round(100 + Math.random() * (bestFit / 4));
yPos = explosionSize + Math.round(Math.random() * (winH - (explosionSize * 2.2))) + dsy;
xPos = explosionSize + Math.round(Math.random() * (winW - (explosionSize * 2.2)));
for (i = 0; i < 14; i++) {
firework[i].backgroundColor = launchColour;
firework[i].width = dims + "px";
firework[i].height = dims + "px";
firework[i].fontSize = dims + "px";
}
Fireworks();
}
function Fireworks() {
thisStep += step;
timer = setTimeout("Fireworks()", runSpeed);
for (i = 0; i < 14; i++) {
firework[i].top = yPos + explosionSize * Math.sin(i * evn * Math.PI / 180) * Math.sin(thisStep / 100) + "px";
firework[i].left = xPos + explosionSize * Math.cos(i * evn * Math.PI / 180) * Math.sin(thisStep / 100) + "px";
if (thisStep > 100) {
var dims_change = (explosionSize < 150) ? dims : Math.round(dims + Math.random() * 2);
firework[i].backgroundColor = showerCol[Math.floor(Math.random() * showerCol.length)];
firework[i].width = dims_change + "px";
firework[i].height = dims_change + "px";
firework[i].fontSize = dims_change + "px";
}
}
if (thisStep > 140) {
clearTimeout(timer);
Reset();
}
}
window.onload = Fireworks;
</script>
<center>
<!-- Logo resmi ve metin gösteriliyor -->
<img src="logo.png" width="200" style="margin-top: 20px;">
<h1 style="color: white; margin-top: 20px;"><span>By Patnos</span></h1>
</center>
</body>
</html>
Son düzenleme:
