Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

been thinking of making this since i saw Seb Cornelius's post. the static hover book is a pure css approach. no javascript used here. each page has a fixed rotation defined to it. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).

Soren

7,152 subscribers

146,070 views • 9 months ago •via X (Twitter)

Arts Education Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

My next passion project is going to be a culmination of some of my projects this month. The scope is a bit larger than a weekend so in the meantime, I wanted to share an animation for it since I like making landing pages 🙂 This is all pure CSS! I'll deploy it on Vercel soon.

My next passion project is going to be a culmination of some of my projects this month. The scope is a bit larger than a weekend so in the meantime, I wanted to share an animation for it since I like making landing pages 🙂 This is all pure CSS! I'll deploy it on Vercel soon.

Jesse Zhang

83,441 views • 3 years ago

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

729,494 views • 2 years ago

Very special day for me! Today is the release date for my new book called A Bow of Bronze I am thrilled to release this project and share with you all! This book has been years in the making with hardships and roadblocks along the way but God saw me through! I’m excited to share this with you and pray that it blesses you as it did me! Here’s where you can find the book, LOVE YOU ALL!

Very special day for me! Today is the release date for my new book called A Bow of Bronze I am thrilled to release this project and share with you all! This book has been years in the making with hardships and roadblocks along the way but God saw me through! I’m excited to share this with you and pray that it blesses you as it did me! Here’s where you can find the book, LOVE YOU ALL!

Nate Norman

140,234 views • 1 year ago

I built a book. Not a PDF viewer. A real, skeuomorphic hardcover book that lives in the browser. The idea started with a simple question: What if reading a digital book actually felt like reading a real one? Since I've worked on book app designs before, I was curious to see how Claude would respond to one of those ideas that starts out sounding a little unrealistic. At first, I only wanted to recreate the experience of opening a book and flipping through its pages. Then one idea became another. I added: • Real page-flipping interactions with sound • Text highlighting in multiple colors • A voice reader • Reading reminders that continue from where you left off • Bookmarks to save important pages to share with friends later Then I thought about one of the biggest frustrations with large books. Flipping through hundreds of pages just to find page 287 isn't fun. So I added a page entry feature. Type a page number, and the book automatically flips through the pages until it gets there, just like a real book in motion. There are still more ideas I want to explore, but this was one of those projects where I kept building as the ideas came to mind. Curiosity led me here, and I like where it is taking me! Built with Claude. Designed by me. Livelink: Do let me know what you think!

I built a book. Not a PDF viewer. A real, skeuomorphic hardcover book that lives in the browser. The idea started with a simple question: What if reading a digital book actually felt like reading a real one? Since I've worked on book app designs before, I was curious to see how Claude would respond to one of those ideas that starts out sounding a little unrealistic. At first, I only wanted to recreate the experience of opening a book and flipping through its pages. Then one idea became another. I added: • Real page-flipping interactions with sound • Text highlighting in multiple colors • A voice reader • Reading reminders that continue from where you left off • Bookmarks to save important pages to share with friends later Then I thought about one of the biggest frustrations with large books. Flipping through hundreds of pages just to find page 287 isn't fun. So I added a page entry feature. Type a page number, and the book automatically flips through the pages until it gets there, just like a real book in motion. There are still more ideas I want to explore, but this was one of those projects where I kept building as the ideas came to mind. Curiosity led me here, and I like where it is taking me! Built with Claude. Designed by me. Livelink: Do let me know what you think!

Biba

29,273 views • 1 month ago

Our origin story is divine and so is our destiny. I was reminded of this today as I visited with students at BYU–Hawaii. Each of us left heaven to come here—but heaven has never left us! These young people—and all of you—are blessed beings of light, the spirit children of an infinite God! And you bear within you a potential beyond your own capacity to imagine.

Our origin story is divine and so is our destiny. I was reminded of this today as I visited with students at BYU–Hawaii. Each of us left heaven to come here—but heaven has never left us! These young people—and all of you—are blessed beings of light, the spirit children of an infinite God! And you bear within you a potential beyond your own capacity to imagine.

Dieter F. Uchtdorf

22,335 views • 5 months ago

'I Am Jazz,' the book McBride is showing to these innocent babies, is based on a true story. Here is a clip from the reality show it is based on. Yes, we are thinking exactly what you are thinking: this sounds like r*pe.

Sensitive content

'I Am Jazz,' the book McBride is showing to these innocent babies, is based on a true story. Here is a clip from the reality show it is based on. Yes, we are thinking exactly what you are thinking: this sounds like r*pe.

Rep. Nancy Mace

172,236 views • 1 year ago

When I saw this post from this Obidiot Chijioke, I knew this is not true. So I reached out to a friend, who is one of the engineers working on this project & he denied it outrightly. According to him, the project has been sectionalised, and it has never stopped since it started. As seen in the videos below, Section2,3,4 and 5 are at 90% completion, while sections 1, 6, 7, 8, & 9 are ongoing, also almost 60% completed. Bury your empty head filled with alcohol and fake soft drinks in shame.

When I saw this post from this Obidiot Chijioke, I knew this is not true. So I reached out to a friend, who is one of the engineers working on this project & he denied it outrightly. According to him, the project has been sectionalised, and it has never stopped since it started. As seen in the videos below, Section2,3,4 and 5 are at 90% completion, while sections 1, 6, 7, 8, & 9 are ongoing, also almost 60% completed. Bury your empty head filled with alcohol and fake soft drinks in shame.

𝐇𝐢𝐝𝐢𝐦𝐚, 𝐏𝐡.𝐃.

16,661 views • 2 months ago

This has really been a pure shit show btw… With a working left DRL and a checked off checklist before the work, only to claim that we handed over faulty left DRL is really below the standard I expected from these guys. ForPitsSake not the kind of person I expected!

Sensitive content

This has really been a pure shit show btw… With a working left DRL and a checked off checklist before the work, only to claim that we handed over faulty left DRL is really below the standard I expected from these guys. ForPitsSake not the kind of person I expected!

Ms. Sunshine ™

210,998 views • 4 days ago

It’s been one week since the greatest impromptu winners reprise of all time and I haven’t stopped thinking about it since. Every single bit of it. Dara is a superstar, and so are her dancers #Eurovision

It’s been one week since the greatest impromptu winners reprise of all time and I haven’t stopped thinking about it since. Every single bit of it. Dara is a superstar, and so are her dancers #Eurovision

sᴜᴘᴇʀ ᴛᴠ

137,017 views • 3 months ago

I'm so proud of this (wip) code! It's modular in a way I've not done before, making it easier to create different species for the ecosystem and assign them behaviours that interact with one another. Also I have removed p5js and all of this is pure javascript 🪄🎨

I'm so proud of this (wip) code! It's modular in a way I've not done before, making it easier to create different species for the ecosystem and assign them behaviours that interact with one another. Also I have removed p5js and all of this is pure javascript 🪄🎨

Amy Goodchild

30,086 views • 3 years ago

Jarred Vanderbilt: "I think a lot of the stuff we lack, I think I can help provide on that end." (Has there been a direct conversation with the coaching staff about what led to you not being in the rotation?) "Kind of here and there, I guess." (Was it a surprise to be in the rotation at Philly?) "Yeah, it was a surprise." (How are you handling all this?) "Good. Controlling what I can control. Keep showing up to work, doing my part, supporting the team."

Jarred Vanderbilt: "I think a lot of the stuff we lack, I think I can help provide on that end." (Has there been a direct conversation with the coaching staff about what led to you not being in the rotation?) "Kind of here and there, I guess." (Was it a surprise to be in the rotation at Philly?) "Yeah, it was a surprise." (How are you handling all this?) "Good. Controlling what I can control. Keep showing up to work, doing my part, supporting the team."

Khobi Price

196,706 views • 8 months ago

I used to spend hours trying to think of what to post next. Most of the time, I ended up guessing what my audience might like. This time, I tried a different approach. I used atypica.AI to watch real conversations happening on X, see what people were really talking about, and create AI personas that behave like my readers. From all of this, I got a clear 3-month content plan - full of ideas that people are actually interested in, not just random guesses. Planning feels so much easier now because I’m not starting from a blank page. It’s like responding to what people are already thinking, instead of forcing content. Check it out here:

I used to spend hours trying to think of what to post next. Most of the time, I ended up guessing what my audience might like. This time, I tried a different approach. I used atypica.AI to watch real conversations happening on X, see what people were really talking about, and create AI personas that behave like my readers. From all of this, I got a clear 3-month content plan - full of ideas that people are actually interested in, not just random guesses. Planning feels so much easier now because I’m not starting from a blank page. It’s like responding to what people are already thinking, instead of forcing content. Check it out here:

Chidanand Tripathi

42,115 views • 7 months ago

Seungkwan of SEVENTEEN: Since I've been a big fan of that song from the start, I gave out a lot of shout-outs. I used to wander alone listening to Dreamcatcher JUSTICE, BONVOYAGE & Dejavu, thinking "This is K-pop! This is Music!" 👍🙏 🔗

Seungkwan of SEVENTEEN: Since I've been a big fan of that song from the start, I gave out a lot of shout-outs. I used to wander alone listening to Dreamcatcher JUSTICE, BONVOYAGE & Dejavu, thinking "This is K-pop! This is Music!" 👍🙏 🔗

kit 킷 🐺

81,336 views • 1 year ago

Hear what Iranians in Karaj have to say: Man says: "There are 3 banks down there: Refah, Iran Zamin, and Sepah. Right there is an eyewear shop, a supermarket, and a Police center, I’m a shopkeeper from here, the rioters (terrorists) set all of them on fire….! Firefighter: “This is called a riot; this is no longer a protest. What is this situation?!" Man says: “This is nothing but an attempt to create a situation that portrays the system and the government as weak. However, naturally, our people have proven that the path of those creating these riots is separate from the legal and real protests of the people.” Man says: "I’ve been going to this mosque since I was a kid; I grew up here and they came and set it on fire. These are not 'the people'; these are rioters!" A municipal worker says: "I beg you, don't do this. We are human too. I've been here since 5:00 AM and I’d have to work until tomorrow. I’m here day and night. All because of the riots.”

Hear what Iranians in Karaj have to say: Man says: "There are 3 banks down there: Refah, Iran Zamin, and Sepah. Right there is an eyewear shop, a supermarket, and a Police center, I’m a shopkeeper from here, the rioters (terrorists) set all of them on fire….! Firefighter: “This is called a riot; this is no longer a protest. What is this situation?!" Man says: “This is nothing but an attempt to create a situation that portrays the system and the government as weak. However, naturally, our people have proven that the path of those creating these riots is separate from the legal and real protests of the people.” Man says: "I’ve been going to this mosque since I was a kid; I grew up here and they came and set it on fire. These are not 'the people'; these are rioters!" A municipal worker says: "I beg you, don't do this. We are human too. I've been here since 5:00 AM and I’d have to work until tomorrow. I’m here day and night. All because of the riots.”

Arya - آریا

54,641 views • 7 months ago

out of left field for my posts but I know I have a big reach here and this could be to someone with information since a lot of my followers are from Scotland like me - a lassie, I went to school with back in the day, alana, has went missing and hasn’t been seen since Friday, she was last seen in the city centre around 7pm. If you’re Glasgow/UK based please give this a share for me

out of left field for my posts but I know I have a big reach here and this could be to someone with information since a lot of my followers are from Scotland like me - a lassie, I went to school with back in the day, alana, has went missing and hasn’t been seen since Friday, she was last seen in the city centre around 7pm. If you’re Glasgow/UK based please give this a share for me

ﾟ✧ﾟ mothemi ﾟ✧ﾟ

42,388 views • 1 month ago

- #FLASHBACK I ran across the first video I ever posted to social media. This video, in all its forms, across all platforms, has been a seen, shared, downloaded and liked over 3 BILLION TIMES since I posted it. This is a duet from TikTok of the original video. -

- #FLASHBACK I ran across the first video I ever posted to social media. This video, in all its forms, across all platforms, has been a seen, shared, downloaded and liked over 3 BILLION TIMES since I posted it. This is a duet from TikTok of the original video. -

Tim Cramer

17,585 views • 6 months ago