Last active
January 20, 2024 15:28
-
-
Save breakerh/3a9fec388eff27f915500629fcbde99f to your computer and use it in GitHub Desktop.
Example section to archieve the effect of a changing background. Keep in mind I removed the test domain. So you need to upload an image in the section background overlay, and change 2 url's in the section custom css.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script defer> | |
document.addEventListener('DOMContentLoaded', ()=>{ | |
jQuery(($) => { | |
const container_blocks = document.querySelectorAll('.dynamic-blocks') | |
if(container_blocks.length>0){ | |
container_blocks.forEach(container=>{ | |
const blocks = container.querySelectorAll('.dynamic-block') | |
blocks.forEach(block=>{ | |
block.addEventListener('mouseover', ()=>{ | |
block.parentElement.querySelector('.active').classList.remove('active') | |
block.classList.add('active') | |
}) | |
}) | |
}) | |
} | |
}) | |
}) | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"content":[{"id":"5230f19b","settings":{"flex_direction":"row","min_height":{"unit":"vh","size":100,"sizes":[]},"min_height_tablet":{"unit":"vh","size":"","sizes":[]},"min_height_mobile_extra":{"unit":"vh","size":"","sizes":[]},"min_height_mobile":{"unit":"vh","size":"","sizes":[]},"flex_justify_content":"space-between","flex_align_items":"center","flex_gap":{"column":"100","row":"100","isLinked":true,"unit":"px","size":100},"background_background":"classic","background_color":"#2A7EA3","background_image":{"url":"","id":"","size":"","alt":"","source":"library"},"background_position":"center center","background_size":"cover","background_overlay_background":"classic","background_overlay_image":{"url":"https:\/\/domain.ext\/wp-content\/uploads\/2024\/01\/jeremy-bishop-cvkFJdc_IpI-unsplash.jpg","id":1693,"size":"","alt":"","source":"library"},"background_overlay_position":"center center","background_overlay_size":"cover","background_overlay_opacity":{"unit":"px","size":0.41,"sizes":[]},"overlay_blend_mode":"multiply","css_classes":"dynamic-blocks","jet_parallax_layout_list":[],"custom_css":"selector:has(#lorem2.active):before {\n background-image: url('https:\/\/domain.ext\/wp-content\/uploads\/2024\/01\/taylor-wright-s8Yz0dqKrVI-unsplash.jpg');\n}\nselector:has(#lorem3.active):before {\n background-image: url('https:\/\/domain.ext\/wp-content\/uploads\/2024\/01\/ahmad-odeh-KHipnBn7sdY-unsplash.jpg');\n}\n\nselector, selector * {\n transition: all .2s ease;\n}\nselector .dynamic-block {\n cursor: pointer;\n}\nselector .active {\n background: white;\n}\nselector .active * {\n color: black !important;\n}\nselector .active a {\n border-color: black !important;\n}"},"elements":[{"id":"1cad9cfe","settings":{"border_border":"solid","border_width":{"unit":"px","top":"1","right":"0","bottom":"0","left":"0","isLinked":false},"padding":{"unit":"px","top":"40","right":"20","bottom":"40","left":"20","isLinked":false},"_element_id":"lorem1","css_classes":"dynamic-block active","jet_parallax_layout_list":[],"__globals__":{"border_color":"globals\/colors?id=039a972"}},"elements":[{"id":"525b0781","settings":{"title":"Lorem ipsum dolor","title_color":"#FFFFFF","typography_typography":"custom","typography_font_family":"Montserrat","__globals__":{"title_color":""}},"elements":[],"isInner":false,"widgetType":"heading","elType":"widget"},{"id":"2087ccb","settings":{"text_color":"#FFFFFF","typography_typography":"custom","typography_font_family":"Montserrat"},"elements":[],"isInner":false,"widgetType":"text-editor","elType":"widget"},{"id":"9c7d5bf","settings":{"text":"Lorem ipsum","align":"left","typography_typography":"custom","typography_font_family":"Montserrat","button_text_color":"#FFFFFF","background_color":"#FFFFFF00","border_border":"solid","border_width":{"unit":"px","top":"0","right":"0","bottom":"2","left":"0","isLinked":false},"border_color":"#FFFFFF","border_radius":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":true},"text_padding":{"unit":"px","top":"5","right":"0","bottom":"5","left":"0","isLinked":false},"__globals__":{"button_text_color":"","border_color":""}},"elements":[],"isInner":false,"widgetType":"button","elType":"widget"}],"isInner":true,"elType":"container"},{"id":"344c5ed6","settings":{"border_border":"solid","border_width":{"unit":"px","top":"1","right":"0","bottom":"0","left":"0","isLinked":false},"padding":{"unit":"px","top":"40","right":"20","bottom":"40","left":"20","isLinked":false},"_element_id":"lorem2","css_classes":"dynamic-block","jet_sticky_section_min_height":{"unit":"px","size":"","sizes":[]},"jet_sticky_section_min_height_tablet":{"unit":"px","size":"","sizes":[]},"jet_sticky_section_min_height_mobile_extra":{"unit":"px","size":"","sizes":[]},"jet_sticky_section_min_height_mobile":{"unit":"px","size":"","sizes":[]},"jet_parallax_layout_list":[],"__globals__":{"border_color":"globals\/colors?id=039a972"}},"elements":[{"id":"4436ad50","settings":{"title":"Lorem ipsum dolor","title_color":"#FFFFFF","typography_typography":"custom","typography_font_family":"Montserrat","__globals__":{"title_color":""}},"elements":[],"isInner":false,"widgetType":"heading","elType":"widget"},{"id":"1c0fb6cf","settings":{"text_color":"#FFFFFF","typography_typography":"custom","typography_font_family":"Montserrat"},"elements":[],"isInner":false,"widgetType":"text-editor","elType":"widget"},{"id":"23ab8c82","settings":{"text":"Lorem ipsum","align":"left","typography_typography":"custom","typography_font_family":"Montserrat","button_text_color":"#FFFFFF","background_color":"#FFFFFF00","border_border":"solid","border_width":{"unit":"px","top":"0","right":"0","bottom":"2","left":"0","isLinked":false},"border_color":"#FFFFFF","border_radius":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":true},"text_padding":{"unit":"px","top":"5","right":"0","bottom":"5","left":"0","isLinked":false},"__globals__":{"button_text_color":"","border_color":""}},"elements":[],"isInner":false,"widgetType":"button","elType":"widget"}],"isInner":true,"elType":"container"},{"id":"17e70b06","settings":{"border_border":"solid","border_width":{"unit":"px","top":"1","right":"0","bottom":"0","left":"0","isLinked":false},"padding":{"unit":"px","top":"40","right":"20","bottom":"40","left":"20","isLinked":false},"_element_id":"lorem3","css_classes":"dynamic-block","jet_sticky_section_min_height":{"unit":"px","size":"","sizes":[]},"jet_sticky_section_min_height_tablet":{"unit":"px","size":"","sizes":[]},"jet_sticky_section_min_height_mobile_extra":{"unit":"px","size":"","sizes":[]},"jet_sticky_section_min_height_mobile":{"unit":"px","size":"","sizes":[]},"jet_parallax_layout_list":[],"__globals__":{"border_color":"globals\/colors?id=039a972"}},"elements":[{"id":"68387ae","settings":{"title":"Lorem ipsum dolor","title_color":"#FFFFFF","typography_typography":"custom","typography_font_family":"Montserrat","__globals__":{"title_color":""}},"elements":[],"isInner":false,"widgetType":"heading","elType":"widget"},{"id":"4f96702e","settings":{"text_color":"#FFFFFF","typography_typography":"custom","typography_font_family":"Montserrat"},"elements":[],"isInner":false,"widgetType":"text-editor","elType":"widget"},{"id":"2ec9e48c","settings":{"text":"Lorem ipsum","align":"left","typography_typography":"custom","typography_font_family":"Montserrat","button_text_color":"#FFFFFF","background_color":"#FFFFFF00","border_border":"solid","border_width":{"unit":"px","top":"0","right":"0","bottom":"2","left":"0","isLinked":false},"border_color":"#FFFFFF","border_radius":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":true},"text_padding":{"unit":"px","top":"5","right":"0","bottom":"5","left":"0","isLinked":false},"__globals__":{"button_text_color":"","border_color":""}},"elements":[],"isInner":false,"widgetType":"button","elType":"widget"}],"isInner":true,"elType":"container"}],"isInner":false,"elType":"container"}],"page_settings":[],"version":"0.4","title":"example","type":"section"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment