Merhabalar Spy Halkı İndexi 3 4 saatlik uğraş sonucu az evvel bitirdim.
İndexte typed js ve particles js kullanarak bence iyi iş çıkardım.
Tavsiyem demoya fazla takılmayıp kendinize düzenleyerek bu demodan daha iyi şeyler çıkarabilirsiniz.
İki index'ede sevdiğim ve @Gök-Börü ye armağan ettiğim müzik koydum editlerken değiştirirsiniz.
Beğenirseniz yorum yapın lütfen
Hareketli Bir index her şeyini değiştirebilirsiniz kolayca
MercilessReaver Sundu.
İndexte typed js ve particles js kullanarak bence iyi iş çıkardım.
Tavsiyem demoya fazla takılmayıp kendinize düzenleyerek bu demodan daha iyi şeyler çıkarabilirsiniz.
İki index'ede sevdiğim ve @Gök-Börü ye armağan ettiğim müzik koydum editlerken değiştirirsiniz.
Beğenirseniz yorum yapın lütfen
Hareketli Bir index her şeyini değiştirebilirsiniz kolayca
Code:
<!DOCTYPE html>
<html>
<head>
<script src='https://static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script>
<script src='https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<link rel="canonical" href="https://codepen.io/merb/pen/yOwJjj" />
<!-- particles.js için -->
<div id="particles-js"></div>
<div class="count-particles">
<span class="js-count-particles"></span>
</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<title>Hacked By MercilessReaver</title>
<style type="text/css">
body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #232741; background-image: url("https://i.imgyukle.com/2019/04/01/wiIuc.jpg"); background-repeat: no-repeat; background-size: 100%; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
</style>
<style class="cp-pen-styles">body {
margin: 0;
padding: 0;
}
.banner {
display: block;
min-height: 200px;
width: 100%;
position: relative;
}
.typed_wrap {
display: block;
border: 4px solid white;
width: 290px;
height: auto;
padding: 30px;
position: absolute;
top: 350%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.typed_wrap h1 {
display: inline;
color: white;
}
.typed::after {
content: '|';
display: inline;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
.typed-cursor{
opacity: 0;
display: none;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.btns {
display: block;
width: 400px;
margin: 0;
padding: 30px 0 0 30px;
}
.btns a {
display: inline-block;
margin-left: 5px;
}
.btns a:first-child{margin-left:0}
.btn {
font-family: sans-serif;
font-size: 14px;
font-weight: 600;
color: #ffffff;
text-decoration: none;
}
a .btn {
cursor: pointer;
border: 1.5px solid #ffffff;
border-radius: 5px;
display: inline-block;
padding: 10px;
list-style-type: none;
transition: all .3s;
color: white;
}
}
</style>
</head>
<body>
<div id="page_wrap">
<ul class="btns">
</ul>
<div class="banner">
<div class="typed_wrap">
<h1>Hacked By <span class="typed"></span></h1>
</div>
</div>
</div>
<script src='https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js'></script>
<script id="rendered-js">
$(function () {
$(".typed").typed({
strings: ["MercilessReaver", "MercilessReaver", "MercilessReaver"],
// Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
stringsElement: null,
// typing speed
typeSpeed: 30,
// time before typing starts
startDelay: 1200,
// backspacing speed
backSpeed: 20,
// time before backspacing
backDelay: 500,
// loop
loop: true,
// false = infinite
loopCount: 5,
// show cursor
showCursor: false,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
// call when done callback function
callback: function () {},
// starting callback function before each string
preStringTyped: function () {},
//callback for every typed string
onStringTyped: function () {},
// callback for reset
resetCallback: function () {} });
});
</script>
<script type="text/javascript">
particlesJS("particles-js", {"particles":{"number":{"value":185,"density":{"enable":true,"value_area":868.0624057955}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":1,"random":true,"anim":{"enable":true,"speed":1,"opacity_min":0,"sync":false}},"size":{"value":5,"random":true,"anim":{"enable":false,"speed":4,"size_min":0.3,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":600}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":250,"size":0,"duration":2,"opacity":0,"speed":3},"repulse":{"distance":400,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>
<iframe width="0" height="0" src="https://www.youtube.com/embed/MdLII-xyLFI?autoplay=1" frameborder="0" allow="autoplay; encrypted-media;" allowfullscreen></iframe>
</body>
</html>
Code:
<!DOCTYPE html><html lang='en' class=''>
<head>
<script src='https://static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script>
<script src='https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<link rel="canonical" href="https://codepen.io/merb/pen/yOwJjj" />
<style class="cp-pen-styles">body {
margin: 0;
padding: 0;
}
.banner {
display: block;
min-height: 200px;
width: 100%;
position: relative;
}
.typed_wrap {
display: block;
border: 4px solid #ecf0f1;
width: 290px;
height: auto;
padding: 30px;
/*centers it in the .banner*/
position: absolute;
top: 350%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.typed_wrap h1 {
display: inline;
}
/*Add custom cursor so it auto inherits font styles*/
.typed::after {
content: '|';
display: inline;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
/*Removes cursor that comes with typed.js*/
.typed-cursor{
opacity: 0;
display: none;
}
/*Custom cursor animation*/
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.btns {
display: block;
width: 400px;
margin: 0;
padding: 30px 0 0 30px;
}
.btns a {
display: inline-block;
margin-left: 5px;
}
.btns a:first-child{margin-left:0}
.btn {
font-family: sans-serif;
font-size: 14px;
font-weight: 600;
color: #ecf0f1;
text-decoration: none;
}
a .btn {
cursor: pointer;
border: 1.5px solid #ecf0f1;
border-radius: 5px;
display: inline-block;
padding: 10px;
list-style-type: none;
transition: all .3s;
}
}</style></head><body>
<!DOCTYPE html>
<html>
<head>
<script src='https://static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script>
<script src='https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<link rel="canonical" href="https://codepen.io/merb/pen/yOwJjj" />
<!-- particles.js için -->
<div id="particles-js"></div>
<div class="count-particles">
<span class="js-count-particles"></span>
</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<title>Noticed By MercilessReaver</title>
<style type="text/css">
body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #232741; background-image: url("https://i.imgyukle.com/2019/04/01/wiIuc.jpg"); background-repeat: no-repeat; background-size: 100%; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
</style>
<style class="cp-pen-styles">body {
margin: 0;
padding: 0;
}
.banner {
display: block;
min-height: 200px;
width: 100%;
position: relative;
}
.typed_wrap {
display: block;
border: 4px solid white;
width: 290px;
height: auto;
padding: 30px;
position: absolute;
top: 350%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.typed_wrap h1 {
display: inline;
color: white;
}
.typed::after {
content: '|';
display: inline;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
.typed-cursor{
opacity: 0;
display: none;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.btns {
display: block;
width: 400px;
margin: 0;
padding: 30px 0 0 30px;
}
.btns a {
display: inline-block;
margin-left: 5px;
}
.btns a:first-child{margin-left:0}
.btn {
font-family: sans-serif;
font-size: 14px;
font-weight: 600;
color: #ffffff;
text-decoration: none;
}
a .btn {
cursor: pointer;
border: 1.5px solid #ffffff;
border-radius: 5px;
display: inline-block;
padding: 10px;
list-style-type: none;
transition: all .3s;
color: white;
}
}
</style>
</head>
<body>
<div id="page_wrap">
<ul class="btns">
</ul>
<div class="banner">
<div class="typed_wrap">
<h1>Noticed By <span class="typed"></span></h1>
</div>
</div>
</div>
<script src='https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js'></script>
<script id="rendered-js">
$(function () {
$(".typed").typed({
strings: ["MercilessReaver", "MercilessReaver", "MercilessReaver"],
// Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
stringsElement: null,
// typing speed
typeSpeed: 30,
// time before typing starts
startDelay: 1200,
// backspacing speed
backSpeed: 20,
// time before backspacing
backDelay: 500,
// loop
loop: true,
// false = infinite
loopCount: 5,
// show cursor
showCursor: false,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
// call when done callback function
callback: function () {},
// starting callback function before each string
preStringTyped: function () {},
//callback for every typed string
onStringTyped: function () {},
// callback for reset
resetCallback: function () {} });
});
</script>
<script type="text/javascript">
particlesJS("particles-js", {"particles":{"number":{"value":185,"density":{"enable":true,"value_area":868.0624057955}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":1,"random":true,"anim":{"enable":true,"speed":1,"opacity_min":0,"sync":false}},"size":{"value":5,"random":true,"anim":{"enable":false,"speed":4,"size_min":0.3,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":600}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":250,"size":0,"duration":2,"opacity":0,"speed":3},"repulse":{"distance":400,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>
<iframe width="0" height="0" src="https://www.youtube.com/embed/MdLII-xyLFI?autoplay=1" frameborder="0" allow="autoplay; encrypted-media;" allowfullscreen></iframe>
</body>
</html>
</body></html>
MercilessReaver Sundu.
Last edited: