Haha

Developer
Ethan
Size
4,057 Kb
Views
30,360
  1. Haha Previews
  2. Haha HTML Codes
  3. Haha CSS Codes
  4. Haha JS Codes

How do I make an haha?

What is a haha? How do you make a haha? This script and codes were developed by Ethan on 18 August 2022, Thursday.

Haha Previews
IQ Test

Haha - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Haha</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <div class="header-top"> <h1><a href="https://fonts.google.com/specimen/Droid+Serif" target="_blank">Droid Serif</a></h1> <p class="instructions">use keyboard to jump to characters, arrow keys to scroll, or just use your finger!</p> </div> <div class="controls"> <h3 class="section-title">characters</h3> <div> <p class="styles"><span class="bold">bold</span> | <span class="italic">italic</span></p> <p class="color-mode"><span class="light -active">light</span> | <span class="dark">dark</span></p> <p class="show-lines"><span class="lines-indicator"></span> show lines</p> </div> </div>
</header>
<div class="carousel"> <div class="carousel-cell"> <div class="-inner"> <p>Aa</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Bb</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Cc</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Dd</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Ee</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Ff</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Gg</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Hh</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Ii</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Jj</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Kk</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Ll</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Mm</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Nn</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Oo</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Pp</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Qq</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Rr</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Ss</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Tt</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Uu</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Vv</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Ww</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Xx</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Yy</p> </div> </div> <div class="carousel-cell"> <div class="-inner"> <p>Zz</p> </div> </div>
</div>
<div class="type-tester"> <h3 class="section-title">type tester — <em>click to edit</em></h3> <h2 contenteditable="true">Call it the Star Gate</h2> <p contenteditable="true">For three million years, it had circled Saturn, waiting for a moment of destiny that might never come. In its making, a moon had been shattered, and the debris of its creation orbited still.</p> <p contenteditable="true">Now the long wait was ending. On yet another world, intelligence had been born and was escaping from its planetary cradle. An ancient experiment was about to reach its climax.</p>
</div> <script src="js/index.js"></script>
</body>
</html>

Haha - Script Codes CSS Codes

// Vars
$white: #F3F3F3;
$black: #1D1F20;
*,*::before,*::after { box-sizing: border-box;
}
body { padding: 0; color: $black; background: $white; font-family: 'Droid Serif', serif; transition: color .5s ease-out, background .5s ease-out; &.dark-mode { color: $white; background: $black; -webkit-font-smoothing: antialiased; .type-tester > *:focus, .type-tester > *:hover { background: rgba(255,255,255,.05); } .controls { .show-lines { &:hover, &.-active { .lines-indicator { background: $white; } } } } }
}
.section-title { top: 0; left: 0; margin: 0; opacity: .25; font-size: 14px; font-weight: 400; padding-top: 14px; position: absolute;
}
header { z-index: 1; margin: 30px 60px; position: relative; .header-top { &::after { content: ''; clear: both; display: table; } } h1 { float: left; line-height: 1; font-size: 22px; font-weight: 700; margin: 0 30px 0 0; a { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } } } p.instructions { margin: 0; float: right; line-height: 3; font-size: 10px; font-style: italic; }
}
.controls { margin-top: 20px; padding-top: 10px; border-top: 1px solid; &::after { content: ''; clear: both; display: table; } > div { float: right; p { display: inline-block; } } .section-title { top: auto; float: left; padding-top: 6px; position: relative; } p { margin: 0; line-height: 2; font-size: 14px; } p.styles { float: left; .bold { font-weight: 700; } .italic { font-style: italic; } span { cursor: pointer; } span:not(.-active) { opacity: .5; &:hover { opacity: 1; } } } p.color-mode { float: left; margin-left: 30px; span { cursor: pointer; } span:not(.-active) { opacity: .5; &:hover { opacity: 1; } } } .show-lines { cursor: pointer; margin-left: 30px; .lines-indicator { width: 8px; height: 8px; border: 1px solid; position: relative; border-radius: 50%; display: inline-block; background: rgba(0,0,0,0); transition: background .2s ease-out; } &:hover, &.-active { .lines-indicator { background: $black; } } }
}
.carousel { height: 400px; overflow: hidden; position: relative; &:focus { outline: none; }
}
.flickity-slider { min-height: 400px;
}
.carousel-cell { width: 50%; height: 100%; display: flex; text-align: center; background-size: cover; transition: filter .5s ease-out, opacity .5s ease-out; .-inner { opacity: 1; margin: auto; transition: opacity 1s ease-out .5s; } p { margin: 0; font-size: 25vw; line-height: .75; position: relative; transform-origin: center center; transition: transform .5s ease-out; @media screen and (min-width: 1200px) { font-size: 300px; } &::before { top: 0; opacity: 0; left: -5vw; right: -5vw; z-index: -1; content: ''; bottom: .6vw; position: absolute; border-top: 2px solid; border-bottom: 2px solid; transition: opacity .5s ease-out; } &::after { top: 50%; left: -5vw; opacity: 0; right: -5vw; content: ''; z-index: -1; height: 4px; position: absolute; border-top: 4px dashed; transform: translateY(-4px); transition: opacity .5s ease-out; } &.lines-shown { &::before, &::after { opacity: .25; } } } &:not(.is-selected) { opacity: .25; filter: blur(5px); p { transform: scale(.5); } }
}
.type-tester { padding: 50px 0; margin: 30px 60px; position: relative; border-top: 1px solid; > *:focus, > *:hover { outline: none; background: rgba(0,0,0,.05); } h2 { margin-top: 0; font-size: 34px; max-width: 600px; } p { font-size: 18px; max-width: 600px; line-height: 1.25; }
}

Haha - Script Codes JS Codes

// Initiate the flickity carousel
var $carousel = $('.carousel').flickity({ percentPosition: false, prevNextButtons: false, pageDots: false, wrapAround: true,
});
// Add letter key codes to an array
// to match them up to corresponding
// flickity carousel cell index
var letterIndexes = [];
for (var i=65;i<91;i++) { letterIndexes.push(i);
}
// Go!
$(document).keyup(function(e) { if (e.keyCode > 64 && e.keyCode < 91) { jumpToLetter(letterIndexes.indexOf(e.keyCode)); }
});
// Using flickity's select event to
// activate the cell with the matching
// index to the letter
function jumpToLetter(index) { $carousel.flickity( 'select', index );
}
// Toggling style states
$('.styles span').on('click', function() { if ($(this).is('.bold')) { if (!$(this).is('.-active')) { $(this).addClass('-active'); $('.carousel, .type-tester').css('font-weight', '700'); } else { $(this).removeClass('-active'); $('.carousel, .type-tester').css('font-weight', '400'); } } if ($(this).is('.italic')) { if (!$(this).is('.-active')) { $(this).addClass('-active'); $('.carousel, .type-tester').css('font-style', 'italic'); } else { $(this).removeClass('-active'); $('.carousel, .type-tester').css('font-style', 'normal'); } }
});
$('.color-mode span').on('click', function() { if ($(this).is('.dark')) { $('.light').removeClass('-active'); $(this).addClass('-active'); $('body').addClass('dark-mode'); } else { $('.dark').removeClass('-active'); $(this).addClass('-active'); $('body').removeClass('dark-mode'); }
});
$('.show-lines').on('click', function() { $(this).toggleClass('-active'); $('.carousel p').toggleClass('lines-shown');
});
Haha - Script Codes
Haha - Script Codes
Home Page Home
Developer Ethan
Username pianotiles2
Uploaded August 18, 2022
Rating 3
Size 4,057 Kb
Views 30,360
Do you need developer help for Haha?

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!

Ethan (pianotiles2) Script Codes
Name
Calculator
Jigglypuff
CSS GLITCH
Music
Guess Da Numba
UNSTABLE ATOMS
A Pen by Ethan
Rainbow Messenger
Driving game
Weather Weather
Create amazing love letters 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!