Creating a Slide Transition5:39 with Guil Hernandez
Now that you're familiar with translations in CSS transforms, you're going to use translateX() to create a slide transition.
- 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.
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 up