Personal portfolio page - CSS transitions

Personal portfolio page - CSS transitions
0.0 0

#1

Hi there!

I have been trying to figure this out for days and now need to ask for help…

What I wish to do on my page is to instruct the navigation ‘a’ tags to slide to the correct section of the page when the nav bar is clicked.

I have been reading and searching all over the place for instruction on this and thought the CSS transitions ease-in-out would be the thing. As an experiment I put in:

#about {
transition: height 2s ease-in-out;
}

This didn’t work at all and it’s clearly wrong. (I deleted it from my stylesheet)

Haha I don’t even know if ‘height’ is correct! I just want it to move up and down the page in a linear fashion.

I’m a bit stumped and haven’t grasped this concept very well at all. I have also come across online resources that are advising that it’s not possible to just use CSS and Jquery is required.

Any help would be MUCH appreciated. Any links to webpages tht exlain all this would also be great if anyone knows some?

Thanks :slight_smile:


#2

Is this what you’re looking for?


There’s a demo at the bottom of the page.


#3

I’m not sure exactly what you want to happen, but CSS transitions need two components to work: a transition CSS property and some sort of trigger. The trigger can be anything that changes the property named in transition.

For example, let’s say you have a h1 with the following CSS:

#myH1 {
  color: red;
  transition: color 2s ease-in;
}

On its own, this just gives it a red color. To change that color, you could do any of the following:

Pseudo-class

/*css*/
#myH1:hover {
  color: blue;
}

Add a class with JS

/*css*/
.blueText {
  color: blue;
}
/*js*/
document.querySelector('#myH1').addEventListener('click', function() {
  this.classList.add('blueText');
});

Add a style directly with JS

/*js*/
document.querySelector('#myH1').addEventListener('click', function() {
  this.style.color = 'blue';
});

…or basically any other way of changing the named CSS property.

Here’s a demo of some ways of using transitions:

Note that height is for how much vertical space an element occupies, not its position on the page, so that’s probably not the property you want to animate.


#4

I believe you would need to use JavaScript for this. By default, when you click on an anchor to your own page, you’re actually jumping to that part of the page instead of scrolling to it. You want to actively prevent this to create a smooth scroll. JavaScript uses event handlers which basically lets you dictate what happens when you interact with something, while also overriding default behaviors.

Basically, JavaScript needs to compare the scroll position of the top of the page to the scroll position of the section you want to navigate to. JavaScript then tells the page to scroll by increments until it stops at the scroll position of the section. There are many ways to achieve this effect but behind the hood, this is something that they all have to do.

EDIT: There’s also the scroll-behavior CSS property but from what I gather it’s an experimental property that isn’t supported by mobile browsers.