Create this unique text stroke effect on scroll:
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f02ec6f8c3355833e351b1_wix.gif)
See it in action
While working at Wix Studio I created this section to show the “power of CSS”:
![The "power of CSS" from Wix Studio design page](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f017951788edf39d658f33_wix-studio-design.webp)
The "trick"
The trick is using an image “sandwiched” between 2 headings.
- One “regular” heading at the bottom
- A small image above it
- And a “fake” heading with text stroke and transparent color.
So when scrolling the “fake” heading hides the “real” heading, and that’s how this effect works.
![3 layers: heading, image and a heading](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f018a1b917b937e17e8ed8_heading%20layers%2003.webp)
Step by step instructions for Webflow
I am using Relume's Client First library for the structure, but it's optional.
List of layers
The section has to be very tall and centered to achieve the effect.
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f02009c91c1beccbdf00d8_list-of-layers.webp)
Main Section
- Section name: section_full-height-center
- Display: Flex
- Align: Center / Center
- Spacing: Margin left and right on Auto
- Size: Min. height of 220 VH
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f02063e79b381a5ada29ac_section-full-height.webp)
Padding sections
- Layer name: padding-global
- Padding: Left/Right 5%
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f021fac89116c52b36ff1d_padding-global.webp)
- Layer name: container-large
- Margin: left/right Auto
- Width: 100%
- Max width: 80 REM (optional)
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f022a9e1bfcfdbe6dbe577_container-large.webp)
- Layer name: padding-section-small
- Padding: Top/Bottom 3 REM
- Position: Relative (this one is important)
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f023584ccf549951c9470e_padding-section-small.png)
The "real" heading
The "real" heading has to be fixed to the screen. The "fake" one will scroll past it.
Positon: Fixed to center
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f026ac3d06d1f173fef5bf_real-heading-fixed.webp)
The image
The image will centered to the screen.
- Dislay: Flex
- Align: Center / Center
- Margin left/right Auto
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f027427621cee3a39a47ed_image-center.webp)
The "fake" heading
This is one will have most of settings. It has to have a higher z-index, text stroke and transparent color.
- Position: Fixed to center
- Z-Index: 2 (anything higher than the heading)
- Text Stroke: 2px and black (or any color that matches the "real" hading)
- Transform: Y axis at 50%
- Custom properties: color with the value of transparent
- Under Settings set a custom attribute of aria-hidden of true
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f02d0e00ece3055d1e884d_fake-heading.webp)
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f02d57074323295023060d_text-stroke.webp)
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f02d856b4ae88fb392cfdc_color-transparent.webp)
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f02dad3c02bc59dd079afa_y-axis.webp)
![](https://cdn.prod.website-files.com/62d2dcd35bbb74363e59457c/65f03410dcdbd610d1250574_aria-hidden.webp)
Final thoughts
Sometimes unique effects require some work, but that what makes them special.
This can be applied to both Webflow, Elementor or any other pager builder.