I have a specific jquery function that I need to execute only the very first time a page loads, not upon refreshing the page.
Here is the code snippet:
$(window).on("load",function() {
$("#logo-black").typed({
strings: ["Nothing^450&Co^250.^500", "^800__^400&Co^600."],
typeSpeed: 70,
backSpeed: 100,
callback: function() {
$(".typed-cursor").css("display", "none"),
setTimeout(function(){
$('.main-load').toggleClass('main-load-active'),
$('.nav-text').toggleClass('nav-text-active');
},400),
$('.nav-reveal').toggleClass('nav-reveal-active');
}
});
});
A few important points to consider: -I am utilizing barba.js, which introduces content dynamically through AJAX requests.
The following code initializes barba.js for my project:
initFullpagePlugin();
function initFullpagePlugin (parentElement) {
var element;
element = parentElement ? $('#fullpage', parentElement) :
$('#fullpage');
if (element.length) {
// Removes old fullPage.js object from memory and DOM elements
if ($.fn.fullpage.destroy) {
$.fn.fullpage.destroy('all');
}
element.fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false
});
}
}
document.addEventListener("DOMContentLoaded", function() {
if (!('webkitClipPath' in document.body.style)) {
alert('Sorry, this demo is available just with webkitClipPath. Try with
Chrome/Safari.');
}
Barba.Pjax.init();
Barba.Prefetch.init();
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
/**
* This function is automatically called as soon the Transition starts
* this.newContainerLoading is a Promise for the loading of the new
container
* (Barba.js also comes with an handy Promise polyfill!)
*/
// As soon the loading is finished and the old page is faded out, let's
fade the new page
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
/**
* this.oldContainer is the HTMLElement of the old Container
*/
return $(this.oldContainer).animate({ opacity: 0 }).promise();
},
fadeIn: function() {
/**
* this.newContainer is the HTMLElement of the new Container
* At this stage newContainer is on the DOM (inside our #barba-
container and with visibility: hidden)
* Please note, newContainer is available just after
newContainerLoading is resolved!
*/
document.body.scrollTop = 0;
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility : 'visible',
opacity : 0
});
initFullpagePlugin($el);
$el.animate({ opacity: 1 }, 400, function() {
/**
* Do not forget to call .done() as soon your transition is finished!
* .done() will automatically remove from the DOM the old Container
*/
_this.done();
});
}
});
/**
* Next step, you have to tell Barba to use the new Transition
*/
Barba.Pjax.getTransition = function() {
/**
* Here you can use your own logic!
* For example you can use different Transition based on the current
page or link...
*/
return FadeTransition;
};
});
$('.no-click').on("click", function(e) {
e.preventDefault();
});
As an example, take a look at this design studio that features an animation when initially loading the home page, but does not repeat upon page refresh. (Please note that this behavior is primarily observed on the mobile version, resembling what I aim to achieve. The element being animated exists on every page, so ensuring it triggers only on first load & exclusively on index.html is my goal.)
Any assistance, suggestions, or constructive criticism are welcomed!