Transcripts
1. Welcome to the Class!: Hi, my name is Patti and
welcome to my Skillshare class. I am a digital marketing
specialists and have worked in industry for
a number of years now, helping small and big firms create the websites
and advising them on best practices for giving that uses the best
navigational journey. In this class, we're gonna
focus on using animations and scrolling effects in
the platform Editor X. This is an intuitive, very well-designed platform
to helping uses like yourselves build websites
in a very easy to use way. This particular website
you see in front of you is an example that
we're going to use, which was in my first
edit race class. So if you haven't registered
or join that one, I urge you to do so
that you can follow me as we go through this
particular class. This class we're
going to look at using parallax, reveal features, different animation
techniques and where to place
them and how to do that using the intuitive system that wits has published,
which is Editor X. What you waiting for. I really hope you join me on this class and I look
forward to seeing you there. And as always, if there are any questions,
once you have joined, feel free to put them in the discussion area and I'll
be sure to get back to you.
2. How to make a website more immersive: So when it comes to making
an immersive website, one of the key
attractions to the viewer or the user is how
immersive the website is. Does it allow the user
to feel transported to the product or the service
that you are offering. And one of the ways that we can often make the website look more immersive is by including
lots of imagery, videos, adding effects, animations, scrolling animations
to the website which really help amplify
that experience for the user.
3. Starting with the Hero Landing Image: So what we're gonna do is pick
up from where we left off. So if you haven't
already watched my first-class on creating this nature tourists
company website. I suggest you start there
and then join us here where we're going
to be a bit more advanced and add some
nice animations, scrolling effects, which really make the website
pop and stand out.
4. Reasons for Effects and Animations: You can always think of this class as being a add-on
for the previous one, where we're going to change
the configuration of the images and texts we have here to try and make
it more immersive, utilizing the advanced
features that Editor X has to try and make the experience
more immersive. One of the first things
we're going to do is look at making
this hero image, which is the landing
page image more immersive and have some
parallax scrolling. Parallax scrolling essentially
means that this container, which has the picture
in it becomes a window and the image
is placed behind that. So when you scroll, you can make the
image move up and down in relation to the
mouse scrolling movement.
5. Adding Effects and Animations: One of the obvious things we
can do is when we click on this image area and make
sure images selected, we can go into the
animation tab. Now this animation tab will have several animations
to choose from. And if you hover over each one, you will see how it gives a nice preview of what
it could look like. Now, this is obviously
very basic animations and they can serve a
purpose on the website. But I don't feel like as
a landing hero image, they make the most sense. One of the things
we're going to do is open up the inspector column and we can head on
over to some of the properties on
the right here. Now, first of all,
we want to make sure that the image itself is fluid and it is within this container,
which obviously is. And you can tell that by looking at the blue box underneath the Quick Settings menu where
it says section and image. That means the image is
placed within this container. On the right-hand side here, you will see different
options we have. We may want to
choose the capacity to make that come
down a little bit. That'll be helpful in making the title of the
website more prominent. You may want to
choose a background, so background will
be an overlay. But we want to do is
I mentioned before is add some scrolling
effects to this main image. To do that, we go in settings. Such things will
open a pop-up box. We can move this
around if you like. Here you have the option to
adjust the image settings, such as the gradient, the hue, the brightness,
contrast, etc. But we also have the option
here to have scroll behavior. Now screw up behavior is what
we're going to focus on. Here you have two options, your parallax and
you have reveal. If we click on parallax, you will see how the image now has a different perspective. That's because Wix automatically understands how big the image is and the amount of
movement that can happen across the image
while keeping at resolution. Now we've clicked parallax. Let's click on preview and
see what that looks like. Now if I scroll down, you will see how
the image almost slowly moves behind the
text while you scroll down. This makes a really cool immersive experience
for the user. And it almost makes
it a 3D effect. Now, I really like this. And one of the things we
can do is I know before we mentioned about
having animations which can look a bit boring. We're going to add a fade in. So if we click on fade-in and we're going to customize it. Now we want it to be
really quick and snappy. So rather than it
being 1.2 seconds, Let's put this down to
about Five of a second. We can also choose
to have a delay, but we're gonna
keep that as it is because we want it
to load instantly. Now let's test it out. See that very quick
animation at the style. That's exactly what we're after. That's just one example
of using parallax. The other example we have
is the reveal feature. Now, I personally really
liked the reveal feature because it allows you to have an image almost
looks static, especially if there are different overlays that you want to put on top
of that image. So let's make a new section and have an example and
see what that looks like. If we come down here and
open up a new section. So let's add a new section,
blank section here. And we're going to sort of
add in a few elements here. We can quickly come to
the composition tool. This gives us some nice presets. We can always use one of those, or we can just go to a quick add and import our own
things in there. First things first, let's add in a layout which is a grid. So this helps us
compartmentalize section. So again, I covered all of
this in my previous video. So make sure you go back
there if you want to learn more about how all of
these functions work, I'll put a link In
the description of this class if you
want to go that we're gonna put in a grid. So let's put in a grid
here and stretch this is that it covers the
entire section area. Now on one side we're
going to have text on the other side we're
going to have an image. Now, you can use reveal functions as a way
of telling a story. So for example, if we wanted to reuse one of these
images from down here. So for example, we could
use the United Kingdom. What we're gonna
do is tell a story about the United Kingdom. So maybe we want to maintain mentioned the
countries or sorry, the cities or counties or different points of interests of tourists in the
United Kingdom. That will be a, a story to tell. On the left-hand side, we're
going to add in some text. We can do that directly here. Or if you have any assets
that you have preloaded, you can bring them in from the assets saved
assets folder here. For this, we're just going
to bring in a header. So let's drag and drop this in here and make sure
this is centered. You can do that using
the Quick Settings here. So make sure it's in the center. And right in the
middle. There we go. Let's call this united Kingdom. And that text is quite big. So let's put this down to 70. And stretch it out as well
so that it goes on one line. And then make sure again
it's centered nicely. That's one. We can choose
the background so we can obviously make
this any color we want. Bearing in mind. We're going to have a picture
on the right-hand side, so it will cover wherever
background we choose. We can choose for now just a
nice blank white background. And on the right-hand side, now we're going to
include some pitches. If we head over to
the Media section, we'll have some examples
of images we already have. So let's go here. And obviously these
images to reflect London. But with Wix, if you do have the ability to search
for any sort of images. So if we just type
in United Kingdom, nothing comes up
that learn to hold. Let's try Unsplash. Here we go. Let's use some
of these guys images. Unsplash or free high
resolution images that you can use on your website
for relatively, Let's use this image here. So let's add this two page and then bring this to
the right-hand side. And you'll see this box appear. This means we're going to
attach it to this section. If we click here and stretch, that will now fill the
right-hand side of the area. Cool, that looks quite nice. But what we said we wanted
to do was tell a story. What we're gonna do
now is we're going to copy and paste
this grid section. It's just a copy and paste. So that is a control
C and V on Windows, or Command C and V on Mac. What we've got here is now two of the same exact sections. What we'll do here
is maybe mentioned London as our first location. Put this up higher little bit and we're going to
add some more text. This can just be
some paragraph text. Now this can be anything. I'm not gonna go too
crazy in this tutorial, but obviously you can choose
what you want to include. So small wires. Again, just an example. London is the capital of
the UK housing some of the country's most
unique architecture and historical sites. Now, what we can do is set some animation for this section. So right-click here
and we're gonna go on to the settings and we're
going to choose Reveal. Now it's important here
because we've clicked reveal. We can make the next
one also have reveal. What we can hear now
is what reveal does is it puts the image behind the window when you're
scrolling past it, the illusion is the
left text moves while the right image stays. So let's give this a preview.
See how that looks there. What that's done is it's given the illusion that the image is stuck and stationary while the text on
the left is moving. If I go to the section, you probably noticed there was some sort of white
line going between. That's because we gave the section of background
color of white. We can change that
and we can make that have no background color. We can always go nothing 0. And that should get
rid of the bottom one. And then let's do
the top one as well. Sorry, image, image
opacity is there. Let's make it have
no background image. And same goes to this one. So they are now both
Background less There we go. That way you get the illusion of this particular site
having an image behind it. Now, this is a really
unique feature which many websites these
days are incorporating. Because as you can imagine, sometimes it's nice
to have a story told. Before we had these functions
where we had hover effects, where the color changes
based off hovering motions, where now we have the ability to go through different sections as you have the option here
to go as deep as you want. As far as you want. There are two of the
main parallax and reveal scrolling
animations which can really make a
website look cool. Another thing that
companies like to do or websites like to have
is Azure scrolling. Different animations come
in at different times. If we head on over
to a blank page. So in this particular case,
we're using locations. And let's reuse the same
section with London in there. So go here and we're going to focus
on the United Kingdom. Now what we're gonna
do is as we add a section and people scroll
through this website. See different animations
pop up as they scroll. One of the ways we can do that is let's add another section. Here we go. Let's make
it a two-by-two grid. This is again
allowing us to have different elements or different assets
on different sides. And let's add in a pre
made a composition. How about we use, Let's use something a
bit more interesting. Let's use this one here.
Right now we have very nice, I say precreated image. We're going to replace
this back image with something a bit
more interesting. Let's put on a person working, walking through a forest. Obviously forest existing
in the UK as well. So we're not too far off. We preview this quickly. You will see how this nicely sits here and obviously
began to change the text. But one of the
things we can do is add some animations to this. So as you're scrolling the
pop-up, Let's duplicate this. Copy and paste that
we have two of them. And we're going to change
this image to something else. So just for the sake of it, we're going to use
this beach image. So now we have two
separate images. What we can do is
change the focal point. So right now you can see
it we're starting here. Maybe we want to
use more of this bottom-right corner
with the shells. That's quite as one thing we
could do is add animations. Animations like this look quite nice if they flow in or fade in. I always like to
float in function because it makes it look like. It's a more intuitive scrolling
experience animation. So we take the float in and
only animate on first-time. That's quite important because
the last thing we want is every time someone loads
the page constantly animates, it can get quite
annoying after a while. I'm going to hit
come from the left. So we prefer animation. That looks nice. We can do the same
here. But what we're gonna do is move this
box to the left. That way we have a bit of
difference across the two. We're going to do the same here, but this time we're going to make it animate from the right. Float in, customize
animate from the right. Now if we preview this, you'll see how the
animation only comes when you get
to the viewport. Again, a really nice touch. This can be done for
anything on Wix, any element or asset
that you bring in, you can add animations to it. So just for an example, we're going to put
some decorations here. We can put in a nice
big image here. We're going to put
some text in here, which is going to say, it's going to say a 50% off
sale or something like that. 50% book by fifth 2022. This is one example
we've got here. We're going to put this into the center place in container. So that's one thing I did
that I shift and held both, that it's placed
in the container. Now that means that you can see the basic shape and
put it in there. Copy this, group those together. And let's just quickly
edit this text to make it look a bit better
than what it does. So 50% of book by
fifth December. Now let's make this
text white because we all know that white
looks better on gray. Profit. What we wanna do is want to animate
this group as well. So we can do animation. Click on flow in or expand. Flying maybe. Again,
cool animations here. Let's do flow in again. Nice, That's quite professional. We can actually make
the length of it a bit shorter. We don't
have been too late. Let me 0.8 again
animate the first time. If we start that again. See how it comes in
nice and slowly. Again, animations and
you can add buttons, these they can go to contact
forms and things like that. So they got really useful stuff. And this is a small
things that you can use an add to make your
website experience better.
6. And that's a WRAP!: So I really hope you've found this very short class useful. I didn't want to
make it too long. I plan to make a series of ten to 15 minute
class videos every week which focus on specific
topics using Editor X. The first one was
about an hour and a half because I wanted to introduce the platform
to you as a new user. And this time it was about focusing just on the animation, scrolling and parallax effects. The next one we're gonna do
is on content management. So look out for that next class where we're
going to essentially create a content management
database full of images which can be
placed on dynamic pages. So once that database
gets images, it automatically gets added to certain pages and dynamic pages, which can be very useful, especially for users that
are looking to create shops or e-commerce websites where as new images come
through for adverts or custom devices or
services, what have you? You're able to simply change one database and it gets
sent to other parts of the website without having the tedious process
of adding images constantly to different pages and losing yourself in
wasting time doing that. So definitely look out
for that next video. And if you have any
other questions, please leave them in
the question section. And I'll be grateful if
you could review this and the previous video if you
have watched them already. And I look forward to seeing you in a class in the future.
Saad Bhatty, GeoTiktoker and UX/UI Designer
