Choppy Slider: The Styles

crankysparrow — Tue, 16 Jun 2020 22:45:41 +0000

I made this photo slider for a CodePen challenge; the prompt was to create something using a sequenced animation. I'm not trying to make a tutorial for the whole thing, but I'd like to record a few interesting bits here. You can check out the finished product CodePen.

This post is going to cover some of the CSS styles used in the slider; I'll make another soon with more details about the animation itself!

Cutting up an Image with background-position

I wanted to chop up each image into smaller pieces so I could create an effect of each piece sliding across the screen. Instead of using multiple <img> tags, I created several <div>s with the same background image. Then I used the background-position property to position the image exactly how I wanted it.

I generally passed 2 values to the background-position property. The first defines the position of the image on the x-axis, and the second defines the position on the y-axis. So, for example, background-position: -100px 100px will move the background image 100px to the left and 100px down. Here's a quick demo of some background-position properties:

I used this behavior to generate a few differently-positioned blocks with the background photo aligned in different ways. I wanted them to be close to lining up but not exactly, so I tweaked the numbers a bit and in some cases made blocks wider than their container. Often these tweaks meant adjusting the background-size property as well.

So after some fiddling I came up with something like this:

.section {
   background-repeat: no-repeat;
   position: relative;
}
.one {
  width: 110%;
  height: 80px;
  background-size: calc(100% + 100px);
  background-position: -100px -100px;
  top: 20px;
} 
.two {
  width: 120%;
  height: 30px;
  left: 20px;
  background-position: 0px -120px;
  z-index: 99;
}
.three {
  width: 115%;
  height: 60px;
  background-size: 100% auto;
  background-position: 0 -200px;
  top: 60px;
  left: -50px;
}
.four {
  width: 105%;
  height: 65px;
  background-size: 105% auto;
  background-position: 20px 100%;
  top: 165px;
  left: 40px;
  z-index: 99;
}

Here's what these pieces look like so far:

And here's what it looks like once we add the full image into the slide:

CSS Blend Modes and Filters

The above layout looks pretty neat, but I wanted to bring in a little more variation. So I used mix-blend-mode: overlay on the sections positioned over the main image. Check the MDN Docs for info on several other blend modes available in CSS.

The filter property was new to me and fun to play with! I used this to adjust contrast, saturation, brightness, and hue (just a little bit) of a few of the sections.

.one {
   filter: brightness(1.6) hue-rotate(10deg) contrast(1.2);
}
.two {
   mix-blend-mode: overlay;
}
.three {
   filter: brightness(1.3) saturate(.9) hue-rotate(10deg);
}
.four {
   mix-blend-mode: overlay;
   filter: brightness(1.3) hue-rotate(20deg);
}

Then I added a black background to the page, so the image looked like this:

Next up: The actual animation!

I'm going to write another post soon about how the slider actually moves. For now you can check out the finished product on CodePen!

Configuring Virtual Hosts With MAMP

crankysparrow — Thu, 28 May 2020 17:05:06 +0000

When I'm developing for WordPress, I use MAMP to serve my sites locally. By default, MAMP serves to port 8888. I keep all my WordPress work in one folder served up by MAMP, so each site in that folder is served at localhost:8888/mysite.

At some point I started running into problems with this URL structure, mainly because root-relative URLs would link to the wrong places. For example, on a site at localhost:8888/mysite, <img src="/image.jpg"/> would link to localhost:8888/image.jpg instead of localhost:8888/mysite/image.jpg like I needed it to.

I needed a way to serve my sites locally with a base URL these relative links to resolve to. Enter virtual hosts! These allow us to serve content to multiple domain names at once.

Here's how I set up MAMP with virtual hosts on my Mac:

1. Edit hosts file

The /etc/hosts file on your local machine maps custom domain names to the IP addresses. It's protected, so you'll likely have to use sudo to open it and enter your Mac password.

To edit your hosts file in vim, open your preferred terminal and enter sudo vim /etc/hosts. You'll see something like:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost

Don't delete anything, just add another line beneath the localhost line with your desired host name like this:

127.0.0.1       localhost
127.0.0.1       yoursite.loc

Then save the file and exit.

I like to end mine with .loc but you can use .dev or something else as well. It should be unique but easy for you to remember.

2. Edit MAMP Apache config file

Now go to the directory your MAMP install is located in. Mine is at /Applications/MAMP which is the default, so that's what I'll use as the path for the following examples.

Find the Apache config file at /Applications/MAMP/conf/apache/httpd.conf and open it in an editor. There's likely a bunch of stuff in here; scroll through and find these lines:

# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

All you need to do here is un-comment that second line, so it looks like this:

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Save the file.

3. Edit your virtual hosts file

Next, open the virtual hosts file at /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf.

There will probably be some comments and a couple of examples of blocks there. Leave the comments or delete as you'd like, then replace the examples with the information below. The second block includes the path to the site you're developing and the local domain name you added in the first step. So your file should look something like this:

NameVirtualHost *:80

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Users/youruser/your/site/root"
    ServerName yoursite.loc
</VirtualHost>

4. You're Done!

Restart MAMP if it was running already and head to the domain you added. Your site should be live there!

Just in case...

If you run into errors, you may also need to go back to the httpd.conf file we edited above and allow SymLink override. Open that file, find the block below, and make sure AllowOverride is set to All rather than None. So it should look like this:

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride All
</Directory>

I hope this is helpful for anyone needing a reference for setting this up! Feel free to comment and let me know if you have any questions or suggestions.

DEV Community: crankysparrow