A Pen by wafs

Developer
Wafs
Size
2,545 Kb
Views
26,312
  1. A Pen by wafs Previews
  2. A Pen by wafs HTML Codes
  3. A Pen by wafs CSS Codes
  4. A Pen by wafs JS Codes

How do I make an a pen by wafs?

What is a a pen by wafs? How do you make a a pen by wafs? This script and codes were developed by Wafs on 12 September 2022, Monday.

A Pen by wafs Previews
IQ Test

A Pen by wafs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by wafs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="pepe-container"> <img src='https://i.imgur.com/2R2yZSt.jpg' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/ZMhznH5.jpg' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/vWqbS9Q.jpg' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/MWyGyX6.png' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/fnZWv0x.png' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/4rDoefQ.png' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/dU9WYFu.jpg' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/KahEJSj.jpg' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/clDaMk2.png' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/w6rbUP6.png' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/FcOqpiA.jpg' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/BbMQTzA.jpg' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/I4lZbVV.jpg' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/QXCfE0k.jpg' alt="" class="pepe hidden" /> <img src='https://i.imgur.com/tbonTgY.png' alt="" class="pepe hidden" />
</div> <div id="happy-container">
<div id="happy-birthday">
Happy Birthday <span id="dakota-chan">Dakotaaaaaaaaa</span> <iframe width="560" height="315" src="https://www.youtube.com/embed/AnY6yo2Dzko?autoplay=1" frameborder="0" allowfullscreen class="youtube"></iframe>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by wafs - Script Codes CSS Codes

body,
html { width: 100%; height: 100%;
}
#pepe-container { width: 100%; height: 100%; background-color: blue; position: relative; overflow:hidden;
}
.pepe { max-width: 300px; max-height: 300px; position: absolute; top: 0; left: 0; z-index:10;
}
.hidden{ opacity:0;
}
body{ position: relative;
}
#happy-container{ position: absolute; width:100%; height:100%; top:0; left:0; display:flex; align-items:center; justify-content:center;
}
#happy-birthday{ font-size:5rem; font-weight: bold; text-align:center; z-index:50;
}
.youtube{ z-index:1;
}
iframe{ max-width:250px; max-height:250px;
}
#dakota-chan{ display:block;
}

A Pen by wafs - Script Codes JS Codes

var pageWidth = $('#pepe-container').width() - 300;
var pageHeight = $('#pepe-container').height() - 300;
var refreshTime = 5;
function animoot(pe) { $(pe).offset({left: Math.random() * pageWidth , top: Math.random() * pageHeight}); $(pe).removeClass('hidden'); $(pe).css({opacity:1}); $(pe).animate({ top: "+=250", opacity:0 }, Math.random() * refreshTime * 1000 + 1000, function() { if($(pe).next().length == 0){ animoot($('#pepe-container img').first()); }else{ animoot($(pe).next()) } })
}
animoot($('.pepe')[0]);
function changeDakota(){ var r = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255); $('#dakota-chan').css({'color': 'rgb(' + r + ', ' + g + ', ' + b + ')'});
}
changeDakota();
setInterval(changeDakota, 2300);
A Pen by wafs - Script Codes
A Pen by wafs - Script Codes
Home Page Home
Developer Wafs
Username wafs
Uploaded September 12, 2022
Rating 3
Size 2,545 Kb
Views 26,312
Do you need developer help for A Pen by wafs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Wafs (wafs) Script Codes
Name
Barbara Walters
Title follows mouseover menu
Website sidebar menu with animation
Jquery Dynamic background-colours
Faux 3d hover blocks in CSS
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!