const myStyle = { color : ‘red’ }

return( <div style={myStyle}></div>

This will cover why it is important to know how to style in JSX, when you should/shouldn’t use JSX for styling and of course how to style in JSX.

Why use JSX?

Sometimes you may not be styling something as simply as the above example. You may have user input that determines the CSS property that you want to manipulate. We can’t inject that variable into CSS, but we can do it very easily in JSX.

const colorChoice = prompt(‘Your Color’);

const myStyle = { color : colorChoice }

return( <div style={myStyle}></div> )

The run through

Give the user a prompt // color picker // any input, and save the variable in a constant (name it what you like).

Create an object, (name it what you like), and give the key a CSS property. As the attribute, pass in your constant that you just created.

Finally, in your return method, target the element you want to give the CSS property to and pass in the style property.

Open some curly bracers ‘{}’ (this lets JSX know you are using JavaScript) and pass in your object variable.

That’s it! You have now created a style that is dependent on a variable!

Advanced

You may have noticed that we have not previously defined the variable “colorChoice” in the above example. This can cause as issue as the color that will be rendered will be “undefined” and will inherit it’s parent’s color.

To solve this, you can change the constant to a let and define it immediately after, but before your input.

let colorChoice = ‘red’;

colorChoice = prompt(‘Your Color’);

const myStyle = { color : colorChoice }

This isn’t best practice, as let variables are mutable and cause issues later if you redefine it by accident.

The solution — Use a Turnery Operator and save in state

The Turnery Operator is the JSX go to if you need an ‘if’ // ‘else’ statement. It works like this => IsThisTrue ? DoThis : DoThisInstead

The question mark checks if the previous statement is true. If it is, it will complete the middle block. If it isn’t, it will complete the last block.

? = if it is true

: = else, do this

To save in state, we simply use the constructor method inside our render function and create an object // key value that we want to set.

The we use the setState() method to change a key value.

eg. setState({color: variable})

Let’s see it in action

constructor() { super (); this.state={color: undefined} }

Because the color is undefined to start, I will pass in undefined. I could put a value in here as a fallback, but our turnery will deal with that issue anyways.

const colorChoice = this.state.color ? this.state.color : ‘red’

const myStyle = { color : colorChoice }

return( <div style={myStyle}></div> )

Now, when the page loads, it will check to see if there is a value inside the state key value of ‘color’. In this case it is undefined and will return false. That means it will pass the style of ‘red’ to colorChoice => into the object myStyle => into the style property on the div.

As soon as the user changes the state of color to something new, React will see the change and pass the variable back down the chain.

‘color’ state=>

colorChoice constant =>

myStyle object =>

style property

As always, I recommend giving it a go, practice makes perfect. You can mix regular CSS in with JSX styling. Just don’t repeat the same CSS properties on JSX and CSS!

The CSS method repeating-gradient() can be applied to both linear and radial gradients to create an infinite pattern within a single div.

The method repeating-conic-gradient() is in the beta / testing stages and is not yet supported.

In this blog, I will go over how to use CSS repeating-gradient(), and how to overcome some issues that come with it.

The Basics

repeating-linear-gradient( )

Just like in a regular CSS gradient, you can include a color stop. Below is an example of the CSS syntax used for a repeating-gradient. Remember to separate your attributes with commas. You can write it all on one line, but for readability, I personally prefer multiline statements.

But how does it all work?

Let’s take the attributes one by one.

The first attribute in this case is the ‘90deg’, and it refers to the angle your gradient will display on. By default it will be horizontal or ‘0deg’.

The next few lines define the color, color start point and color stop point. The lines highlighted in blue refers to the point that the color starts, and the lines highlighted in blue refer to the color stop point.

color start point: The range of influence the color has before blending.

color stop point: The point in the pattern that the color stops.

The order of the colors determines the order that the colors will appear and blend.

Let’s see this in practice

So, if we change the color stop for limegreen to 10px, what will happen?

The limegreen section of the pattern will now travel 10px before starting to blend to black. Now that we understand that, we can create solid bars, rather than smooth gradients. To do that, we simply change the start point of black to where the green ends, in this case 10px. (you cannot set it lower than the previous colors stop point).

Now that our start and stops line up, we have a repeating-linear-gradient, at a 90 degree angle, that alternates between limegreen and black bars that span 10px each!

What happens if we add more colors?

We technically have 3 colors in the pattern above, but 4 different color start/stop points. 10px limegreen, 5px black, 15px orange, 20px black.

Hold up. Isn’t the black set to 30px?

Yes it is, however, the black stop point is 50px and the previous stop point is 30px. The space left between is only 20px and has no other color influencing it’s area. So, by default, the space left behind is filled in by black. We could technically change all the start values to 0 and the pattern would remain the same.

AHHHHH

I know, super confusing, but I suggest adding your numbers correctly so you don’t return to your code and get super confused!

Once you play around and understand this convention, there is no limit to the number of colors you may use in your patterns. You can mix it up too, with harsh lines and smooth gradients. Or make the whole thing blended.

Next Steps

repeating-radial-gradients( );

This CSS style has lots of overlap with repeating-linear-gradients. It also has start and stop points for color as well as abiding by the same syntax. The differences being that it doesn’t take a rotation attribute, but rather a “circle” (position) attribute.

“circle at 0 0,”

The two numbers refer to the x and y coordinates of your div. The first 0 being the far left on the x axis, and the second being the top on the y.

This is what a repeating-radial-gradient looks like with it’s default position.

You can see that the centre of the circle’s centre point is in the top left corner. If we want to change the origin point to the centre, we will replace the x and y value with 50% 50%.

We can also use pixel values here, for example, you may want the origin of the circle to be 20px from the left and 20px from the top.

Other than that, the start / stop points and color assignment convention is consistent with repeating-linear-gradients.

What’s next?

Whatever you want! Use this for your funky backgrounds, creating patterns, hover states or revealing information! Here’s what you can do using position absolute, a hover state and nesting your div inside a container that has overflow:hidden

Remember, it’s not totally supported yet, so don’t use this for a vital piece of your site!

If you’re looking for further reading, this is where I got the initial notes — https://css-tricks.com/snippets/css/css-repeating-gradients/

Hopefully this was something new! Go do weird things!

Below there are two animations: The one on the left is a true Parallax effect, whereas the one on the right is not. The key difference is the object in the middle, or mid-ground point of reference. This difference is usually overlooked and many people refer to any on-scroll effect as “Parallax”.

Just in case it hasn’t yet sunk in, here’s another example of Parallax in action.

Foreground: Interactive game sprites (Mario / bricks / coins /etc)

Mid-ground(object): Mountains (in this case, multiple instances / speeds)

Background: Clouds and sky

The Foreground moves the fastest, and everything you want to appear further away moves slower.

A little science…

Because we have a binocular vision (two points of origin for sight), we go through a process called “Stereopsis”. Stereopsis is when our brain takes the image from each eye and uses them together to approximate depth. Ever wondered why pigeons bob their head so much? It’s because their eyes are on either side of their head, and as there is no overlap they cannot use Stereopsis, so they use the bobbing to see depth.

That’s enough theory, here’s how you can implement Parallax into your code

The how to

Your Elements

Main container = window // Container = Left side // Foreground = Chopper // mid-ground = mountains // background = aurora borealis

First thing you want to do is set your window, or “master container” to position: relative; Every other element will be set to position:absolute;

Next create your container element. This will act as the window into the scene you are creating. Set the width and height, you can make it pixel based or responsive, it doesn’t matter. Be sure to add overflow:hidden; You don’t want the container’s children running around your page!

Once you’ve done that, set the initial position for your foreground, mid-ground and background element(s). Adjust their z-index, so anything that is in the foreground has a higher number in relation to it’s siblings.

Now for the magic. Using Jquery, (be sure to load the cdn), you will use this function:

Breakdown:

$(window).scroll(function () { — X— });

When your browser window is in a scroll state, run this function (X)

let scrollval = $(this).scrollTop();

Create a variable that is equal to your element’s scroll distance from the top.

$(‘element’).css(‘transform’, `translate(0px, ${scrollval / 2}px)`);

Target your element and apply the CSS property “transform” and the apply a translate attribute that is equal to your “scrollval” value divided by 2.

The higher the number, the slower your object will move. So, unlike your z-index, your foreground will have a smaller number here than your background.

You don’t need to create a separate function for every new element, simply pop them together, like this:

This isn’t the only way to implement the Parallax effect, but in my personal opinion, it is the most straight-forward.

Potential issues with Parallax

Sure, it’s visually appealing and interactive, but there can be some drawbacks and here are the big ones to think about.

1. Load time

The current trend is to have single page websites, and because Parallax is so image heavy, load time can be effected. 30% of North Americans use their phone for all web searches and if you have 30 massive images on your site, it will take a long time to load. In fact, when it comes to load-time more than half of users will leave a page if it takes longer than 3 seconds. That’s shorter than the attention of a goldfish.

Not only that, but google checks for load-time of sites, and longer load-times will negatively effect your Google search rating. (SEO)

2. SEO

Not only do google check your load-times, but they check your markup. Parallax sites tend to have unconventional markup, with a lack of traditional semantic structure and often no navigation. Not only does this make it hard for users to move back and forth through your site, but Google scans your HTML and may automatically mark your site as being “amateur”, again lowering your search score.

3. Accessibility

The last big point is accessibility issues caused by Parallax sites. As mentioned, they often have unconventional structures with little to no navigation. This is a huge problem for people who navigate sites without the use of a mouse or scroll. If people can’t move through your site, they will leave it.

Another issue, easily avoided is overly dynamic Parallax effects that have been known to cause headaches, exacerbate existing eyesight problems and even nausea. In a case study, 30% of people over 40 felt nauseas after scrolling through a Parallax site.

Moving forward

Knowing this, there are things we can keep in mind when using Parallax with our own sites.

If load time or image file size is an issue consider limiting your Parallax effects, optimize images, and use SVGs as an alternative to images.

Keep conventional code, especially if you are worried about SEO and always include a clear navigation on your site. A navigation element doesn’t only help people who navigate without a mouse, but it helps all users hop to and from points of interest on your page.

Check your target demographic, don’t use Parallax because you think it looks cool. Make sure it’s not only appropriate for your site, but serves a purpose.

Check colour contrast and the degree of motion felt on your site. It’s not a rollercoaster, it’s a website.

Here’s a handy tool for checking colour contrast ratios on your site — contrast-ratio.com

End note

You made it! Hopefully, by making it this far, you learned something. There are lots of resources out there, if you want to do some further reading on issues with Parallax, check this site out :

https://fueled.com/blog/the-troublesome-misconception-of-parallax-in-webdesign/