dale Posted February 1, 2021 Share Posted February 1, 2021 Site URL: https://caper-prism-9zj6.squarespace.com password is: Prime2.0 Right now I have code to make images go from B&W (very slight color) to full color on hover. What I'd much rather do is have images start as B&W and turn into color as you scroll down the page or after a certain amount of time. (In the same way that you can set up an image with "Animations" "Focus In" for instance) So the site doesn't go to color only when hovered over, but starts as B&W and turns into color as you move through the site overall. Does anyone know how to do this, or if it is even possible? I would think it would be code that affects or adds to "animate image block" Thanks for any help!! Link to comment
creedon Posted February 1, 2021 Share Posted February 1, 2021 Some of these effects might be achieved. Some may require the business plan or above so that Javacript can be used. Like this one. If you comment out your current grayscale effect you could try the following. Add the following to Settings > Advanced > Code Injection > HEADER. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <style> :root { --image-grayscale : 100%; } img { -moz-filter: grayscale( var( --image-grayscale ) ); -webkit-filter : grayscale( var( --image-grayscale ) ); filter : grayscale( var( --image-grayscale ) ); } </style> <script> $( ( ) => { let $de = $( document.documentElement ); const maxScrollTop = $( document ).height ( ) - $( window ).height ( ); $( window ).scroll ( function ( ) { const percent = 100 - $( window ).scrollTop ( ) / maxScrollTop * 100; $de.css ( '--image-grayscale', percent + '%' ); } ); } ); </script> This is for a v7.0 site using the Brine family of templates. This effects all images on the page. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
dale Posted February 1, 2021 Author Share Posted February 1, 2021 12 hours ago, creedon said: Some of these effects might be achieved. Some may require the business plan or above so that Javacript can be used. Like this one. If you comment out your current grayscale effect you could try the following. Add the following to Settings > Advanced > Code Injection > HEADER. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <style> :root { --image-grayscale : 100% } img { -moz-filter: grayscale( var( --image-grayscale ) ); -webkit-filter : grayscale( var( --image-grayscale ) ); filter : grayscale( var( --image-grayscale ) ); } </style> <script> $( ( ) => { let $de = $( document.documentElement ); const maxScrollTop = $( document ).height ( ) - $( window ).height ( ); $( window ).scroll ( function ( ) { const percent = 100 - $( window ).scrollTop ( ) / maxScrollTop * 100; $de.css ( '--image-grayscale', percent + '%' ); } ); } ); </script> This effect all images on the page. Let us know how it goes. Thank you Creedon! (We will have the business plan.) I tried this on a couple of pages and here's what's happening... On the home page, https://caper-prism-9zj6.squarespace.com/ the images start out black and white and seem to get to 10-20% color as you scroll down. And then go back to greyscale when you scroll back up (that is less significant than having it go from 0% to 100%). If it could be made to stay at 100%, that would be ideal, but not critical. On the flavors (categories and types) and (essential oils) I tried it and nothing seems to happen. https://caper-prism-9zj6.squarespace.com/categories https://caper-prism-9zj6.squarespace.com/essential-oils-2 Also, is there a way to make this work for gallery grids as well? Thank you so much!!! Link to comment
dale Posted February 1, 2021 Author Share Posted February 1, 2021 2 minutes ago, dale said: Thank you Creedon! (We will have the business plan.) I tried this on a couple of pages and here's what's happening... On the home page, https://caper-prism-9zj6.squarespace.com/ the images start out black and white and seem to get to 10-20% color as you scroll down. And then go back to greyscale when you scroll back up (that is less significant than having it go from 0% to 100%). If it could be made to stay at 100%, that would be ideal, but not critical. On the flavors (categories and types) and (essential oils) I tried it and nothing seems to happen. https://caper-prism-9zj6.squarespace.com/categories https://caper-prism-9zj6.squarespace.com/essential-oils-2 Also, is there a way to make this work for gallery grids as well? Thank you so much!!! It looks like it is working with the gallery grids. On a page with a long series, I can see that it starts at 0% at the top and as you scroll down, they all become 100%, until you scroll up again. I wonder can the rate be adjusted so that it is slower to take effect, and to make it work better on shorter grids? (like flavor categories above)? https://caper-prism-9zj6.squarespace.com/bakery Thank you again!! Link to comment
dale Posted February 1, 2021 Author Share Posted February 1, 2021 1 minute ago, dale said: It looks like it is working with the gallery grids. On a page with a long series, I can see that it starts at 0% at the top and as you scroll down, they all become 100%, until you scroll up again. I wonder can the rate be adjusted so that it is slower to take effect, and to make it work better on shorter grids? (like flavor categories above)? https://caper-prism-9zj6.squarespace.com/bakery Thank you again!! And how can I thank you? Happy to pay, give good review, etc. Link to comment
dale Posted February 1, 2021 Author Share Posted February 1, 2021 44 minutes ago, dale said: And how can I thank you? Happy to pay, give good review, etc. Also noticed, due to the nature of it that the logo in the navigation header always looks greyscale. Link to comment
creedon Posted February 1, 2021 Share Posted February 1, 2021 Quote On the home page, the images start out black and white and seem to get to 10-20% color as you scroll down. (that is less significant than having it go from 0% to 100%). Actually is does go from 0 - 100 but there is obviously a problem with the linear nature of the color change. Quote And then go back to greyscale when you scroll back up If it could be made to stay at 100%, that would be ideal, but not critical. I think that could be done. Quote On the flavors (categories and types) and (essential oils) I tried it and nothing seems to happen. On categories the issue is that the image appears a ways down the page and by the time it is in view the percent has changed quite a bit. Some kind of delay of the application of the the effect would need to be added somehow. On essential oils the style tag has gotten messed up. It looks like the following. <style> :root { --image-grayscale : 100% } img { -moz-filter: grayscale( var( --image-grayscale ) ); -webkit-filter : grayscale( var( --image-grayscale ) ); filter : grayscale( var( --image-grayscale ) ); } </style> And it should look like the following. <style> :root { --image-grayscale : 100%; } img { -moz-filter: grayscale( var( --image-grayscale ) ); -webkit-filter : grayscale( var( --image-grayscale ) ); filter : grayscale( var( --image-grayscale ) ); } </style> Quote On a page with a long series, I can see that it starts at 0% at the top and as you scroll down, they all become 100%, until you scroll up again. I wonder can the rate be adjusted so that it is slower to take effect, and to make it work better on shorter grids? (like flavor categories above)? That is my thinking as well. A non-linear progression. Logarithmic or weighted perhaps. Quote Also noticed, due to the nature of it that the logo in the navigation header always looks greyscale. The image targeting can be made more specific. I'm going to need to cogitate on this one a bit. In the mean time you may want to pull the code out. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
dale Posted February 1, 2021 Author Share Posted February 1, 2021 1 hour ago, creedon said: Actually is does go from 0 - 100 but there is obviously a problem with the linear nature of the color change. I think that could be done. On categories the issue is that the image appears a ways down the page and by the time it is in view the percent has changed quite a bit. Some kind of delay of the application of the the effect would need to be added somehow. On essential oils the style tag has gotten messed up. It looks like the following. <style> :root { --image-grayscale : 100% } img { -moz-filter: grayscale( var( --image-grayscale ) ); -webkit-filter : grayscale( var( --image-grayscale ) ); filter : grayscale( var( --image-grayscale ) ); } </style> And it should look like the following. <style> :root { --image-grayscale : 100%; } img { -moz-filter: grayscale( var( --image-grayscale ) ); -webkit-filter : grayscale( var( --image-grayscale ) ); filter : grayscale( var( --image-grayscale ) ); } </style> That is my thinking as well. A non-linear progression. Logarithmic or weighted perhaps. The image targeting can be made more specific. I'm going to need to cogitate on this one a bit. In the mean time you may want to pull the code out. Thank you so much! I'll leave the code in for now. This site is still in development, so nobody else will see it. (I am showing it to the client tomorrow, but I can talk those issues with him.) Link to comment
creedon Posted February 3, 2021 Share Posted February 3, 2021 Here is a new version of the code. It's not quite there I don't think but closer. Normally I update my previous code post but in this case I'll leave the first version as it is simple and someone might be able to build off of it for a similar effect. <style> :root { --image-grayscale : 100%; } .Main-content img { -moz-filter: grayscale( var( --image-grayscale ) ); -webkit-filter : grayscale( var( --image-grayscale ) ); filter : grayscale( var( --image-grayscale ) ); } </style> <script> $( ( ) => { const maxScrollTop = $( document ).height ( ) - $( window ).height ( ); const startEffectTop = $( '.Main-content img:first' ).offset ( ).top; let $de = $( document.documentElement ); let maxScrolled = 0; $( window ).scroll ( function ( ) { const scrollTop = $( window ).scrollTop ( ); if ( scrollTop < startEffectTop ) return; if ( scrollTop < maxScrolled ) return; maxScrolled = scrollTop; const x = ( scrollTop - startEffectTop ) / ( maxScrollTop - startEffectTop ); const percent = ( Math.cos ( Math.PI * x ) + 1 ) / 2 * 100; $de.css ( '--image-grayscale', percent + '%' ); } ); } ); </script> This is for a v7.0 site using the Brine family of templates. Install instructions are the same as previous code post. New features. The effect only goes one way as you scroll down the page more color is revealed. If you scroll up nothing changes. Also the effect doesn't continue until you scroll beyond the furthest point you scrolled in the window so far. The effect doesn't start until the first image of the main body of the page. The ease effect is non-linear. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
dale Posted February 4, 2021 Author Share Posted February 4, 2021 22 hours ago, creedon said: Here is a new version of the code. It's not quite there I don't think but closer. Normally I update my previous code post but in this case I'll leave the first version as it is simple and someone might be able to build off of it for a similar effect. <style> :root { --image-grayscale : 100%; } .Main-content img { -moz-filter: grayscale( var( --image-grayscale ) ); -webkit-filter : grayscale( var( --image-grayscale ) ); filter : grayscale( var( --image-grayscale ) ); } </style> <script> $( ( ) => { const maxScrollTop = $( document ).height ( ) - $( window ).height ( ); const startEffectTop = $( '.Main-content img:first' ).offset ( ).top; let $de = $( document.documentElement ); let maxScrolled = 0; $( window ).scroll ( function ( ) { const scrollTop = $( window ).scrollTop ( ); if ( scrollTop < startEffectTop ) return; if ( scrollTop < maxScrolled ) return; maxScrolled = scrollTop; const x = ( scrollTop - startEffectTop ) / ( maxScrollTop - startEffectTop ); const percent = ( Math.cos ( Math.PI * x ) + 1 ) / 2 * 100; $de.css ( '--image-grayscale', percent + '%' ); } ); } ); </script> This is for a v7.0 site using the Brine family of templates. Install instructions are the same as previous code post. New features. The effect only goes one way as you scroll down the page more color is revealed. If you scroll up nothing changes. Also the effect doesn't continue until you scroll beyond the furthest point you scrolled in the window so far. The effect doesn't start until the first image of the main body of the page. The ease effect is non-linear. Let us know how it goes. Thanks for continuing to work on this! I do think it is closer. I tried it on a couple of pages and here's what it seems to be doing. On <Applications> <Bakery> it starts B&W and goes to color great. But then it goes back to B&W and color again. If you scroll to the very bottom of the page, everything turns B&W and stays that way. On <Colors> <Natural Colors> it stays B&W until near the bottom of the page. If you go all the way to the bottom and come up again, the colors stay at maybe 30%? Just a thought (and I'm not a programmer so this could sound totally ridiculous) but could there be an addition to the code that might work by tapping into the code for images? <Image> <Design> <Animation> <Fade In, Slide Up, Focus In, etc> If so, that might solve all of the timing and length of page issues. Thanks for your continued thoughts on this! Link to comment
creedon Posted February 4, 2021 Share Posted February 4, 2021 I'm seeing some of the issues you mentioned. But not others. I'm wondering if this is because when you are viewing the site you are logged in and also if Ajax loading might be causing some inconsistent behaviour. What happens if you view the site in an Incognito or private window? Do you still have the same issues? Also how do things look if you turn off Ajax loading? Let me throw out an alternate line of thinking. Originally you mentioned color change based on scroll. Which I assumed was based on scroll over the whole range of scroll of the page. Would your client be happy if each image when it came into view transitioned from b&w to color over a couple of seconds? I'm just spit balling here and I don't know if can be done but if it could I think it would solve several of the issues we've run into having to do with page length and changing the color. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
dale Posted February 7, 2021 Author Share Posted February 7, 2021 On 2/3/2021 at 10:48 PM, creedon said: I'm seeing some of the issues you mentioned. But not others. I'm wondering is this is because when you are viewing the site you are logged in and also if Ajax loading might be causing some inconsistent behaviour. What happens if you view the site in an Incognito or private window? Do you still have the same issues? Also how do things look if you turn off Ajax loading? Let me throw out an alternate line of thinking. Originally you mentioned color change based on scroll. Which I assumed was based on scroll over the whole range of scroll of the page. Would your client be happy if each image when it came into view transitioned from b&w to color over a couple of seconds? I'm just spit balling here and I don't know if can be done but if it could I think it would solve several of the issues we've run into having to do with page length and changing the color. On 2/3/2021 at 10:48 PM, creedon said: Turning off the ajax loading helped on the incognito page. It still turns B&W as you scroll up and color as you scroll down, and the page length is a big factor. I think your idea of each image transitioning from B&W to color after a few seconds is perfect!! I think the client would love that! It would also solve the B&W logo issue and be dramatic for the logo as well, don't you think? If you could please have the code do that, I think it would be fabulous. Thank you!!!! And you can use the code of this site as a sample or let me know how I can help you (testimonial, payment, etc) Link to comment
creedon Posted February 8, 2021 Share Posted February 8, 2021 I'll look into this alternative technique. I already have some ideas and code in mind. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted February 9, 2021 Share Posted February 9, 2021 Here is a run at this alternate technique. First you want to remove the previous effect. Instead of page by page like the previous effect we'll do this one site wide. It can be made to be page by page if needed. Add the following to Design > Custom CSS. /* begin saturate images effect */ :root { --grayscale-to-color-duration : 1s; } @-webkit-keyframes toColor { 0% { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } 25% { -webkit-filter : grayscale( 75% ); filter : grayscale( 75% ); } 50% { -webkit-filter : grayscale( 50% ); filter : grayscale( 50% ); } 75% { -webkit-filter : grayscale( 25% ); filter : grayscale( 25% ); } 100% { -webkit-filter : grayscale( 0% ); filter : grayscale( 0% ); } } @keyframes toColor { 0% { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } 25% { -webkit-filter : grayscale( 75% ); filter : grayscale( 75% ); } 50% { -webkit-filter : grayscale( 50% ); filter : grayscale( 50% ); } 75% { -webkit-filter : grayscale( 25% ); filter : grayscale( 25% ); } 100% { -webkit-filter : grayscale( 0% ); filter : grayscale( 0% ); } } .Header-branding-logo, .Index img, .Main-content img, .Footer img { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } .Header-branding-logo { /* color the header logo when the site is loaded */ -webkit-animation : toColor var( --grayscale-to-color-duration ); animation : toColor var( --grayscale-to-color-duration ); -webkit-filter : unset; filter : unset; } img.saturate { -webkit-animation : toColor var( --grayscale-to-color-duration ); animation : toColor var( --grayscale-to-color-duration ); -webkit-filter : unset; filter : unset; } /* end saturate images effect */ Add the following to Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { /* begin saturate images when they are fully in viewport for v7.0 site using the Brine template SS Version : 7.0 Template : Brine family */ // how long in milliseconds there is no scrolling before applying effect const scrollInactivityPeriodMs = 125; /* delay in milliseconds applying effect when multiple elements are fully visible in the viewport at the same time */ const mulipleElementsInViewportDelayMs = 500; // do not change anything below, there be the borg here let countElementsInViewport = 0; let windowScrollTimeout = null; let $images = $( '.Index img, .Main-content img, .Footer img' ) .filter ( imagesFilter ); /* filter once to catch any image already in the viewport */ function elementInViewport ( e ) { const { top, bottom } = e.getBoundingClientRect ( ); return top >= 0 && bottom <= window.innerHeight; } function imagesFilter ( ) { if ( ! elementInViewport ( this ) ) return true; let $this = $( this ); if ( $this.hasClass ( 'saturate' ) ) return false; setTimeout ( ( $e ) => { $e.addClass ( 'saturate' ); }, countElementsInViewport++ * mulipleElementsInViewportDelayMs, $this ); let $galleryElement = $this.parents ( '.sqs-gallery-design-stacked' ); if ( $galleryElement.length ) $( 'img', $galleryElement ).addClass ( 'saturate' ); return false; } $( window ).on ( 'scroll', function ( ) { if ( windowScrollTimeout !== null) { clearTimeout ( windowScrollTimeout ); } windowScrollTimeout = setTimeout ( function ( ) { countElementsInViewport = 0; $images = $images.filter ( imagesFilter ); if ( ! $images.length ) $( window ).off ( 'scroll' ); }, scrollInactivityPeriodMs ); } ); // end saturate images when they are fully in viewport } ); </script> This is for a v7.0 site using a Brine family template. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
dale Posted February 9, 2021 Author Share Posted February 9, 2021 13 hours ago, creedon said: Here is a first run at this alternate technique. First you want to remove the previous effect. Instead of page by page like the previous effect we'll do this one site wide. It can be made to be page by page if needed. Add the following to Design > Custom CSS. /* begin grayscale to color image effect */ :root { --grayscale-to-color-duration : 3s; } @-webkit-keyframes toColor { 0% { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } 25% { -webkit-filter : grayscale( 75% ); filter : grayscale( 75% ); } 50% { -webkit-filter : grayscale( 50% ); filter : grayscale( 50% ); } 75% { -webkit-filter : grayscale( 25% ); filter : grayscale( 25% ); } 100% { -webkit-filter : grayscale( 0% ); filter : grayscale( 0% ); } } @keyframes toColor { 0% { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } 25% { -webkit-filter : grayscale( 75% ); filter : grayscale( 75% ); } 50% { -webkit-filter : grayscale( 50% ); filter : grayscale( 50% ); } 75% { -webkit-filter : grayscale( 25% ); filter : grayscale( 25% ); } 100% { -webkit-filter : grayscale( 0% ); filter : grayscale( 0% ); } } .Header-branding-logo, .Main-content img, .Footer img { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } .Header-branding-logo { /* color the header logo when the site is loaded */ -webkit-animation : toColor var( --grayscale-to-color-duration ); animation : toColor var( --grayscale-to-color-duration ); -webkit-filter : unset; filter : unset; } img.saturate { -webkit-animation : toColor var( --grayscale-to-color-duration ); animation : toColor var( --grayscale-to-color-duration ); -webkit-filter : unset; filter : unset; } /* end grayscale to color image effect */ Add the following to Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { // begin saturate images when they are in fully in viewport function elementInViewport ( e ) { const { top, bottom } = e.getBoundingClientRect ( ); return top >= 0 && bottom <= window.innerHeight; } let $images = $( '.Main-content img, .Footer img' ); $( window ).on ( 'scroll', function ( ) { let i = 0; $images.each ( function ( ) { if ( ! elementInViewport ( this ) ) return false; setTimeout ( function ( $e ) { $e.addClass ( 'saturate' ); }, i++ * 1000, $( this ) ); } ); if ( i ) $images.splice ( 0, i ); if ( ! $images.length ) $( window ).off ( 'scroll' ); } ); // end saturate images when they are in fully in viewport } ); </script> Let us know how it goes. On 2/3/2021 at 10:48 PM, creedon said: I'm seeing some of the issues you mentioned. But not others. I'm wondering is this is because when you are viewing the site you are logged in and also if Ajax loading might be causing some inconsistent behaviour. What happens if you view the site in an Incognito or private window? Do you still have the same issues? Also how do things look if you turn off Ajax loading? Let me throw out an alternate line of thinking. Originally you mentioned color change based on scroll. Which I assumed was based on scroll over the whole range of scroll of the page. Would your client be happy if each image when it came into view transitioned from b&w to color over a couple of seconds? I'm just spit balling here and I don't know if can be done but if it could I think it would solve several of the issues we've run into having to do with page length and changing the color. On 2/3/2021 at 10:48 PM, creedon said: Turning off the ajax loading helped on the incognito page. It still turns B&W as you scroll up and color as you scroll down, and the page length is a big factor. I think your idea of each image transitioning from B&W to color after a few seconds is perfect!! I think the client would love that! It would also solve the B&W logo issue and be dramatic for the logo as well, don't you think? If you could please have the code do that, I think it would be fabulous. Thank you!!!! And you can use the code of this site as a sample or let me know how I can help you (testimonial, payment, etc) I removed all the previous code and did as you said. The footer images have become B&W. Nothing else on the home page is B&W (that is an index page, don't know if that matters). It looks like all the images on the other pages have turned B&W, but nothing shifts back to color. I looked at it through Squarespace and also via incognito. Thanks for any help you can give! Link to comment
creedon Posted February 9, 2021 Share Posted February 9, 2021 2 hours ago, dale said: The footer images have become B&W. It looks like all the images on the other pages have turned B&W, but nothing shifts back to color. Add the following to Settings > Advanced > Code Injection > HEADER. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> For these effects jQuery will always need to be installed. 2 hours ago, dale said: Nothing else on the home page is B&W (that is an index page, don't know if that matters). I'll look into this one. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted February 9, 2021 Share Posted February 9, 2021 Replace the following CSS in Design > Custom CSS. .Header-branding-logo, .Main-content img, .Footer img { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } ...with... .Header-branding-logo, .Index img, .Main-content img, .Footer img { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } I also updated my previous code post for this alternate effect. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
dale Posted February 10, 2021 Author Share Posted February 10, 2021 5 hours ago, creedon said: Replace the following CSS in Design > Custom CSS. .Header-branding-logo, .Main-content img, .Footer img { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } ...with... .Header-branding-logo, .Index img, .Main-content img, .Footer img { -webkit-filter : grayscale( 100% ); filter : grayscale( 100% ); } I also updated my previous code post for this alternate effect. Wow! Check it out! It really looks great! (I dropped the seconds from 3 to 1, and it seems to be timed better to scrolling down.) I think the client will really love this! There are a couple of flakey parts still... The home page still stays B&W (is that because it is an index page?) All of the Application pages work perfectly. Natural Colors works well until the bottom image and the footer (these stay B&W) Certified Colors mostly stays B&W, including the footer. Flavors Categories and Types stays B&W (including the footer) Flavors- Essential Oils changes from B&W to color (including footer) only after a looooong delay. Botanicals works great. I haven't added images to the last couple of pages yet. Not sure what is different about the few that are not working. Thank you soooooo much! I think this is really cool and happy to give you a great reference and have you use this as a sample of your coding when it's done, if you'd like. Link to comment
dale Posted February 10, 2021 Author Share Posted February 10, 2021 Essential Oils only seems to turn to color after you go all the way down and then back up and then give it some time... Don't know if that helps explain what's going on with that page. Thanks again! Link to comment
creedon Posted February 10, 2021 Share Posted February 10, 2021 4 hours ago, dale said: The home page still stays B&W (is that because it is an index page?) No I needed to make an update to the code. I left out a selector to work with Index pages. 4 hours ago, dale said: Natural Colors works well until the bottom image and the footer (these stay B&W) Certified Colors mostly stays B&W, including the footer. Flavors Categories and Types stays B&W (including the footer) Flavors- Essential Oils changes from B&W to color (including footer) only after a looooong delay. Botanicals works great. Not sure what is different about the few that are not working. Thank you soooooo much! Not so much a difference in the pages. My code just needs deal to better with use under real world conditions. Thank you for the informative descriptions of how things are performing. That helps me a lot! I'll dig back in soon. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted February 12, 2021 Share Posted February 12, 2021 Ideally I would have liked to have used the Intersection Observer API but apparently the browser coverage still has some big holes in it. I've updated my full previous code post (Monday the 8th). Replace my previous code with the updated code. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
dale Posted February 12, 2021 Author Share Posted February 12, 2021 You totally ROCKED it!!! It is working perfectly!!I changed the inactivity to 8ms so that it starts sooner (but they've already seen the B&W as it comes up from scrolling). And I changed the grayscale to color duration to .5 sec. (I especially liked your borg reference in the code, and I respected that.) I just showed it to the client and he LOVES it! Thank you again!! Please let me know if there is anything that I can do for you. You made this site so much better!! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.