Logo
  • About
  • Services
  • Blog
  • Resources
  • Contact
ActOut
Parallax Effect
💼

Parallax Effect

AMEtech Solutions
AMEtech Solutions
ℹ️

INTRO - What this code does and why you want it

🟦
Hope this was helpful!
ℹ️
Justin Russell
https://ametech.solutions/directory/people/justin-russell
https://www.credly.com/badges/782dd145-e896-437f-8a27-80b701e031b7/public_url

"Hello! I'm here to help you overcome any challenges you might be facing in regards to Notion + Super websites.

If you have any questions or need guidance, feel free to reach out to me. You can DM me on Twitter, connect with me on Super or use the links below to reach out!

I'm dedicated to providing valuable support to individuals like you. My goal is to ensure your website's success, so don't hesitate to get in touch. Looking forward to helping you achieve your goals!

If you are happy with this page please consider Buying me a Coffee!

Need more help? Contact me!

SuperSuper
TwitterTwitter
GumroadGumroad
CalendlyCalendly
Buy Me A CoffeeBuy Me A Coffee
E-mailE-mail
Logo

About

Services

Blog

Resources

Contact

© AMEtech.solutions 2022

XGitHubYouTubeRedditDiscord
/* REQUIRED */

:root {
		--color-bg-default: [don't set];
		/* This is Super's default variable */
		/* It matches the No-Code Theme Designer */
		--parralax-effect: fixed;
	  --parallax-stacking: -1;
}

/* SUPER CONTENT */
/* background-color: MUST BE SET */
/* for Parallax effect */
.super-content {
    background-color: var(--color-bg-default) !important;
}

/* HEADER COVER IMAGE */
/* position: MUST BE *FIXED* */
/* z-index: MUST BE *-1* OR LOWER */
/* for Parallax effect */
img.notion-header__cover-image {
	  position: var(--parallax-effect) !important;
	  z-index: var(--parallax-stacking) !important;
}
/* OPTIONAL */

:root {
		--border-radii-layout: [don't set];
		/* This is Super's default variable */
		/* It matches the No-Code Theme Designer */
}

.notion-header__title {
		background-color: var(----color-bg-default);
		/* sets background color page title */
		border-radius: var(--border-radii-layout);
		/* matches theme rounding */
	  max-width: fit-content;
	  /* matches background-color width to title size */
		margin: auto;
		/* sets margins to force title to center */
		/* without margin: auto title is right-aligned */
}