Drupal Planet

Creating Parallax Scrolling with CSS

Here at Zivtech, we are obsessed with creating immersive experiences for mobile and the web using cutting-edge design and Open Source Software like Drupal and Angular.js. One of the web design techniques that we've had on our radar is Parallax Scrolling, which gives depth to a page by scrolling two dimensions of the site at different rates (for example, text in the front would scroll faster than the image behind it). Parallax Scrolling is most often associated with 2D video game development, but has been becoming more and more prevalent on the web (for some live examples see Creative Bloq's post "46 Great Examples of Parallax Scrolling"). 

While we find this technique engaging, we never adopted it for our designs due to the fact that it relied heavily on Javascript tools and techniques that we found caused performance issues, and especially due to problems with making it work within a responsive web design. However, that may be about to change. In a recent post on his blog, Keith Clark wrote about an exciting new way to create Parallax Scrolling through CSS rather than Javascript, making for more mobile-friendly and responsive Parallax Scrolling effects. Clark writes:

Deferring the parallax effect to CSS removes all these issues and allows the browser to leverage hardware acceleration resulting in almost all the heavy lifting being handled directly by the compositor.

This technique, which removes the bulk of the work off the browser, creates the illusion of 3D without bogging pages down. Now, with CSS, we can maintain the same effect without creating a disjointed experience across multiple platforms. Check out Keith's post on pure CSS parallax scrolling websites for code snippets and samples.

Philly Dev Camp, an Instructor's Perspective

Earlier this year Zivtech received a Startup PHL "call for ideas grant" from the city of Philadelphia. The project’s goal was to help teach aspiring students or recent graduates today’s top web development technologies and help sculpt the technical landscape of the city.

Web Development Bootcamp is Coming - Zivtech Awarded Startup PHL Call for Ideas Grant

Are you an aspiring web developer, fresh out of college and eager to dive into Philly’s exploding tech startup scene? Are you a growing startup or established company in need of talented developers to help take your business to the next level?

Zivtech was thrilled last week when Philadelphia Mayor Michael A. Nutter announced that we were one of five winners of Startup PHL’s second round of Call for Ideas Grants, for a 6-week Web Development Bootcamp. We are hosting and teaching this bootcamp along with another awesome Philly web development firm--Neomind Labs--the goal of which is to allow us to share our expertise with, and help create job opportunities for, the next generation of Philly-based professional web developers.

Transitioning From a Freelance Drupal Contractor to a Drupal Shop

Hi, my name is Jason Moore and I am a Developer here at Zivtech. I recently started working for Zivtech full time, helping their talented team continue to build and maintain awesome Drupal websites and applications for their clients. For the three years prior to joining Zivtech, I built a name for myself in the local Philadelphia Drupal community as a go-to “freelancer”, specializing in small to medium-sized projects that shops like Zivtech and Rock River Star couldn’t take on, for one reason or another.

Pages

Subscribe to RSS - Drupal Planet