- 121
- 313 954
SuperHi
United States
เข้าร่วมเมื่อ 5 ธ.ค. 2019
SuperHi is a creative education school for you to learn how to make the things you wanna make. We make courses in design, coding and digital project management skills and teach to people in over 85 countries worldwide!
Weather-aware websites: How to add weather data and styling to a website using Javascript
In this tutorial, Rik will show you how to integrate the Open Meteo API feed into your very own website so you can add your own weather data and theme!
00:00 Intro
00:26 HTML and CSS
01:41 How does the Open Meteo API work?
03:45 Showing the temperature
10:57 Showing the current weather
16:28 Updating style based on weather
20:32 Outro
Links:
open-meteo.com/
Demo:
superhi-videos.s3.amazonaws.com/tutorials/blueprint-weather/index.html
Download:
superhi-videos.s3.amazonaws.com/tutorials/blueprint-weather.zip
You can follow Rik and SuperHi at:
riklomas
superhi_
hisuperhi
riklomas
www.superhi.com
00:00 Intro
00:26 HTML and CSS
01:41 How does the Open Meteo API work?
03:45 Showing the temperature
10:57 Showing the current weather
16:28 Updating style based on weather
20:32 Outro
Links:
open-meteo.com/
Demo:
superhi-videos.s3.amazonaws.com/tutorials/blueprint-weather/index.html
Download:
superhi-videos.s3.amazonaws.com/tutorials/blueprint-weather.zip
You can follow Rik and SuperHi at:
riklomas
superhi_
hisuperhi
riklomas
www.superhi.com
มุมมอง: 1 953
วีดีโอ
The modern way to add animation on scroll with Javascript and CSS
มุมมอง 8Kปีที่แล้ว
In this tutorial we talk about how to use the modern IntersectionObserver object in Javascript to implement animation on scroll whenever tags are in view. 00:00 Intro 00:43 Intersection Observer 10:58 Adding CSS 17:23 Optional animation 18:46 Outro Demo: superhi-videos.s3.amazonaws.com/tutorials/animate-on-scroll/index.html Download: superhi-videos.s3.amazonaws.com/tutorials/animate-on-scroll.z...
Create a pro-level 3D site, using Three.js, Motion One + GLSL shaders, with an award-winning coder.
มุมมอง 4.8Kปีที่แล้ว
In this project, award winning coder and founder of SuperHi, Rik Lomas, will show you how to create your very own professional-level 3d website using tools such as Three.js, Motion One, GLSL shaders, Vite build system, HTML and CSS, and more! Inspired by the award-winning Office for Future Furnishing site, Normal Sneakers is using several cutting edge techniques to achieve an effective 3d web e...
How Apple do scroll-based video scrubbing using CSS and Javascript
มุมมอง 10Kปีที่แล้ว
How do Apple make their landing pages look like they're videos that play as you scroll? Well, that's because that's exactly what they are! In this tutorial, Rik will show you how to add in video scrubbing based on your users' scroll position! 00:00 Intro 00:50 HTML and CSS 06:40 Javascript 16:43 Outro Links: www.apple.com/macbook-air-13-and-15-m2/ Demo: superhi-videos.s3.amazonaws.com/tutorials...
Scroll animations! How to add a flowing path like the Lusion site with SVG and Javascript
มุมมอง 11Kปีที่แล้ว
As seen on the new Lusion site, scroll animations such as a path that grows as you scroll down a path are effective web design techniques. In this tutorial, Rik shows you how to add your own SVG paths that fill in as you scroll! 00:00 Intro 00:50 HTML and CSS 04:28 Image to SVG 07:06 Javascript 20:11 Outro Reminder that if you're wanting a more structured approach to learning creative skills, c...
How to make a springy font weight effect with Javascript and variable typefaces
มุมมอง 1.6Kปีที่แล้ว
Is it springy font weight? Magnetic type? Or something else completely... any way you call it, it's a great typographic effect that you can add with a little bit of Javascript and a variable font! Even if you don't particularly like this effect, seeing how it's made will let you know how other similar effects using mouse movement are created. 00:00 Intro 00:46 Let's code 21:41 Outro Links: twit...
How the best sites are made: The Studio's award-winning wonky grid slideshow
มุมมอง 2.1Kปีที่แล้ว
Sometimes even the best sites can bamboozle the professionals. In this tutorial, we'll explain how The Studio built their award-winning 'wonky' grid slideshow. It's a fantastic effect and while it seems like it could be days of work, it's actually more straight forward than you may imagine! Rik explains how to do it! 00:00 Intro 00:48 HTML CSS structure 05:54 Setting up a slideshow 13:25 Fading...
How to add complex image masking to website images with CSS clip-path and Figma
มุมมอง 7Kปีที่แล้ว
You may have seen image masks on sites like Abbotsford Convent or Creative Lives in Progress - of course you can prepare images manually but why not make it easy and flexible by letting CSS do the work! In this tutorial, Rik will show you how to add both simple and complex image masking by taking a Figma prepared SVG and implementing with CSS clip-path. 00:00 Intro 00:33 Basic mask shapes 03:26...
How to add endless scroll to a website using Javascript
มุมมอง 2.1Kปีที่แล้ว
A modern web design technique involves creating a website with the illusion of endless scrolling, making it seem as if the page never ends. This engaging feature requires only a few lines of Javascript to implement. Rik is here to guide you through the process! 00:00 Intro 00:56 Cloning with Javascript 04:29 Scroll direction 11:15 CSS improvements 12:34 Outro Links: photographs.pm/ juliavolkmar...
How a top fashion site was made: Nolook Inc's mouse follow effect with CSS and Javascript
มุมมอง 1.9Kปีที่แล้ว
In this tutorial, we discuss the top Japanese fashion brand, Nolook Inc., and explore how the effect on the homepage is created. There are several components that contribute to the impressive mouse-follow effect, which gives the page a dynamic presence. We'll break it down step by step, from understanding the HTML structure to examining how individual 'tween' states lend a more natural feel. 00...
How award-winning sites are made: the Sticky Split Layout, as seen on Useful Books and SuperHi Plus
มุมมอง 2.1Kปีที่แล้ว
We'll demonstrate how to create the sticky split layout, a feature seen on many popular websites. This layout allows one side of a webpage to track alongside the other as you scroll. Achieving this requires just a touch of CSS! Rik is here to show you how to do it. 00:00 Hello! 01:11 How to code 05:21 Outro Demo: superhi-videos.s3.amazonaws.com/tutorials/useful-books/index.html Links: www.usefu...
How award-winning sites are made: Midnight's mouse trail effect
มุมมอง 5Kปีที่แล้ว
The Midnight site has been featured on some of the best web design galleries such as SiteInspire and one of the lovely features on it is the long mouse trail effect. In this video, we talk about how that effect was made! Check out the Midnight site over at midnight.agency/ 👉 One thing I missed in the vid! Add pointer-events: none; to the svg's CSS so that you can click through it! Demo: superhi...
How award-winning sites are made: Torque Editions panning layout
มุมมอง 1.7Kปีที่แล้ว
Award-winning site Torque Editions has a beautiful design that includes some intricate techniques that build up to make a panning, map-style layout. In this tutorial, we cover how a site like this actually work and build our own version of it. Check out their site over at torquetorque.net/ Torque Editions was designed and coded by Jake Dow-Smith Studio - jakedowsmith.com/ 00:00 Intro 00:24 Pann...
Five CSS @media queries you might not know, that will improve your users' lives
มุมมอง 497ปีที่แล้ว
You may have heard of @media queries in CSS for changing the layout when on mobile, but did you know there's more than just that? In this video, we'll talk about five different media queries that you may not have heard about which are great for accessibility and user experience. Demo: superhi-videos.s3.amazonaws.com/tutorials/mq/index.html Download: superhi-videos.s3.amazonaws.com/tutorials/mq....
How to create a resizable column layout with Javascript
มุมมอง 1.5Kปีที่แล้ว
A commenter asked how the resizable layout on the Kong&Ha site worked - you ask and you shall receive! In this tutorial, we show you how to make a custom resizable layout with Javascript. 00:00 Intro 00:40 Let's code Links: www.duokongha.com/projects_kongha-en/project-duo-kong-ha-01 Images by: unsplash.com/@dentrushtin unsplash.com/@jeremyliew Demo: superhi-videos.s3.amazonaws.com/tutorials/res...
How to improve your web typography with just a few lines of CSS
มุมมอง 902ปีที่แล้ว
How to improve your web typography with just a few lines of CSS
Typescript 101 - Learn to transition from Javascript in just 20 minutes
มุมมอง 1.3Kปีที่แล้ว
Typescript 101 - Learn to transition from Javascript in just 20 minutes
Dynamic Color Slider: Create a website that adjusts its theme in real-time with CSS and Javascript
มุมมอง 1.6Kปีที่แล้ว
Dynamic Color Slider: Create a website that adjusts its theme in real-time with CSS and Javascript
How to add dark mode to your website with CSS variables
มุมมอง 1.4Kปีที่แล้ว
How to add dark mode to your website with CSS variables
How to add a frosted glass effect to your website
มุมมอง 3Kปีที่แล้ว
How to add a frosted glass effect to your website
Draggable, resizable + stackable panels using Javascript
มุมมอง 3.2Kปีที่แล้ว
Draggable, resizable stackable panels using Javascript
What's the difference between a typeface and a font
มุมมอง 9K2 ปีที่แล้ว
What's the difference between a typeface and a font
Scaling fonts for different screen sizes
มุมมอง 3K2 ปีที่แล้ว
Scaling fonts for different screen sizes
How to make fonts work for different languages
มุมมอง 10K2 ปีที่แล้ว
How to make fonts work for different languages
Adding web fonts to your site with Google Fonts
มุมมอง 22K2 ปีที่แล้ว
Adding web fonts to your site with Google Fonts
Anyway to add this effect to youtube header?
A great tutorial, thank you! And of course: "Cube!" :)
Really great. Easy to follow. Works like a charm... but what if you wanted more than one video like this on a page?
What about responsiveness? If you have content on the page and resize the window the SVG resizes, but not the content. You end up with the path moving over important content.
I discovered your videos today! They are amazing!!!
How would you do this using the intersectionObserver API instead of scroll?
Thank you! This was super helpful!!!!
Thanks for the video, would love to know what font is it at the beginning of the video, thx!!
where to download superhi editor
Thanks so much! Had been procrastinating adding on-scroll animations to my html/css website because I thought it would take longer to learn, but you made this sooo simple for me to learn and implement! ty ty
how to create that slider
got it input type="range" css input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient( needed colors ); }
How can we add a toggle button for users to switch between light and dark modes manually, instead of relying on their system preferences?
What are the reasons that you use <a> tag for the handle?
Cna anyone work on the section look like video effect section in lusion website?
This was fantastic thanks!
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
And also window.pageYOffset it's deprecated now :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
same question
Scrool smoothing
how @@ArturKolejwa_ardi