|
|
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset='utf-8'>
- <meta http-equiv='X-UA-Compatible' content='IE=edge'>
- <title>Hathieves.es</title>
- <meta name='viewport' content='width=device-width, initial-scale=1'>
- <style>
- body{
- background-color: black;
- margin: 0;
- padding: 0;
- width: 100vw;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .logo{
- width: 250px;
- height: 250px;
- box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
- background: url("cropped-ht.png");
- opacity: 0;
- overflow: hidden;
- }
-
- .logo2:before
- {
- content: '';
- position: absolute;
- width: 250px;
- height: 250px;
- background: url("cropped-ht.png");
- opacity: .5;
- mix-blend-mode: hard-light;
- animation: animate .2s linear infinite;
- }
-
- @keyframes animate
- {
- 0%
- {
- background-position: 0 0;
- filter: hue-rotate(0deg);
- }
- 10%
- {
- background-position: 5px 0;
- }
- 20%
- {
- background-position: 0 -5px;
- }
- 30%
- {
- background-position: 15px 0;
- }
- 40%
- {
- background-position: 0 -5px;
- }
- 50%
- {
- background-position: -25px 0;
- }
- 60%
- {
- background-position: 40px 20px;
- }
- 70%
- {
- background-position: 0 -20px;
- }
- 80%
- {
- background-position: -60px -20px;
- }
- 81%
- {
- background-position: 0 0;
- }
- 100%
- {
- background-position: 0 0;
- filter: hue-rotate(360deg);
- }
- }
- </style>
- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
- <script>
- $(document).ready(function(){
- sound = new Audio('sound.mp3');
- sound.volume = 0.1;
- $(".logo").animate({
- opacity: '1'
- }, 1500);
-
- setTimeout(function(){
- $(".logo").addClass("logo2")
- sound.play()
- },2000);
-
- setTimeout(function(){
- $(".logo").removeClass("logo2")
- sound.pause();
- },3000);
-
- setTimeout(function(){
- $(".logo").animate({
- opacity: '0'
- }, 1500);
- },3000);
- });
- </script>
- </head>
- <body>
- <div class="logo"></div>
- </body>
- </html>
|
