Skip to content

Instantly share code, notes, and snippets.

@breakerh
Last active January 20, 2024 15:28
Show Gist options
  • Save breakerh/3a9fec388eff27f915500629fcbde99f to your computer and use it in GitHub Desktop.
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.
<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>
{"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