{"id":2183,"date":"2021-04-14T10:24:46","date_gmt":"2021-04-14T14:24:46","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=2183"},"modified":"2024-12-11T16:51:28","modified_gmt":"2024-12-11T21:51:28","slug":"parallax-divider","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/parallax-divider\/","title":{"rendered":"Parallax Divider Block"},"content":{"rendered":"\n<p><strong>This block is only featured in the Pro and Premium Tiers of the NC State Web Platform.<\/strong><\/p>\n\n\n\n<p>This block allows you to add a visually bold statement on top of an image. A parallax effect occurs when the user scrolls down the page. This striking alternative to a standard image or callout box catches users&#8217; attention as they skim the content of a page. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1444\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/03\/image-statement-block.gif\" alt=\"demonstration of image statement block\" class=\"wp-image-2161\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Block Customization<\/h2>\n\n\n\n<p>In addition to the included image and text, content maintainers can choose to feature a background color for images with a lighter color palette. By default the block will recognize when an image contains generally lighter colors, but content maintainers can chose to removed the background by clicking &#8220;Clear&#8221;. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-2-e1618420046870-1024x575.jpg\" alt=\"example of background color setting for image statement block\" class=\"wp-image-2224\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-2-e1618420046870-1024x575.jpg 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-2-e1618420046870-300x169.jpg 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-2-e1618420046870-768x431.jpg 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-2-e1618420046870.jpg 1497w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>There is also an included option to feature a &#8220;Call to Action&#8221; (CTA) at the base of the statement. This CTA can also include a link to an external resource or page. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-3-e1618420087776-1024x576.jpg\" alt=\"example of CTA settings for image statement block\" class=\"wp-image-2225\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-3-e1618420087776-1024x576.jpg 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-3-e1618420087776-300x169.jpg 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-3-e1618420087776-768x432.jpg 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/04\/image-statement-3-e1618420087776.jpg 1501w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Need Help?<\/h2>\n\n\n\n<p>Curious about the Premium Tier of the NC State Web Platform? Want to learn more about the Image Statement block? Feel free to reach out with any questions or concerns at<a rel=\"noreferrer noopener\" href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\" target=\"_blank\">&nbsp;go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Create a visually bold statement on top of an image with a parallax effect while scrolling. \"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[],"content-type":[51],"class_list":["post-2183","reference-article","type-reference-article","status-publish","hentry","content-type-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/2183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":7,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/2183\/revisions"}],"predecessor-version":[{"id":38234,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/2183\/revisions\/38234"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=2183"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=2183"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=2183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}