Deprecated Content

Our News & Blog has been around since 2009. Some older articles may be formatted for styles and layouts that have since become deprecated. I've left them up, rather than removing all the old articles. Please excuse the broken links and feel free to comment or email if you're unable to view any of our old articles.

May 21, 2017

New Parallax & Enhanced Features

Just released additions and new options

Parallax scrolling is a popular technique in web design to add dynamic effects to a page during scrolling. Parallax allows us to animate almost every CSS attribute based on the scroll position on your site. Used in the right way it gives your website a subtle 3D effect, creates the illusion of depth and allows to highlight certain elements.

Since 2015, we've been adding style and flair to your design with subtle parallax effects. Like an iPhone that swooshes into view from a stack of phones as you scroll them into view - we've made some really stylish content over the last couple of years. Now, we've got a big upgrade and tons of more options.

One of the limitations we had before was with background images. With a div, we're animating the background-image instead of the object itself. We don't want the div to move, just the background image. So, previously we were limited to a simple y (vertical), x (horizontal) and some easing and viewport options. Now, we can apply any effect to background images that we could apply to regular objects.

Parallax effects get really stylish with nesting multiple layers. A common use could be a big headline over a fantastic background photo. As the user scrolls down, the background scrolls at a slower speed giving the user a three-dimensional feel. The headline could move a little slower, and slowly blur out of focus. With a more sophisticated design, we could add an additional layer with a color filter that goes over your photograph. As the user scrolls down, we can change the color of the filter, the color of the text, etc.

Additionally, we can easily apply the effects (or specific ones) to happen only on certain screen sizes. We can animate things one way for desktops and large screens, and a completely different way for notebooks and tablets.

  • Views: 2993

Tweets @themicrotechs

On Instagram @themicrotechs

"this is how I always envisioned our website. fantastic job!"

Dave Shapiro, CEO, Cartelligent
Oakland Athletics Logo
Read about the custom system we developed for The Oakland Athletics

CMS Web Design

Custom Joomla & Wordpress
Since 2008
The Microtechs, LLC P.O. Box 13 Antioch, CA 94509
SF Bay Area Web Designer & Developer Since 2008
© 2008-2019 The Microtechs, LLC