Skip to content

Instantly share code, notes, and snippets.

@fongreecss
Created April 17, 2024 06:58
Show Gist options
  • Save fongreecss/7ffbe6d4c70bc63924a1cef42e7d62ba to your computer and use it in GitHub Desktop.
Save fongreecss/7ffbe6d4c70bc63924a1cef42e7d62ba to your computer and use it in GitHub Desktop.
var $video = $('#sbranding_hero_video video');
var $image_1 = $('.sbranding-hero_shadow-1');
var $image_2 = $('.sbranding-hero_shadow-2');
var currentSrc1 = 'https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/6619145cb252ec488c91b348_Ellipse%20495.svg';
var currentSrc2 = 'https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/6619145ca350727bae3f0e30_Ellipse%20496.svg';
function preloadImage(src) {
var img = new Image();
img.src = src;
}
function updateImage(src1, src2) {
if (src1 !== currentSrc1 || src2 !== currentSrc2) {
$image_1.css('opacity', 0);
$image_2.css('opacity', 0);
setTimeout(function() {
$image_1.attr('src', src1);
$image_2.attr('src', src2);
$image_1.css('opacity', 1);
$image_2.css('opacity', 1);
currentSrc1 = src1;
currentSrc2 = src2;
}, 200);
}
}
preloadImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbbad4348d1ca430cb1_shadow_2_1.svg');
preloadImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbb20c8d39aa0f7eb8c_shadow-2_2.svg');
preloadImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbbaaf2b41a57b671f4_shadow_3_1.svg');
preloadImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbbbc903c42babffb35_shadow_3_2.svg');
preloadImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbb2417313d87cdaa99_shadow_4_1.svg');
preloadImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbc17e4c762ca58b204_shadow_4_2.svg');
$video.on('timeupdate', function() {
var currentTime = this.currentTime;
if (currentTime > 1.8 && currentTime < 3) {
updateImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbbad4348d1ca430cb1_shadow_2_1.svg', 'https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbb20c8d39aa0f7eb8c_shadow-2_2.svg');
} else if (currentTime > 3 && currentTime < 5.6) {
updateImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbbaaf2b41a57b671f4_shadow_3_1.svg', 'https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbbbc903c42babffb35_shadow_3_2.svg');
} else if (currentTime > 5.6) {
updateImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbb2417313d87cdaa99_shadow_4_1.svg', 'https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/661e7fbc17e4c762ca58b204_shadow_4_2.svg');
} else {
updateImage('https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/6619145cb252ec488c91b348_Ellipse%20495.svg', 'https://uploads-ssl.webflow.com/5f996b22b00afe35a55e6f79/6619145ca350727bae3f0e30_Ellipse%20496.svg');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment