designedbyscott designedbyscott - 28 days ago 11
Javascript Question

Run script once per browser session, but freeze script at end

I have a site in development here and I'm happy with the intro. However, I need this script to run once oer browser session, and then to remain in its final state for the remainder of the session. Is this possible, or should I rearrange something. I'm pretty new to this and need a bit of help! My intro script is below:



var words = ['websites', 'animation', 'branding', 'illustration'];
var i = 0;
var final = "thirdrail";
var splash = setInterval(function() {

$("#word").hide().html(words[i++]).fadeIn(500);
if (i == words.length + 1) {
$("#word").html(final);
clearInterval(splash);
var time = setTimeout(function() {
$(".overlay").addClass("level");
$("#word").addClass("before");
$(".logo").addClass("final");
$("#static").html('<img src="symbol.svg"/>');
$("nav").css('right', '-20px');
$(".icon").css('right', '5%');

}, 2000);
}

}, 1000);




Answer

Complete example, if you need it

var final = "thirdrail";

function startSplash() {
	var words = ['websites', 'animation', 'branding', 'illustration'];
	var i = 0;
	var splash = setInterval(function() {

		$("#word").hide().html(words[i++]).fadeIn(500);
		if (i == words.length + 1) {
			$("#word").html(final);
			clearInterval(splash);
			var time = setTimeout(function() {
				endSplash();
				localStorage.setItem("splashed", true);
			}, 2000);
		}
	}, 1000);
}

function endSplash() {
	$("#word").html(final);
	$(".overlay").addClass("level");
	$("#word").addClass("before");
	$(".logo").addClass("final");
	$("#static").html('<img src="symbol.svg"/>');
	$("nav").css('right', '-20px');
	$(".icon").css('right', '5%');
}

if(!sessionStorage.getItem("splashed")){
	startSplash();
} else {
	endSplash();
}