"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Transitions and Transforms!
You have completed CSS Transitions and Transforms!
Preview
Now that you're familiar with translations in CSS transforms, you're going to use translateX() to create a slide transition.
Resources
Video review
- CSS transforms are a design-specific feature used to enhance your content.
- Use the translate functions over positioning offsets when you want to move elements on the page for a design-specific reason, like to enhance user interactions.
- CSS positioning offsets are layout-specific properties used to control your layout and the position of your content.
- With a translate function, it's possible to achieve better performance in most desktop and mobile browsers.
- Translate functions can take advantage of a browser feature called hardware acceleration to help the transition run smoother than a transition made with positioning offsets.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that you're familiar with
translations and CSS transforms,
0:00
we're gonna use translate to create
a neat interaction feature using
0:04
the three images on the bottom row.
0:09
For these three images, I've added
a class of slide to the photo wrapper and
0:11
photo overlay containing the image title,
description and
0:17
Download button has an opaque
blue colored background area.
0:21
Now currently, these blue overlays
are positioned on top of the images.
0:26
So, we're not able to see the images yet.
0:30
So, we're going to use
the translateX function to position
0:32
the overlay area out of view and
initially display the image.
0:37
Then when a user hovers over
the slide container the title,
0:41
description and
button will slide in from the left while
0:45
the image slides out of view
from left to right, like this.
0:49
So for this to happen,
we need to transition the image and
0:57
photo-overlay div.
1:01
So back in interactions.css, I'll scroll
down here to the row three comment and
1:03
I'll create a new rule that
targets the photo-overlay div and
1:09
the images inside slide.
1:14
Inside this new rule, I'll add
the transition shorthand property and
1:28
I'll set transform as
the transition property and
1:34
the transition duration
value to .6 seconds.
1:37
Let's also add a timing
function of ease out.
1:41
So now, let's create the transforms.
1:47
Right below this rule,
I'll create a new rule
1:50
that targets the photo-overlay
div inside slide,
1:55
then I'll add the transform property and
2:01
I want to use the translateX
function here.
2:05
And inside the parenthesis,
I'll set the value to (-100%).
2:10
Once we refresh,
you can see how this pulls
2:17
the blue overlay div 100% to its left.
2:21
And since the slide elements
overflow is set to hidden,
2:25
that blue overlays now
completely out of view.
2:28
So to slide it back into view on hover,
I'm going to create
2:31
a new rule that targets photo overlay
when a user hovers over that slide div.
2:37
So I'll type slide:hover,
then the photo-overlay class.
2:43
I'll add a transform property.
2:53
Then to slide the photo
overlay back in to view,
2:56
I'm going to use the translateX
function and set the value to (0).
2:59
So, great.
3:08
Now, the photo-overlay slides
back to its original position.
3:09
Now finally,
I want an image to slide to the right and
3:14
out of view as the blue
overlay is sliding into view.
3:19
Back in my style sheet,
I'll create a new rule that targets
3:25
images inside the slide div once
a user hovers over the slide div.
3:30
Then I'll add the transform property and
3:40
what do you think our translate
function should look like for this one?
3:43
For the image to slide to the right and
out of view on hover,
3:48
I want to use the translateX function and
set the value to (100%).
3:53
So, let's take a look.
4:00
One side refresh the page and
hover over an image, great.
4:02
The images slide 100% to the right
of their original space and
4:07
out of view while the overlay content
area slides in from the left.
4:12
In this video, you learn that translate
gives you a different way to position and
4:22
move content on a page.
4:27
It's a method similar to relative and
absolute position.
4:28
So, then when do we use positioning
offsets instead of translate and
4:31
how do we know which method
is more appropriate?
4:35
CSS transforms
are a design-specific feature.
4:38
And generally,
used to enhance your content.
4:41
So, it's best to use the translate
functions over positioning offsets when
4:44
you wanna move elements on the page for
4:48
a design-specific reason like
to enhance user interactions.
4:50
Now CSS position offset are
layout-specific properties used to control
4:54
your layout and
the position of your content.
4:59
In our image gallery, we're using
the translateX function to shift elements
5:02
away from their current position
when a user interacts with them.
5:06
So you can say that this is
a design-specific motion, so
5:10
translate is better suited.
5:14
With a translate function, it's also
possible to achieve better performance
5:16
in most desktop and mobile browsers.
5:20
Translate can take advantage of a browser
feature called hardware acceleration to
5:22
help the transition run smoother than
a transition made with position opposites.
5:27
You can learn more about hardware
acceleration and CSS transforms by
5:32
visiting the links provided in
the teacher's notes of this video.
5:35
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up