Видео

Hi! Thanks for the tutorial but I'm having some issues when it comes to upload images on the web editor. I think it's not working propertly uploading documents :S

How do you achieve the gradient they have on Lusion using an SVG? Great video!

What about multi-panel resizing (3 or more)

Thank you!

Such an underated channel you deserve way more subscribers, I will always love the way you explain these complex matter into easy to understand concepts. keep doing what ur doing its awesome!

I wish you would’ve shown if it was responsive...

i tried, this i works, love it, but how to make it smoot, the video playing is kind of choppy :(

Thank you very much

Very helpful video. Thanks a lot

learned a lot from this tutorial, thank you!

Very nice. Thanks

hey so i have an issue when there is a border-radius applied on the shapes. They appear huge on the site. Do you know any fix for this?

Thank you so much, I really enjoyed this tutorial. But I have a problem and that is when I scroll to the bottom of the page , when the line finishes drawing itself, it disappears. When I scroll a little up, it is again there, scrolling itself backways as it should. but i don't want it to disappear from my view. How to fix this?

Great video! How would you go about having the animation "bounce" the end of the stroke when the user stops scrolling?

cube🧊

cube!

Your portfolio is really amazing. Can you make a video on how you made it . Pls much requested

thanks been scratching my head for hours to implement a design 🥴🥴

Thank you so much!!! This help a lot

i dont think they did it with svg on their website

Nice video, however it does not look good on mobile viewport

Thank you so much, that was exactly what I needed!

you are an excellent teacher and clearly a very smart man as you distill things in a way that is easily accessible. Thank you!

This was awesome - thank you! I had a lot of fun repurposing this for a remix app!

This is amazing, exactly what I was trying to learn to do, really good explanations too, will subscribe

Thank you so so so so so so so so so so so so so so so much!!!!

Super helpful video, thanks!

this is amazing, there are not alot of videos on youtube that covers creative coding ideas as like urs so thank you sm for this!! can i ask if i wanted to replace the panels by purely images in divs that can be draggable, resize and stackable, is it possible to approach this idea in reference to your video? thanks in advance:)

Can this be replicated into wix studio? I’ve been trying to figure this out forever! Any help is greatly appreciated and compensated if needed.

Thank you so much! Simple but powerful JS and CSS techniques

I love your videos. Do you mind sharing the tool/tools you use to record your screen for the video?

@SuperHi I tried that and it did make it endless, but between each repeating section, there was an ugly space between them. How do you fix it?

thank you man

Can I have a look at the source code in the instructional video? Thank you very much

How to make the video smmoth like apple

This is awesome mate! Simple JS but works great. Thanks so much.

im trying to put a shine effect on top of it when we hove on the image. doesn't work. Any thoughts?

Tutorials that never disappoint! What if I was building in Webflow and using a CMS collection and want to randomise the clipping paths on all the collection items?

Wait, why’re the views on this so low?

This channel is like a goldmine to me. I've seen so many cool web design effects on the internet. Have no idea how to implement them and I don't even know what to search to find tutorials about them. This channel is full of those cool effects I have been wanting to try.

Can you please keep teaching these cool, creative effects/designs?

This channel has some of my favorite tutorials

Thank you so so so so so so so so so so so so so so so much!

Great intro, thank you!

Thanks really amazing

Thank you so much !

Brilliant vid!

You are my hero!

// Select all elements with class 'pane' const panes = document.querySelectorAll('.pane') // Initialize z-index counter let z = 1 // Iterate over each pane panes.forEach((pane) => { // Find elements within the pane const title = pane.querySelector('.title') const corner = pane.querySelector('.corner') // Event listener for mouse down on the pane pane.addEventListener('mousedown', () => { // Increment z-index counter and update style z = z + 1 pane.style.zIndex = z }) // Event listener for mouse down on the title element within the pane title.addEventListener('mousedown', (event) => { // Add class to indicate dragging state pane.classList.add('is-dragging') // Get initial position of the pane let l = pane.offsetLeft let t = pane.offsetTop // Get initial position of the mouse let startX = event.pageX let startY = event.pageY // Function to handle dragging const drag = (event) => { event.preventDefault() // Calculate new position of the pane based on mouse movement pane.style.left = l + (event.pageX - startX) + 'px' pane.style.top = t + (event.pageY - startY) + 'px' } // Function to handle mouse up event const mouseup = () => { // Remove dragging class pane.classList.remove('is-dragging') // Remove event listeners for dragging document.removeEventListener('mousemove', drag) document.removeEventListener('mouseup', mouseup) } // Add event listeners for mouse move and mouse up document.addEventListener('mousemove', drag) document.addEventListener('mouseup', mouseup) }) // Event listener for mouse down on the corner element within the pane corner.addEventListener('mousedown', (event) => { // Get initial size of the pane let w = pane.clientWidth let h = pane.clientHeight // Get initial position of the mouse let startX = event.pageX let startY = event.pageY // Function to handle resizing const drag = (event) => { event.preventDefault() // Calculate new size of the pane based on mouse movement pane.style.width = w + (event.pageX - startX) + 'px' pane.style.height = h + (event.pageY - startY) + 'px' } // Function to handle mouse up event const mouseup = () => { // Remove event listeners for resizing document.removeEventListener('mousemove', drag) document.removeEventListener('mouseup', mouseup) } // Add event listeners for mouse move and mouse up document.addEventListener('mousemove', drag) document.addEventListener('mouseup', mouseup) }) })

Very helpful and great teacher. I wish you had more like this!