Created
November 22, 2023 03:22
-
-
Save wpsoul/c005cc71046f7a80e8a4b1f86418a799 to your computer and use it in GitHub Desktop.
Color change on scroll with different custom reverse colors (Greenshift WordPress)
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
| <!-- wp:greenshift-blocks/row {"id":"gsbp-9a008358-cd5c","inlineCssStyles":"#gspb_row-id-gsbp-9a008358-cd5c{justify-content: space-between;margin-top: 0px;margin-bottom: 0px;display: flex;flex-wrap: wrap;}#gspb_row-id-gsbp-9a008358-cd5c \u003e .gspb_row__content {display: flex;justify-content: space-between;margin: 0 auto;width: 100%;flex-wrap: wrap;}.gspb_row{position:relative;}div[id^=gspb_col-id]{padding:15px min(3vw, 20px);box-sizing:border-box;position:relative;}body.gspb-bodyfront #gspb_row-id-gsbp-9a008358-cd5c \u003e .gspb_row__content{max-width:var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 1200px);}#gspb_row-id-gsbp-9a008358-cd5c{margin-top:200px;padding-top:250px;padding-bottom:250px;}body .bgchange{background-color:#000000;}body .bgchange{color:#ffffff;}body .bgchange{transition:all 1s cubic-bezier(0.165,0.84,0.44,1);}body .bgchange.active .colortext{color:#0e6cb1;}","dynamicGClasses":[{"value":"bgchange","type":"local","label":"bgchange","localed":false,"css":"body .bgchange{background-color:#000000;}body .bgchange{color:#ffffff;}body .bgchange{transition:all 1s cubic-bezier(0.165,0.84,0.44,1);}","attributes":{"typography":{"textShadow":{},"color":"#ffffff"},"background":{"color":"#000000"},"csstransform":{"time":"1"}},"originalID":"gsbp-9a008358-cd5c","originalBlock":"greenshift-blocks/row","selectors":[{"value":".active .colortext","attributes":{"typography":{"textShadow":{},"color":"#0e6cb1"}},"css":"body .bgchange.active .colortext{color:#0e6cb1;}"}]}],"align":"full","displayStyles":false,"spacing":{"margin":{"values":{"top":["200px"]},"locked":false},"padding":{"values":{"top":["250px"],"bottom":["250px"]},"locked":false}},"isVariation":"","className":"bgchange"} --> | |
| <div class="wp-block-greenshift-blocks-row alignfull gspb_row gspb_row-id-gsbp-9a008358-cd5c bgchange" id="gspb_row-id-gsbp-9a008358-cd5c"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-49649658-26df","inlineCssStyles":"#gspb_col-id-gsbp-49649658-26df.gspb_row__col\u002d\u002d12{width:100%;}@media (max-width: 575.98px){#gspb_col-id-gsbp-49649658-26df.gspb_row__col\u002d\u002d12{width:100%;}}"} --> | |
| <div class="wp-block-greenshift-blocks-row-column gspb_row__col--12 gspb_col-id-gsbp-49649658-26df" id="gspb_col-id-gsbp-49649658-26df"><!-- wp:greenshift-blocks/row {"id":"gsbp-d28da4b0-e466","inlineCssStyles":"#gspb_row-id-gsbp-d28da4b0-e466{justify-content: space-between;margin-top: 0px;margin-bottom: 0px;display: flex;flex-wrap: wrap;}#gspb_row-id-gsbp-d28da4b0-e466 \u003e .gspb_row__content {display: flex;justify-content: space-between;margin: 0 auto;width: 100%;flex-wrap: wrap;}.gspb_row{position:relative;}div[id^=gspb_col-id]{padding:15px min(3vw, 20px);box-sizing:border-box;position:relative;}body.gspb-bodyfront #gspb_row-id-gsbp-d28da4b0-e466 \u003e .gspb_row__content{max-width:var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 1200px);}#gspb_row-id-gsbp-d28da4b0-e466{margin-bottom:250px;}","dynamicGClasses":[],"interactionLayers":[{"triggerData":{"trigger":"on-view"},"actions":[{"actionname":"set-variable","env":"no-action","attr":"background-color","attrValue":"black","selector":".bgchange"},{"actionname":"set-variable","env":"no-action","attr":"color","attrValue":"white","selector":".bgchange"},{"actionname":"remove-class","env":"no-action","classname":"active","selector":".bgchange"}],"env":"no-action"}],"rowLayout":"2","displayStyles":false,"spacing":{"margin":{"values":{"bottom":["250px"]},"locked":false},"padding":{"values":{},"locked":false}},"isVariation":"","className":""} --> | |
| <div class="wp-block-greenshift-blocks-row gspb_row gspb_row-id-gsbp-d28da4b0-e466" id="gspb_row-id-gsbp-d28da4b0-e466" data-gspbactions="[{"triggerData":{"trigger":"on-view"},"actions":[{"actionname":"set-variable","env":"no-action","attr":"background-color","attrValue":"black","selector":".bgchange"},{"actionname":"set-variable","env":"no-action","attr":"color","attrValue":"white","selector":".bgchange"},{"actionname":"remove-class","env":"no-action","classname":"active","selector":".bgchange"}],"env":"no-action"}]"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-fee827e7-7447","inlineCssStyles":"#gspb_col-id-gsbp-fee827e7-7447.gspb_row__col\u002d\u002d6{width:50%;}@media (max-width: 575.98px){#gspb_col-id-gsbp-fee827e7-7447.gspb_row__col\u002d\u002d6{width:100%;}}","columnSize":"6"} --> | |
| <div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_col-id-gsbp-fee827e7-7447" id="gspb_col-id-gsbp-fee827e7-7447"></div> | |
| <!-- /wp:greenshift-blocks/row-column --> | |
| <!-- wp:greenshift-blocks/row-column {"id":"gsbp-b47fce2b-bd3a","inlineCssStyles":"#gspb_col-id-gsbp-b47fce2b-bd3a.gspb_row__col\u002d\u002d6{width:50%;}@media (max-width: 575.98px){#gspb_col-id-gsbp-b47fce2b-bd3a.gspb_row__col\u002d\u002d6{width:100%;}}","columnSize":"6"} --> | |
| <div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_col-id-gsbp-b47fce2b-bd3a" id="gspb_col-id-gsbp-b47fce2b-bd3a"><!-- wp:greenshift-blocks/iconbox {"id":"gsbp-fe54983f-a502","inlineCssStyles":"#gspb_iconBox-id-gsbp-fe54983f-a502 svg{width: 72px;}#gspb_iconBox-id-gsbp-fe54983f-a502{justify-content:flex-start;display:flex;}#gspb_iconBox-id-gsbp-fe54983f-a502 svg{height:50px!important;width:50px!important;min-width:50px!important;}#gspb_iconBox-id-gsbp-fe54983f-a502 svg, #gspb_iconBox-id-gsbp-fe54983f-a502 svg path{fill:#3ccbda !important;}#gspb_iconBox-id-gsbp-fe54983f-a502 svg{margin:0px !important;}#gspb_iconBox-id-gsbp-fe54983f-a502 .gspb_iconBox__wrapper{margin-bottom:30px;}","spacing":{"margin":{"values":{"bottom":["30px"]},"locked":false},"padding":{"values":{},"locked":false}},"shapeJustify":"flex-start","iconBox_icon":{"icon":{"font":"rhicon rhi-quote-right","svg":"","image":""},"fill":"#3ccbda","fillhover":"","type":"font","iconSize":["50px"]}} --> | |
| <div class="wp-block-greenshift-blocks-iconbox gspb_iconBox gspb_iconBox-id-gsbp-fe54983f-a502" id="gspb_iconBox-id-gsbp-fe54983f-a502"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M928 64h-256c-53 0-96 43-96 96v256c0 53 43 96 96 96h160v128c0 70.6-57.4 128-128 128h-16c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h16c176.8 0 320-143.2 320-320v-480c0-53-43-96-96-96zM352 64h-256c-53 0-96 43-96 96v256c0 53 43 96 96 96h160v128c0 70.6-57.4 128-128 128h-16c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h16c176.8 0 320-143.2 320-320v-480c0-53-43-96-96-96z"></path></svg></div></div> | |
| <!-- /wp:greenshift-blocks/iconbox --> | |
| <!-- wp:greenshift-blocks/heading {"id":"gsbp-3c63947d-8df1","inlineCssStyles":"#gspb_heading-id-gsbp-3c63947d-8df1{font-size:clamp(2.2rem, 4vw, 2.8rem);}#gspb_heading-id-gsbp-3c63947d-8df1{line-height:clamp(2.75rem, 4.7vw, 3.5rem);}#gspb_heading-id-gsbp-3c63947d-8df1{margin-top:0px;}","headingContent":"Scroll Down to see the effect based on the Interaction panel","spacing":{"margin":{"values":{"top":["0px"]},"locked":false},"padding":{"values":{},"locked":false}},"typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"2.2rem","fluidSizePerfect":"4vw","fluidSizeMax":"2.8rem","fluidLineMin":"2.75rem","fluidLinePerfect":"4.7vw","fluidLineMax":"3.5rem","fluidSizeCustomValue":["clamp(2.2rem, 4vw, 2.8rem)"],"fluidLineCustomValue":["clamp(2.75rem, 4.7vw, 3.5rem)"]}} --> | |
| <h2 id="gspb_heading-id-gsbp-3c63947d-8df1" class="gspb_heading gspb_heading-id-gsbp-3c63947d-8df1 ">Scroll Down to see the effect based on the Interaction panel</h2> | |
| <!-- /wp:greenshift-blocks/heading --></div> | |
| <!-- /wp:greenshift-blocks/row-column --> </div></div> | |
| <!-- /wp:greenshift-blocks/row --> | |
| <!-- wp:greenshift-blocks/row {"id":"gsbp-488da0ff-6525","inlineCssStyles":"#gspb_row-id-gsbp-488da0ff-6525{justify-content: space-between;margin-top: 0px;margin-bottom: 0px;display: flex;flex-wrap: wrap;}#gspb_row-id-gsbp-488da0ff-6525 \u003e .gspb_row__content {display: flex;justify-content: space-between;margin: 0 auto;width: 100%;flex-wrap: wrap;}.gspb_row{position:relative;}div[id^=gspb_col-id]{padding:15px min(3vw, 20px);box-sizing:border-box;position:relative;}body.gspb-bodyfront #gspb_row-id-gsbp-488da0ff-6525 \u003e .gspb_row__content{max-width:var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 1200px);}#gspb_row-id-gsbp-488da0ff-6525{margin-bottom:96px;}","dynamicGClasses":[],"interactionLayers":[],"rowLayout":"2","displayStyles":false,"spacing":{"margin":{"values":{"bottom":["96px"]},"locked":false},"padding":{"values":{},"locked":false}},"isVariation":"","className":""} --> | |
| <div class="wp-block-greenshift-blocks-row gspb_row gspb_row-id-gsbp-488da0ff-6525" id="gspb_row-id-gsbp-488da0ff-6525"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-dbfd38a1-715e","inlineCssStyles":"#gspb_col-id-gsbp-dbfd38a1-715e.gspb_row__col\u002d\u002d6{width:50%;}@media (max-width: 575.98px){#gspb_col-id-gsbp-dbfd38a1-715e.gspb_row__col\u002d\u002d6{width:100%;}}","enableExtendedWidth":false,"width":[null],"widthUnit":["%"],"columnSize":"6"} --> | |
| <div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_col-id-gsbp-dbfd38a1-715e" id="gspb_col-id-gsbp-dbfd38a1-715e"><!-- wp:greenshift-blocks/iconbox {"id":"gsbp-55521b7a-da0b","inlineCssStyles":"#gspb_iconBox-id-gsbp-55521b7a-da0b svg{width: 72px;}#gspb_iconBox-id-gsbp-55521b7a-da0b{justify-content:flex-start;display:flex;}#gspb_iconBox-id-gsbp-55521b7a-da0b svg{height:50px!important;width:50px!important;min-width:50px!important;}#gspb_iconBox-id-gsbp-55521b7a-da0b svg, #gspb_iconBox-id-gsbp-55521b7a-da0b svg path{fill:#3ccbda !important;}#gspb_iconBox-id-gsbp-55521b7a-da0b svg{margin:0px !important;}#gspb_iconBox-id-gsbp-55521b7a-da0b .gspb_iconBox__wrapper{margin-bottom:30px;}","spacing":{"margin":{"values":{"bottom":["30px"]},"locked":false},"padding":{"values":{},"locked":false}},"shapeJustify":"flex-start","iconBox_icon":{"icon":{"font":"rhicon rhi-quote-right","svg":"","image":""},"fill":"#3ccbda","fillhover":"","type":"font","iconSize":["50px"]}} --> | |
| <div class="wp-block-greenshift-blocks-iconbox gspb_iconBox gspb_iconBox-id-gsbp-55521b7a-da0b" id="gspb_iconBox-id-gsbp-55521b7a-da0b"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M928 64h-256c-53 0-96 43-96 96v256c0 53 43 96 96 96h160v128c0 70.6-57.4 128-128 128h-16c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h16c176.8 0 320-143.2 320-320v-480c0-53-43-96-96-96zM352 64h-256c-53 0-96 43-96 96v256c0 53 43 96 96 96h160v128c0 70.6-57.4 128-128 128h-16c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h16c176.8 0 320-143.2 320-320v-480c0-53-43-96-96-96z"></path></svg></div></div> | |
| <!-- /wp:greenshift-blocks/iconbox --> | |
| <!-- wp:greenshift-blocks/heading {"id":"gsbp-ef463914-b172","inlineCssStyles":"#gspb_heading-id-gsbp-ef463914-b172{font-size:clamp(2.2rem, 4vw, 2.8rem);}#gspb_heading-id-gsbp-ef463914-b172{line-height:clamp(2.75rem, 4.7vw, 3.5rem);}#gspb_heading-id-gsbp-ef463914-b172{margin-top:0px;}","dynamicGClasses":[],"interactionLayers":[{"triggerData":{"trigger":"on-view","rootmargin":"-50% 0% -50% 0%","threshold":"0"},"actions":[{"actionname":"attach-class","env":"no-action","selector":".bgchange","classname":"active"},{"actionname":"set-variable","env":"no-action","attr":"background-color","attrValue":"white","selector":".bgchange"},{"actionname":"set-variable","env":"no-action","attr":"color","attrValue":"black","selector":".bgchange"}],"env":"no-action"}],"headingContent":"When an element is in center view, it changes color and class of block","spacing":{"margin":{"values":{"top":["0px"]},"locked":false},"padding":{"values":{},"locked":false}},"typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"2.2rem","fluidSizePerfect":"4vw","fluidSizeMax":"2.8rem","fluidLineMin":"2.75rem","fluidLinePerfect":"4.7vw","fluidLineMax":"3.5rem","fluidSizeCustomValue":["clamp(2.2rem, 4vw, 2.8rem)"],"fluidLineCustomValue":["clamp(2.75rem, 4.7vw, 3.5rem)"]},"className":"colortext"} --> | |
| <h2 id="gspb_heading-id-gsbp-ef463914-b172" class="gspb_heading gspb_heading-id-gsbp-ef463914-b172 " data-gspbactions="[{"triggerData":{"trigger":"on-view","rootmargin":"-50% 0% -50% 0%","threshold":"0"},"actions":[{"actionname":"attach-class","env":"no-action","selector":".bgchange","classname":"active"},{"actionname":"set-variable","env":"no-action","attr":"background-color","attrValue":"white","selector":".bgchange"},{"actionname":"set-variable","env":"no-action","attr":"color","attrValue":"black","selector":".bgchange"}],"env":"no-action"}]">When an element is in center view, it changes color and class of block</h2> | |
| <!-- /wp:greenshift-blocks/heading --> | |
| <!-- wp:paragraph --> | |
| <p>Tortor posuere ac ut consequat. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Sem fringilla ut morbi tincidunt augue interdum velit. </p> | |
| <!-- /wp:paragraph --> | |
| <!-- wp:paragraph --> | |
| <p>Sapien pellentesque habitant morbi tristique senectus et. Donec adipiscing tristique risus nec feugiat in. </p> | |
| <!-- /wp:paragraph --> | |
| <!-- wp:paragraph --> | |
| <p>Quis imperdiet massa tincidunt.</p> | |
| <!-- /wp:paragraph --></div> | |
| <!-- /wp:greenshift-blocks/row-column --> | |
| <!-- wp:greenshift-blocks/row-column {"id":"gsbp-cef286f4-68f7","inlineCssStyles":"#gspb_col-id-gsbp-cef286f4-68f7.gspb_row__col\u002d\u002d6{width:50%;}@media (max-width: 575.98px){#gspb_col-id-gsbp-cef286f4-68f7.gspb_row__col\u002d\u002d6{width:100%;}}","enableExtendedWidth":false,"width":[null],"widthUnit":["%"],"columnSize":"6"} --> | |
| <div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_col-id-gsbp-cef286f4-68f7" id="gspb_col-id-gsbp-cef286f4-68f7"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-f25a6bd2-c185","inlineCssStyles":"#gspb_svgBox-id-gsbp-f25a6bd2-c185{justify-content:flex-end;display:flex;}#gspb_svgBox-id-gsbp-f25a6bd2-c185 svg{width:300px!important;overflow:visible;}#gspb_svgBox-id-gsbp-f25a6bd2-c185 svg, #gspb_svgBox-id-gsbp-f25a6bd2-c185 svg path{fill:transparent !important;}#gspb_svgBox-id-gsbp-f25a6bd2-c185 svg, #gspb_svgBox-id-gsbp-f25a6bd2-c185 svg path{stroke:transparent !important;}#gspb_svgBox-id-gsbp-f25a6bd2-c185 svg{max-width:100%}","fillone":"currentColor","shapeJustify":"flex-end","width":[300,null,null,null],"shapeSeparator":{"shape":17},"enabletext":true,"svgtext":"Greenshift Page Builder","textlength":440,"isVariation":"svgtext"} --> | |
| <div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-f25a6bd2-c185" id="gspb_svgBox-id-gsbp-f25a6bd2-c185"><svg xmlns="https://www.w3.org/2000/svg" version="1.1" data-style="17" x="0px" y="0px" viewBox="0 0 200 200" preserveAspectRatio="none"><path data-style="17" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" id="textshapegsbp-f25a6bd2-c185"></path><defs><linearGradient><stop></stop><stop></stop></linearGradient></defs><text fill="currentColor"><textPath href="#textshapegsbp-f25a6bd2-c185" textLength="440">Greenshift Page Builder</textPath></text></svg></div> | |
| <!-- /wp:greenshift-blocks/svgshape --></div> | |
| <!-- /wp:greenshift-blocks/row-column --> </div></div> | |
| <!-- /wp:greenshift-blocks/row --></div> | |
| <!-- /wp:greenshift-blocks/row-column --> </div></div> | |
| <!-- /wp:greenshift-blocks/row --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment