This content is a tutorial demonstrating how to build a visually engaging website with animated scrolling effects and interactive elements using AI tools. It guides users through generating custom animations and integrating them into a website framework.
Key Points
Mind Map
انقر للتوسيع
انقر لاستعراض خريطة الذهن التفاعلية الكاملة
In this video, you're going to learn how
you can build website like this web
scrolling animation with this beautiful
interactive elements with the background
that is moving and also this beautiful
animation the text. So, you're going to
learn how to create all of this and I'm
going to share the prompt with you that
you can build as you can see it right
here. I've got a document that you can
copy for the animation. And I'm also
going to show you how you can create
this animated video in the background.
So, we're going to first generate an
image and then I'm going to show you how
to create a video and upload it to the
website and work it make it work
seamlessly as this. And spoiler alert,
this is just a simple prompt that I'm
going to share with you as well. So,
let's start with generating an image and
for that you're going to go to the
website called Freepik. There is a lot
of images here. So, you're going to just
find something that you like, type AI
and whatever you need. So, if you need
something related cosmos, you can just
type AI cosmos and you'll have a lot of
beautiful AI images that look very cool.
Just spend a little time searching for
it, then just download it. I already
found my image, so which is
uh this one. I think this looks pretty
cool. Now, let's create an animation for
it. So, we're going to be using Kling to
create animations and Kling allows you
to build beautiful animations just like
this. So, as you can see all of these
were built by Kling. Don't look at this
website. This is uh Hexland uh Hexfield.
I don't really like this website. So,
just go directly to Kling 3.0 and you
can build this cool animations that you
can see on this website. And by the way,
all of these animations that I'm
creating, I'm also uploading to motionsize.ai/backgrounds.
motionsize.ai/backgrounds.
You can get them here. Just copy URL and
paste it into your favorite projects.
But let's get back into our creative
process. So, yeah. We're going to first
uh make a video and for that I'm going
to click here on
Kling 3.0
and I'm just going to create say animate
this because the prompt doesn't really
matter. What matters is actual image.
So, let's just upload our image here
Uh let's
We need to decrease the size first. But
first, let's actually create an end and
start frame. So, for this I'm going to
just reference this and I'm going to say
create an image exactly like this, but
So, this way we can I'm just going to
choose another banana too. So, this way
we can actually create a start frame and
an end frame. So, then we can animate it
and make it look really really cool. So,
this will going to be the end frame. I'm
going to download this.
And let's wait and see how is the front
uh frame would look like.
So, this is the result that we've got.
Not the best one. I wanted it to close
the front door. I could have retry, but
since we're doing just for the demo, I'm
going to download this. And I'm also
going to drag it into Figma so I can
decrease the size because currently the
size is too big for Kling. So, I'm going
to show you how to quickly reduce the
size of the video of the image to Figma
and then just decrease the size but move
it by moving it like this. You can use
any other editor, but I'm going to use
Figma. And here I'm just going to
decrease the size. So, this will going
to be the first frame and then this will
going to be the second frame. Let's
export both of these images. I'm going
to name it just one and two so I know.
And now I can go back to Kling AI and
just upload these two images here. So,
we have the first frame which is this
this
and the second frame which is
not this.
This one.
So, for the prompt we can say something
like animate this, make it zoom in
slowly with some depth and also let's
have the front the door opening once
it's scrolls through the
And let's just create it for a few
seconds. Let's make it around 6 seconds
and click go. So, let's wait and see
what it comes back with.
And here we have our generated video. It
is not perfect. You would need to
specify to not add any new design
elements to it. You would try a few
different options, but this is one way
you can generate. So, now the most
important part, you would need to turn
this video into a JPEG sequence for it
to work perfectly as a
as a animation. This is an optional
step, but it would make it work a little
bit better.
So, what you can do, you can just drag
the video that you've found or that you
generated into this website which is
video to JPEG and then you would upload
it and wait a little bit for it to
upload on this end.
So, here we have our video. Just select
the start frame which is zero and the
end frame which is
the end of your video. For the size,
keep it original and for the frame rate,
choose maximum 30 FPS and then just
click convert it JP uh JPEG.
And here you have your images which mine
aren't loading properly cuz the video
internet connection. But once that done,
you just click download frames as a zip file.
Now, we have our zip file with all of
the images here. Don't worry, we don't
need to
the website will name the them
automatically and AI will figure out.
Now, let's build a website. So, we're
going to do it pretty fast with AI
website. We're going to be using
Antigravity as well as AI studio. So,
Google AI studio. This will be our
beginning point to build our website and
then we'll move everything to
Antigravity. So, for this one we're
going to just going to build a simple
hero section and for the hero section
I'm going to go to the website called
uh motionsize.ai.
I'm just going to select this one. We
don't really need the video since we're
going to be animating our own video with
the scrolling effect, but I just want to
paste this here and I'm going to also specify
specify
using this prompt build me a hero
section, but do not include video
background because we're going to have
I can actually get rid of video
background and let's send it.
Keep the background black pure
black. And let's just send it and see
So, all that I want is to have our fonts
and the liquid glass which is exactly
what we've got. Now, if you uh you want
to build the rest of the website, I
would suggest using AI studio. This is
much simpler and faster, but I'm just
going to download the whole code and
start building it in um
um
What is it called? Antigravity because
I'm going to add the videos and the
sequences. So, let's do that.
To download the code, all you have to do
is just click on the
code icon here that we have and then
just click download the zip. Now, we're
just going to go and unzip it
and drag it into our Antigravity. So,
let's just close everything, create a
new file in Antigravity. So, just open a
folder and let's just drag it here and
Yes, I trust everything.
So, the first thing we have to do is add it
it
add this to a local host.
So, for that for us to be able to
open it and preview it the website from
our computer. Let's wait and see what it
comes back with. So, once that done,
Antigravity will give you the link and
you will see your updates here. So, the
next part is the prompt. This is the
most important part of this video. So,
we're just going to copy this prompt and
we're going to send this to the AI. And
I'm going also going to say so I created
a folder called frames and I updated
And as you remember, we created a
big list of a lot of frames. Now, we can
and I'm just going to name this to frames.
frames.
And let's just copy this into our
Antigravity folder. So, we have this
on our website. So, I assume this is
And
let's just send that
And here we have the result that AI
provided us. It did everything from that
single prompt. It created this animated
section. Of course, there's a lot of
things to improved. For example, I mean
I like this button, but otherwise I just
want to show you on an example. So,
let's take a screenshot of this and
let's move it to Figma just so you
understand it easily. So, now the text
is not really readable. So, I want to
just to have like an overlay on top of
it from the button and paste the text
on the button here. So, we're going to
remove that.
And that's what I'm going to ask the AI
to do. So, I'm going to go to
Antigravity. I'm going to click accept
Let's move it here. Go into gravity.
In the hero section, I want it I'm going
to actually see that. Yeah. So,
So, in the hero section, the headline I
wanted with the description, I wanted to
be aligned to the bottom of the page.
And instead of making the whole design
darker, remove the overlay from our
video, just add an overlay from the
bottom of the page in the hero section.
The second section should have a liquid
glass background and the text should be
positioned on it. So, that's will give
So, it did a little bit, not the way
that I wanted, but it's pretty close. We
have here the section, then we can
scroll down. I can see that it added
this liquid glass that we had in our prompt.
prompt.
Then we can see the
phases, the door opening, and we can see
the end of our website.
There's two way how we can improve it.
So, the first one, um
um
I'm going to say, "Make all of the text
white." So, let's do it. Let's go to
enter gravity. I'm going to say, "Make
all of the text white." Do not have text
with the opacity on the page because
And the next part I'm going to say,
in the last section, which is CTA, where
we have the form, the form is barely
visible. Make the inputs a little bit
more darker. Also,
Also,
after the input, I should not be able to
scroll more. So, the form should be the
last section. The the the the frame
scroll, the animation that we have
and see what it comes back with. And
this is what our AI did. So, let's
scroll through, and as you can see, we have
have
beautiful animation, and um yeah.
To achieve this result with these fonts
and stuff like that,
because it's all have to be imported, go
to Motion Sites and you can get the
prompt right here that would include all
of the files, all of the fonts, and this
video with the background. And thank you
for watching. I hope you've learned a
thing or two from this video, and I'll
see you in the next one.
I had a lot of fun making this website.
This was my favorite part of the actual
AI building is how simple it is to
actually create something like this. Of
course, it looks different from what
what we built today in our video because
all of the fonts to import would take me
a little bit of time. But yeah, I
believe that this anyone can build now
sites like these with AI, and it is very
achievable. So, if you spend a little
bit more time to learn this, and if you
apply it, you can find a lot of clients
which will pay you hundred and thousands
of dollars for creating stuff like this
with AI. So, if you watched until this
moment, thank you for your support, and
انقر على أي نص أو طابع زمني للانتقال إلى تلك اللحظة في الفيديو
مشاركة:
معظم النصوص تصبح جاهزة في أقل من 5 ثوانٍ
نسخ بنقرة واحدة125+ لغةالبحث في المحتوىالانتقال إلى الطوابع الزمنية
الصق رابط YouTube
أدخل رابط أي فيديو YouTube للحصول على نصه الكامل
نموذج استخراج النص
معظم النصوص تصبح جاهزة في أقل من 5 ثوانٍ
احصل على إضافة Chrome
احصل على النصوص فوراً دون مغادرة YouTube. ثبّت إضافة Chrome للوصول بنقرة واحدة إلى نص أي فيديو مباشرةً من صفحة المشاهدة.
