Cheesetoast » transition http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.9 Fixed top menu that fades and shrinks when scrolled http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/ http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/#comments Mon, 07 Jul 2014 23:16:28 +0000 http://www.cheesetoast.co.uk/?p=1289 This top menu bar will stick to the top of the page, but when the user scrolls down the menu will shrink slightly and become semi-transparent. I used javascript to add a CSS class with a transition effect applied. HTML We start … Continue reading

The post Fixed top menu that fades and shrinks when scrolled appeared first on Cheesetoast.

]]>
This top menu bar will stick to the top of the page, but when the user scrolls down the menu will shrink slightly and become semi-transparent. I used javascript to add a CSS class with a transition effect applied.

See the Pen Shrink & Fading – Fixed Menu Bar by Graham Clark (@Cheesetoast) on CodePen.

HTML

We start with the html5 nav element with a fairly standard horizontal unordered list for the menu:

<nav>
  <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
  </ul>
</nav>

CSS

nav {
  background: black;
  color: white;
  transition: opacity 1s ease;
  opacity: 1;

  height: 80px;
  line-height: 80px;
  width: 100%;

  position: fixed;
  top: 0;
  left: 0;
}
nav a {
  color: white;
  text-decoration: none;
}

nav:hover { opacity: 1 }

First I start by styling the visuals. The opacity is set to 1 with a CSS3 transition so that the changes are made smoothly.

The line-height is the same as the height of the nav bar, so that the text is vertically centered.

The position of the nav is fixed at the top left with a width of 100%.

Finally, I added a hover option that sets opacity to 1 again so the user can view the menu more clearly.

Next I’ll add the class that javascript calls when the user scrolls:

.scrolled {
  opacity: 0.7;
  height: 50px;
  line-height: 50px;
}

JAVASCRIPT (JQUERY)

$(window).scroll(function(){

  var scroll = $(window).scrollTop();

  if (scroll > 0 ) {
    $('nav').addClass('scrolled');
  }

  if (scroll <= 0 ) {
    $('nav').removeClass('scrolled');
 }

});

(Don’t forget to include jQuery if you’re using this code)

This code is pretty straight forward. As the user scrolls the function is called. The variable ‘scroll’ basically measures the amount of space from the top of the page to the top of the window, i.e. before you start scrolling the distance is 0.

Depending on the scroll amount, the javascript adds / removes the ‘scrolled’ class.

The CSS3 transitions will degrade gracefully and a lack of javascript support shouldn’t make anyone cry either. Hope this code has been of interest!

The post Fixed top menu that fades and shrinks when scrolled appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/feed/ 0
Slide-In jQuery Effect with CSS3 http://www.cheesetoast.co.uk/slidein-jquery-effect-css3/ http://www.cheesetoast.co.uk/slidein-jquery-effect-css3/#comments Fri, 13 Dec 2013 03:23:25 +0000 http://www.cheesetoast.co.uk/?p=1212 This useful little snippet can be used for making elements slide on from the side of a page as the user scrolls down. It uses jQuery to detect the scrolling point on the page and a CSS3 transition to slide an image in from the right of the screen. Continue reading

The post Slide-In jQuery Effect with CSS3 appeared first on Cheesetoast.

]]>
This useful little snippet can be used for making elements slide on from the side of a page as the user scrolls down. It uses jQuery to detect the scrolling point on the page and a CSS3 transition to slide an image in from the right of the screen.

View the demo.

Here’s some simple HTML code that you’d paste below the fold of your page:

<p id="container-paragraph"><img id="trigger_img"src="#"></p>

Here’s the CSS to go with it:

body { width: 800px; } /* This could be any div container */
#container-paragraph { overflow: hidden; } 
/* So that the img is hidden off the side */
.trigger-img {
   position: relative;
   transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out; /* FF */
   -webkit-transition: all 1s ease-in-out; /* Safari & Chrome */
   -o-transition: all 1s ease-in-out; /* Opera */
   left: 1000px; /* More than the width of the body */
}

Now here’s the jQuery code:

$(function() {
   $(window).scroll(function(){
	var distanceTop = $('#container-paragraph').offset().top - windowHeight;

	if  ($(window).scrollTop() > distanceTop){
            $('.trigger_img').css("left", 0);
        }
   });
});

JQuery will slide the image onto the page when you reach the container paragraph. You can adjust the exact point by changing the variable ‘distanceTop’.

It’s tempting to use the jQuery animate function when selecting the trigger_img but typically it’s better to use CSS over jQuery when you can. When jQuery tells the browser to animation something it adds inline styling and increments the values, in this case ‘left’, from 800px to 0. CSS puts the animations in control of the browser, which means better performance.

The post Slide-In jQuery Effect with CSS3 appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/slidein-jquery-effect-css3/feed/ 0