HA - story

Developer
Eddy
Size
5,184 Kb
Views
38,456
  1. HA - story Previews
  2. HA - story HTML Codes
  3. HA - story CSS Codes
  4. HA - story JS Codes

How do I make an ha - story?

What is a ha - story? How do you make a ha - story? This script and codes were developed by Eddy on 27 August 2022, Saturday.

HA - story Previews
IQ Test

HA - story - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HA - story</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav>	<ul>	<li><a href="#start">1</a></li>	<li><a href="#description">2</a></li>	<li><a href="#syntax">3</a></li>	<li><a href="#scrollbar">4</a></li>	<li><a href="#rotations">5</a></li>	<li><a href="#rotations-rotated">6</a></li>	<li><a href="#source">7</a></li>	<li><a href="#follow">8</a></li>	</ul>	</nav>
<div class="wrapper">	<div class="demo">	<h1></h1>
Je suis Eddy et je vais vous raconter comment HelloAsso a changé ma vie et celle de milliers d’enfants. <span class="arrow">↓</span>	</div>	<div class="description">	<span class="big">Tout a commencé lors de la création de mon association, un rire pour demain dont le but est de faire rire les enfants déçus du football.
</span>	</div>	<div class="syntax">	<span class="big">En effet, le football fait des ravages chez les jeunes supporters.<br/>Il me faut donc un moyen de trouver des personnes intéressées par mon projet et des financements.
</span>	</div>	<div class="scrollbar">	<span class="big">Après quelques recherches sur internet, je me rends compte que cette tâche ne va pas être simple, vu la multitude de solutions.<br/>Il me faut pourtant quelque chose de gratuit, fiable et tout ça rapidement, c’est bientôt la finale de la coupe de la ligue.
</span>	</div>	<div class="rotations">	<span class="big">Je tombe sur un article de journal parlant des dérives du crowdfunding vis-à-vis des coûts caché facturé par ces plateformes</span>	<span class="upside-down big">Le détracteur est un certain ISMAEL LE MOUEL fondateur d’une plateforme gratuite et se rémunérant au pourboire.
</span>	</div>	<div class="source">	<span class="big">Je me lance, je m’inscris sur HelloAsso. C’est facile, rapide et je reçois dans la foulée un email m’expliquant comment réussir.<br/>Je crée mes premières collectes sur Helloasso une d’adhésion et une autre de dons.
<span>	</span></span></div>	<div class="follow">	<span class="big">C’est un franc succès et au bout d’un mois je comptabilise 20 adhérents et je récupère l’intégralité de mes dons.
nous pouvons, mes adhérents et moi nous envoler vers Niort et redonner le sourire à tous ces enfants.</span>	</div>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://joelb.me/scrollpath/script/lib/jquery.easing.js'></script>
<script src='http://joelb.me/scrollpath/script/jquery.scrollpath.js'></script> <script src="js/index.js"></script>
</body>
</html>

HA - story - Script Codes CSS Codes

/* === CSS RESET === */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;
}
body {	line-height: 1;
}
ol, ul {	list-style: none;
}
blockquote, q {	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {	content: '';	content: none;
}
table {	border-collapse: collapse;	border-spacing: 0;
}
/* === End of CSS RESET === */
body {	background: url("http://joelb.me/scrollpath/style/../assets/classy_fabric.png");	color: white;	font-size: 20px;	font-family: "Terminal Dosis", sans-serif;	text-shadow:	1px 1px 0 transparent,	2px 2px 0 #101010;	overflow: hidden;
}
h1 {	font-size: 75px;	font-weight: bold;	line-height: 1.5em;	text-shadow:	2px 2px 0 transparent,	4px 4px 0 #101010;
}
a, a:visited {	color: white;	text-decoration: none;	border-bottom: 2px dotted;	transition: color 0.2s;
}
a:hover {	color: #AAA;
}
a:active {	color: lightblue;
}
.big {	display: block;	font-size: 30px;	font-weight: bold;	line-height: 1.3em;	margin-bottom: 10px;	text-shadow:	2px 2px 0 transparent,	4px 4px 0 #101010;
}
.wrapper div {	position: absolute;
}
.setting, nav {	position: fixed;	z-index: 9999999;	bottom: 0;	background: rgba(10,10,10, 0.5);	font-family: Helvetica, Arial, sans-serif;	font-weight: normal;	font-size: 20px;
}
.setting {	right: 0;	padding: 10px 20px;	border-radius: 10px 0 0 0;
}
.setting a {	border: none;
}
nav {	left: 0;	border-radius: 0 10px 0 0;
}
nav li {	float: left;
}
nav a {	display: block;	width: 40px;	height: 40px;	line-height: 40px;	border: none;	text-align: center;	transition: 0.25s;
}
nav li:last-child a {	border-radius: 0 10px 0 0;
}
nav a:hover {	background: rgba(15,15,15, 0.5);
}
.sp-canvas {
}
.arrow {	position: relative;	display: inline-block;
}
.demo { top: -60px;	width: 800px;	font-size: 30px;	text-align: center;	font-weight: bold;
}
.demo .arrow {	font-size: 20px;	-webkit-animation: point-down 0.5s alternate infinite;
}
.description {	top: 650px;	left: 420px;	width: 600px;
}
.syntax {	top: 1400px;	left: 430px;	width: 600px;
}
.scrollbar {	top: 1400px;	left: 1600px;	width: 600px;
}
.rotations {	left: 2121px;	top: 500px;	width: 600px;	transform: rotate(-90deg) translateY(2.5em);
}
.rotations .big { margin-bottom: 90px;
}
.rotations .upside-down {	font-size: 30px;	text-align: right;	transform: rotate(180deg) translateY(3em);
}
.source {	left: 2110px;	top: -610px;	width: 600px;	transform: rotate(90deg) translateX(50px);
}
.follow {	width: 600px;	left: 1020px;	top: -780px;	transform: rotate(90deg) translateX(50px);
}
.follow .big {	font-size: 40px;
}
.highlight {	-webkit-animation: highlight 0.2s alternate 6 ;
}
@-webkit-keyframes point-down {	from {	top: 0;	}	to {	top: 5px;	}
}
@-webkit-keyframes highlight {	to {	background: lightblue;	}
}
/* =========================================	Scroll bar styles for jQuery Scroll Path (http://joelb.me/scrollpath) ========================================= */
.sp-scroll-bar {	position: fixed;	z-index: 9999;	right: 0;	top: 5%;	width: 10px;	height: 90%;	border-radius: 5px;
}
.sp-scroll-bar:hover {	background: white;	background: rgba(255,255,255, 0.1);
}
.sp-scroll-bar .sp-scroll-handle {	position: absolute;	width: 100%;	height: 50px;	border-radius: inherit;	background: gray;	background: rgba(0,0,0,0.7);
}
.sp-scroll-bar .sp-scroll-handle:hover {	background: black;
}

HA - story - Script Codes JS Codes

$(document).ready(init);
function init() {	/* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */	$.fn.scrollPath("getPath")	// Move to 'start' element	.moveTo(400, 50, {name: "start"})	// Line to 'description' element	.lineTo(400, 800, {name: "description"})	// Arc down and line to 'syntax'	.arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true)	.lineTo(600, 1600, {	callback: function() {	highlight($(".settings"));	},	name: "syntax"	})	// Continue line to 'scrollbar'	.lineTo(1750, 1600, {	callback: function() {	highlight($(".sp-scroll-handle"));	},	name: "scrollbar"	})	// Arc up while rotating	.arc(1800, 1000, 600, Math.PI/2, 0, true, {rotate: Math.PI/2 })	// Line to 'rotations'	.lineTo(2400, 750, {	name: "rotations"	})	// Rotate in place	.rotate(3*Math.PI/2, {	name: "rotations-rotated"	})	// Continue upwards to 'source'	.lineTo(2400, -700, {	name: "source"	})	// Small arc downwards	.arc(2250, -700, 150, 0, -Math.PI/2, true)	//Line to 'follow'	.lineTo(1350, -850, {	name: "follow"	})	// Arc and rotate back to the beginning.	/*.arc(1300, 50, 900, -Math.PI/2, -Math.PI, true, {rotate: Math.PI*2, name: "end"})*/;	// We're done with the path, let's initate the plugin on our wrapper element	$(".wrapper").scrollPath({drawPath: true, wrapAround: false});	// Add scrollTo on click on the navigation anchors	$("nav").find("a").each(function() {	var target = $(this).attr("href").replace("#", "");	$(this).click(function(e) {	e.preventDefault();	// Include the jQuery easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/)	// for extra easing functions like the one below	$.fn.scrollPath("scrollTo", target, 1000, "easeInOutSine");	});	});	/* ===================================================================== */	$(".tweet").click(function(e) {	open(this.href, "", "width=550, height=450");	e.preventDefault();	});	$.getJSON("http://cdn.api.twitter.com/1/urls/count.json?callback=?&url=http%3A%2F%2Fjoelb.me%2Fscrollpath",	function(data) {	if(data && data.count !== undefined) {	$(".follow .count").html("the " + ordinal(data.count + 1) + " kind person to");	}	});	}
function highlight(element) {	if(!element.hasClass("highlight")) {	element.addClass("highlight");	setTimeout(function() { element.removeClass("highlight"); }, 2000);	}
}
function ordinal(num) {	return num + (	(num % 10 == 1 && num % 100 != 11) ? 'st' :	(num % 10 == 2 && num % 100 != 12) ? 'nd' :	(num % 10 == 3 && num % 100 != 13) ? 'rd' : 'th'	);
}
HA - story - Script Codes
HA - story - Script Codes
Home Page Home
Developer Eddy
Username emnbdx
Uploaded August 27, 2022
Rating 3
Size 5,184 Kb
Views 38,456
Do you need developer help for HA - story?

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!

Eddy (emnbdx) Script Codes
Name
Infinite horizontal slider
HA - integration widget test
HA - radio checkbox mix
Tip joke
HA - proto evt widget
Home color
Sticky test
Bus css animation
LBCA - Mail canvas
Instructables homeslide
Create amazing sales emails 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!