Bobby van der Sluis

[jhey ʕ•ᴥ•ʔ @jh3yy]

Future CSS Tip! 🔮

You can create this scrolling image pop-out effect with CSS scroll-driven animations and zero JS! 🔥

.pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}

The "trick" is to layer up two image elements and keep one clipped by the container 🤙

Slide them both together and it will look like one pops out of the container 🎈 You can leverage scoped custom properties to translate by different distances too! 😎

You can use macOS's built-in image background removal tool to get the pop-out image ✨ And for added effect, you can animate the brightness on that to make it stand out ⭐️

@CodePen link below! 👇

[Bobby van der Sluis @bsluis]

The Road to Front-end Mastery

Slides of my Frontmania talk:

https://t.co/ddreTCUKMa

#frontmania #frontend #mastery

[Adam Argyle @argyleink]

"Tinkerer by Night" from Sanne 't Hooft at #CSSDay had me at the edge of my seat and completely mesmerized! So inspiring!

Check out all the demo's for yourself (Chrome only mostly) here at their rad site!

https://t.co/ImxrPS7rnJ

[Bobby van der Sluis @bsluis]

I thoroughly enjoyed being at #cssday during the past days: great presentations in a single track format and just by being surrounded by lots of smart, fun and creative people who really love the web platform itself

[Lucasfilm Games @LucasfilmGames]

Introducing Return to Monkey Island, a new game by Ron Gilbert coming in 2022. https://t.co/6ys3jdcWGU

[Handmade @handmadeam]

Handmade Amsterdam is looking for a Lead Interaction Design. A hands-on master in digital with a thorough understanding of physical product design. Are you ready to do work you've never done before? Apply or share!

https://t.co/dfop9OFSRg

#jobs #lead #interaction #design

[Mark Hamill @MarkHamill]

Question: "Is #StarWars for females, too?"
Answer: THIS:

[Derek Yu @mossmouth]

We made great progress on #UFO50 this year! Can't wait to let everyone play these classic titles from an alternate dimension... thanks for your support and see you in 2019!

https://t.co/DnGQLDu9wB #pixelart #gamedev

[PixelArtM ([email protected]) @PixelArtM]

Merry Christmas
Feliz Navidad
#pixelart

[Manoela Ilic @crnacura]

An exploration of an interactive #threejs landscape by @ma77os https://t.co/kOWKqYuoKs #webgl #demo #webdev #animation #javascript

[Kyle O'Brien (Kai) @kyle_o]

Some food for thought from @adactio and others regarding Microsoft's switch to Chromium's engine https://t.co/QySsQni26O

[Manoela Ilic @crnacura]

A collection of our most loved websites from 2018 https://t.co/kxgrHyEBd1 #inspiration #webdesign #webdev #ui

[Benjamin Groessing @begroe]

Today I'm launching https://t.co/PX30RBnfSm – a tool to automatically remove the background of any image (with a person in it) 🚀Built with python, ruby & deep learning with @davidfankhauser - AMA

[Jean-Baptiste Lefevre @jblefevre60]

The University of Washington is developing #bionic Contact Lenses
#Wearables MT @joao_b

@evankirstel @SpirosMargaris @mclynd @diioannid @ipfconline1 @JacBurns_Comext @LouisSerge @jerome_joffre @HaroldSinnott @kalydeoo @ahier @Ym78200 @Paula_Piccard @rajat_shrimal

[Handmade @handmadeam]

What if there is a platform that captures all audio playback, everywhere?
One that keeps record of the metadata of all individual audio items being played, including geolocation details and a timestamp.
Sounds creepy? Well, just hear us out:
https://t.co/am5CBw5xXy

[Handmade @handmadeam]

We developed a method to tie every aspect of the product and system together within the first weeks of a project.
We call this Rudy: A rudimentary prototype.
Tonight Michiel will show how Rudy allows us to build complex prototypes in a few weeks at:
https://t.co/kBZKbou4bL …

[Handmade @handmadeam]

Remember sharing homemade mixtapes with your friends?
Bobby does.
We've come a long way since then.
We brainstormed about the future of audio and tied local audio discovery and audio sharing together into a new audio platform: Soundspheres.
https://t.co/am5CBw5xXy

[zep.p8 🦣 @lexaloffle]

Drawing #voxels to an external display, and only have the terminal available to debug..

--> ascii #voxatron

#screenshotsaturday

[De Avondshow met Arjen Lubach @deavondshowvpro]

Het is tijd om te stoppen met Facebook: https://t.co/yaWWJBnsZj #ZondagMetLubach #DeleteFacebook

[David Rousset @davrous]

#OpenCV.js & #WebAssembly, great resources to read:
- Computer Vision for the Masses by @IntelSoftware: https://t.co/1uaQwBmgc3
- https://t.co/HpQ6RWqMjd by @mozhacks
- #WASM vs ASM.js vs JS demo: https://t.co/NUfO24tT5p