MastodonTech.de

Ana Tudor 🐯I made a little thing on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> :pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> controlled swipe transition <a href="https://codepen.io/thebabydino/pen/azObZOe" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/azObZOe</a>Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.Inspiration <a href="https://x.com/avanderpotte/status/1923382432784412771" rel="nofollow noopener" translate="no" target="_blank">https://x.com/avanderpotte/status/1923382432784412771</a> (via <a href="https://mastodon.social/@codrops" class="u-url mention" rel="nofollow noopener" target="_blank">@codrops</a> motion highlights roundup) cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssMask</a> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#conicGradient</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#maths</a> <a href="https://mastodon.social/tags/scrollEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollEffect</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Haven't had it in me to do anything for the past week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a>, so here's a demo from earlier this year that fits: <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> infinite scroll gallery <a href="https://codepen.io/thebabydino/pen/XJrYqGb" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/XJrYqGb</a>One of my most hearted demos ever & my only one to get over 1000 ❤️ without being in the most hearted of previous year.<a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#3D</a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTransforms</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼Here's a detailed explanation of the how behind <a href="https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/" rel="nofollow noopener" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/</a>Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/dPPbmao" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/dPPbmao</a>Also uses container queries, CSS trigonometric functions.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTransform</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#trigonometry</a>

Ana Tudor 🐯Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/XJWxLWV" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/XJWxLWV</a>cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssAnimation</a> <a href="https://mastodon.social/tags/gradientText" class="mention hashtag" rel="nofollow noopener" target="_blank">#gradientText</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a>

Hacker NewsMade a scroll bar buddy that walks down the page when you scroll — <a href="https://focusfurnace.com/scroll_buddy.html" rel="nofollow noopener" translate="no" target="_blank">https://focusfurnace.com/scroll_buddy.html</a> <a href="https://mastodon.social/tags/HackerNews" class="mention hashtag" rel="nofollow noopener" target="_blank">#HackerNews</a> <a href="https://mastodon.social/tags/ScrollBarBuddy" class="mention hashtag" rel="nofollow noopener" target="_blank">#ScrollBarBuddy</a> <a href="https://mastodon.social/tags/ScrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#ScrollAnimation</a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDevelopment</a> <a href="https://mastodon.social/tags/UXDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#UXDesign</a> <a href="https://mastodon.social/tags/TechInnovation" class="mention hashtag" rel="nofollow noopener" target="_blank">#TechInnovation</a>

Ana Tudor 🐯I made a thing: scroll-driven, almost pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> infinite circular gallery rotation - check it out on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/XJrYqGb" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/XJrYqGb</a>Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.Made with 🖤 for this week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a>.cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#3D</a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTransforms</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯It got picked 😊... and I've made it work in Firefox too 😃 (if the layout.css.scroll-driven-animations.enabled flag is set to true in about:config)<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a>

Ana Tudor 🐯Here's a little thing I made for the 1st <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a> of '25: pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> tilt & zoom grid on scroll!Check it out on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/jENzprY" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/jENzprY</a>Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.Chromium only.<a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/containerQueryUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#containerQueryUnits</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDEvelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDEvelopment</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a>

Ana Tudor 🐯A little something combining <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> shapes, trigonometry, plus scroll-driven animations on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a>: angled slide!<a href="https://codepen.io/thebabydino/full/zYJKRyq" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/full/zYJKRyq</a>Also an entry for this week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a>.<a href="https://mastodon.social/tags/cssShapes" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssShapes</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#trigonometry</a>

Ana Tudor 🐯Looks like I took over the Trending section of <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> 😼15 out of the 24 demos on the first 6 pages are mine! 😯<a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/progress" class="mention hashtag" rel="nofollow noopener" target="_blank">#progress</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Ana Tudor 🐯Scroll-driven animations are still behind a flag in Firefox and I'm already filing bugs 🪲 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1927325" rel="nofollow noopener" translate="no" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=1927325</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontent" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontent</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/TIL" class="mention hashtag" rel="nofollow noopener" target="_blank">#TIL</a>: apparently scroll-driven animations don't trigger animationend when I've scrolled to the bottom of the page?You can still trigger a transition event <a href="https://codepen.io/thebabydino/pen/abeyjPm?editors=0111" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/abeyjPm?editors=0111</a><a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Ana Tudor 🐯The seventh is a fancy effect you may have seen on some websites: making a section slide horizontally on vertical scroll!Here with pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> 🤯 using scroll-driven animations <a href="https://codepen.io/thebabydino/pen/WNqJXXa" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/WNqJXXa</a><a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a>

Ana Tudor 🐯If you like this kind of stuff, pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> on <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> effects, you can find tens more under this tag 🏷️ on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> 🪄 <a href="https://codepen.io/thebabydino/pens/tags/?selected_tag=css-scroll-animation" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pens/tags/?selected_tag=css-scroll-animation</a> ✨ <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/noJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#noJS</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Ana Tudor 🐯What is this dark magic? 🪄 It's pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> horizontal slide on vertical scroll mix!With scroll-driven animations + `position: sticky`! 😼Check out the demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> ✨ <a href="https://codepen.io/thebabydino/pen/WNqJXXa" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/WNqJXXa</a>cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a>

Ana Tudor 🐯Pure CSS on scroll reveal & parallax effects on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/abgOxaW" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/abgOxaW</a>Pay attention to how images slide within their own element boxes 😼Saw a demo using JS for this parallax effect and... I seem to be on a mission to redo every scroll effect in pure CSS.cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/pureCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#pureCSS</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/reveal" class="mention hashtag" rel="nofollow noopener" target="_blank">#reveal</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/scrollEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollEffect</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a>

Ana Tudor 🐯You seem to like the no JS char by char on scroll reveal effect <a href="https://mastodon.social/@anatudor/112551564705281523" rel="nofollow noopener" translate="no" target="_blank">https://mastodon.social/@anatudor/112551564705281523</a> so here's a gallery of various such effects on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/KKLWBJZ" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/KKLWBJZ</a>Which is your fave? I oscillate between undissolve & wave.🤔Also an entry for this week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a>.Inspired by Inspired by a <a href="https://mastodon.social/@codrops" class="u-url mention" rel="nofollow noopener" target="_blank">@codrops</a> demo <a href="https://tympanus.net/Development/ScrollBlurTypography/" rel="nofollow noopener" translate="no" target="_blank">https://tympanus.net/Development/ScrollBlurTypography/</a>cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/reveal" class="mention hashtag" rel="nofollow noopener" target="_blank">#reveal</a> <a href="https://mastodon.social/tags/revealEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#revealEffect</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/noJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#noJS</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#textEffect</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a>

Ana Tudor 🐯Another pure CSS & SVG thing I made on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> last week for the <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a>: <a href="https://codepen.io/thebabydino/pen/yLWjMWB" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/yLWjMWB</a>Idea from <a href="https://codepen.io/gabrielcojea/pen/GRoqOYm" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/gabrielcojea/pen/GRoqOYm</a> but using no JS for scroll-triggered transitions and no text duplication for the dynamic headline-image intersection.cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/scrollEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollEffect</a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#textEffect</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Somehow forgot to post this <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> demo <a href="https://codepen.io/thebabydino/pen/dyEVGrx" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/dyEVGrx</a>, which fits both most recent <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a> weeks.It's a version of this demo by <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://scroll-driven-animations.style/demos/cover-flow/css/" rel="nofollow noopener" translate="no" target="_blank">https://scroll-driven-animations.style/demos/cover-flow/css/</a>, but relying on CSS 3D (transforms) instead of `z-index` for z-axis order.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#3d</a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#transform</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#maths</a> <a href="https://mastodon.social/tags/cssTransition" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssTransition</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollEffect</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Ana Tudor 🐯If you're a patron on Patreon, then you may have seen the solution over a year ago. Here it is now public for everyone to see on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a>: <a href="https://codepen.io/thebabydino/pen/rNqPGMM" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/rNqPGMM</a>Also an entry for this week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePenChallenge</a> (scroll snapping). <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/scrollEffect" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollEffect</a> <a href="https://mastodon.social/tags/diagonal" class="mention hashtag" rel="nofollow noopener" target="_blank">#diagonal</a> <a href="https://mastodon.social/tags/angled" class="mention hashtag" rel="nofollow noopener" target="_blank">#angled</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/pureCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#pureCSS</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#CodePen</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/wbDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#wbDevelopment</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/cats" class="mention hashtag" rel="nofollow noopener" target="_blank">#cats</a> <a href="https://mastodon.social/tags/bigCat" class="mention hashtag" rel="nofollow noopener" target="_blank">#bigCat</a>

Frühere Suchanfragen

Suchoptionen

Verwaltet von:

Serverstatistik:

#scrollanimation