Not in the header code injection section of SS ironically, but this is the footer code injection section:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/* checks if this is a touchscreen for hover behavior */
function isTouch() {
return (('ontouchstart' in window) ||
(navigator.MaxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
}
//facilitates top nav styling on scroll
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: "div.Site-inner",
triggerHook: 'onLeave'
})
.setClassToggle("header.Header--top", "nav-toggle")
.addTo(controller);
//inserts brush effect <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
$("section.Intro").append('<div id="brush"></div>');
//sets home page item overlay
var imageNum = 0;
$("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper a").each(function() {
var itemTitle = $(this).find("img").attr("alt");
var color;
switch (imageNum) {
case 0:
color = c.homeGridItemOne;
break;
case 1:
color = c.homeGridItemTwo;
break;
case 2:
color = c.homeGridItemThree;
break;
case 3:
color = c.homeGridItemFour;
break;
case 4:
color = c.homeGridItemFive;
break;
case 5:
color = c.homeGridItemSix;
break;
default:
color = c.homeGridItemOne;
}
imageNum += 1;
$(this).append("<div class='item-overlay' style='background-color:" + color + "'><span>" + itemTitle + "</span></div>");
});
//item hover effect on home page
if (!isTouch()) {
$("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper").mouseenter(function() {
var insertedElement = $(this).find(".item-overlay");
gsap.to(insertedElement, {
duration: 1,
opacity: 1
});
});
$("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper").mouseleave(function() {
var insertedElement = $(this).find(".item-overlay");
gsap.to(insertedElement, {
duration: 1,
opacity: 0
});
});
}
//sets blog page item overlay
$("section.BlogList a").each(function() {
var itemTitle = $(this).find("img").attr("alt");
$(this).append("<div class='blog-item-overlay'><span>" + itemTitle + "</span></div>");
});
if (!isTouch()) {
//item hover effect on blog page
$("section.BlogList a").mouseenter(function() {
var insertedElement = $(this).find(".blog-item-overlay");
gsap.to(insertedElement, {
duration: 1,
opacity: 1
});
});
$("section.BlogList a").mouseleave(function() {
var insertedElement = $(this).find(".blog-item-overlay");
gsap.to(insertedElement, {
duration: 1,
opacity: 0
});
});
}
//sets gallery page item overlay
if (c.galleries.includes(window.location.pathname)) {
$("a[class*='image']").each(function() {
$(this).css("position", "relative");
var itemTitle = $(this).find("img").attr("alt");
$(this).append("<div class='gallery-item-overlay'><span>" + itemTitle + "</span></div>");
});
}
if (!isTouch()) {
//item hover effect on gallery page
$("a[class*='image']").mouseenter(function() {
var insertedElement = $(this).find(".gallery-item-overlay");
gsap.to(insertedElement, {
duration: 1,
opacity: 1
});
});
$("a[class*='image']").mouseleave(function() {
var insertedElement = $(this).find(".gallery-item-overlay");
gsap.to(insertedElement, {
duration: 1,
opacity: 0
});
});
}
function banners(slug) { //gets list of gallery urls for banner
//inserts arrows
$("section.Intro").append('<div onclick="slideLeft()" id="left-carousel-arrow"></div><div onclick="slideRight()" id="right-carousel-arrow"></div>');
//styles arrow icons
gsap.from("#left-carousel-arrow", {
duration: 3,
opacity: 0,
x: -200
});
gsap.from("#right-carousel-arrow", {
duration: 3,
opacity: 0,
x: 200
});
//sets banner gallery
data.items.forEach(item => imgUrls.push(item.assetUrl));
}
var imgUrls = [];
var slug = window.location.pathname;
slug = slug.replace("/", "");
if (slug == "") {
slug = "home";
}
var dataUrl = "/" + slug + "-banner-gallery/?format=json-pretty";
var data;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
data = JSON.parse(this.responseText);
if (c[slug] != false) {
banners(slug);
}
}
};
xhttp.open("GET", dataUrl, true);
xhttp.send();
//get original background
var originalImg;
var imageLoaded = false;
//changes slideshow image
var counter = 999;
function slideLeft() {
if (!imageLoaded) {
originalImg = $("figure.Intro-image > img").attr("src");
imageLoaded = true;
}
if (counter == 999) {
counter = imgUrls.length - 1;
} else if (counter == 0) {
counter = imgUrls.length;
} else {
counter -= 1;
}
if (counter == imgUrls.length) {
$("figure.Intro-image > img").attr("src", originalImg);
} else {
$("figure.Intro-image > img").attr("src", imgUrls[counter]);
}
}
function slideRight() {
if (!imageLoaded) {
originalImg = $("figure.Intro-image > img").attr("src");
imageLoaded = true;
}
if (counter == 999) {
counter = 0;
} else if (counter == imgUrls.length) {
counter = 0;
} else {
counter += 1;
}
if (counter == imgUrls.length) {
$("figure.Intro-image > img").attr("src", originalImg);
} else {
$("figure.Intro-image > img").attr("src", imgUrls[counter]);
}
}
//strava icon in footer
$("nav.sqs-svg-icon--list").append(
'<a href="https://www.strava.com" id="strava-icon"><div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path id="strava-path" d="M15.387 17.944l-2.089-4.116h-3.065L15.387 24l5.15-10.172h-3.066m-7.008-5.599l2.836 5.598h4.172L10.463 0l-7 13.828h4.169" fill="#fff"/></svg></div></a>'
);
//takes care of hover behavior on mobile
if (isTouch()) {
var homeItems = [];
var galleryItems = [];
var blogItems = [];
//home items mobile behavior
$("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper a").each(function() {
var redirect;
$(this).attr("id", $(this).attr("href"));
$(this).removeAttr("href");
var link = $(this);
$(this).click(function() {
if (redirect) {
var redirectUrl = link.attr("id");
gsap.to(link.find(".item-overlay"), {
duration: 1,
opacity: 0
});
redirect = false;
window.location = redirectUrl;
return;
}
gsap.to(link.find(".item-overlay"), {
duration: 1,
opacity: 1
});
redirect = true;
});
});
//blog items mobile behavior
$("section.BlogList a").each(function() {
var redirect;
$(this).attr("id", $(this).attr("href"));
$(this).removeAttr("href");
var link = $(this);
$(this).click(function() {
if (redirect) {
var redirectUrl = link.attr("id");
gsap.to(link.find(".blog-item-overlay"), {
duration: 1,
opacity: 0
});
redirect = false;
window.location = redirectUrl;
return;
}
gsap.to(link.find(".blog-item-overlay"), {
duration: 1,
opacity: 1
});
redirect = true;
});
});
//gallery items mobile behavior
$("a[class*='image']").each(function() {
var overlay = $(this).find(".gallery-item-overlay");
gsap.to(overlay, {
duration: 10,
opacity: 1
});
});
}
</script>
