background preloader

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax: A jQuery Plugin
Scrolling Parallax examples Simple scrolling parallax effect Multiple, layered parallaxes for a nice depth effect Parallax in all directions: vertical and horizontal scrolling Parallax called on a piece of inline HTML markup About Scrolling Parallax Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. Basic use of the Scrolling Parallax plugin is extremely easy. The Scrolling Parallax plugin is also very versatile. Download the Scrolling Parallax Plugin for jQuery Scrolling Parallax for background images Using the parallax for a background image is incredibly easy. $.scrollingParallax('img/background-parallax.jpg'); This will append the image to the page, and stretch its dimensions as described above. This would stretch the background width to 200% of the screen size, and enable the parallax to work on horizontal as well as vertical scrolling. Scrolling Parallax on jQuery objects $('div.parallax-div').scrollingParallax(); staticSpeed : .2 Related:  HTML5 and Mobile

SUPERSCROLLORAMA SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) controller.removeTween('#fade'); Example:

eSimply - Email marketing tools and programs jQuery.parallax Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events

HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.

scrolldeck.js Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale (resize this window to see) Create section navigation by linking to slide id’s (optional) After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event. $(document).ready(function() { var deck = new $.scrolldeck(); }); You can configure the settings as follows(example has the default config values assigned) Add animations to slides by adding the "animate-in" or "animate-build" classes to elements in your slides. <div class="slide"><p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left. Available animations are "fly-in-left", "fly-in-right", "space-in" and the default which is "fade-in"

Beautiful web-based timeline software How to Evaluate and Select the Right Mobile SDK Matthew D. Sarrel is a technology journalist, analyst and founder of Sarrel Group, a technical marketing consultancy based in New York City and San Francisco. Anyone developing consumer software knows that we live in a mobile-first world. I see companies today that actually have a live app before they have a live website. Earlier this year, a comScore report found that the majority of consumers are using a combination of PC/Mobile/Tablet to access retail sites. Just as we saw a revolutionary shift from traditional methods of interaction (snail mail, telephone) to Web in the 90s, this decade, we are seeing a shift from Web to mobile. Consumers also prefer to use mobile apps over the mobile Web. Developers in the mobile-first world have to build great apps or they’ll never succeed. An SDK powers specific functions within an app, yet its stability and performance is critical to the app’s stability and performance. SDKs are everywhere So who provides great SDKs? Helpshift is a CRM SDK.

10 Interactive Infographics for Inspiration Of late, many designers have noted that the web has become oversaturated with infographics; that they’re a tired old trend in need of refreshing. And to a point, they’re correct. But even if they’re tiresome to web professionals, infographics are still very popular with web users, and there’s plenty of new ground yet to be explored in this still-young specialty. A perfect case in point can be found in the growing subdivision of interactive infographics, which take the seductive combination of imagery and information, and make it nearly irresistible by adding an element of participation and control. Of course, some results are better than others, whether because the topic is particularly suited to the format, or because the interactions are clever or unusual. How a Hybrid Car Works The blueprint reference of the design makes it clear that the infographic discusses the interior of a hybrid car’s mechanisms. Keeping it Reel Eastern Tennessee Evolution of the Cloud Urbangap Fish Tales Infographic

Mobile devices tighten grip on Canadian Internet users TORONTO - Canadians are on the verge of passing a major mobile milestone, according to measurement firm comScore. Of all the time Canadians spend online — and it's a lot, ranking second in the world at 33 hours per month — 49 per cent of it is now tied to mobile devices. It won't be long until Canadians are officially using their smartphones and tablets more than desktop and laptop computers to access the Internet. ComScore says instant messaging apps, social networks and mobile web searches are spurring the growth in phone and tablet usage. And for some users, mobile access to the Internet has become so convenient that it's now the only way they go online. There are now 1.3 million Canadians that in the course of a month will only use a mobile device to access the Internet and won't use a computer at all, said comScore's Paul Rich, a senior account manager. Of the Canadians with mobile phones, 78 per cent had a smartphone, which was second highest among the countries comScore researches.

Adaptive Design Meets Responsive Development :: By Brian Crucitti, Vokal Interactive :: Both adaptive and responsive Web design models have adherents, and while it's tempting to choose a side, perhaps a better way exists. Adaptive design is more commonplace but has downfalls, while responsive design is more desirable but harder to achieve. Could it be the way of the future to meld the two seamlessly, enjoying the benefits of both? Let’s explore this idea below: Adaptive Design in a Nutshell In the early stages of Web design, designers and developers created with a limited set of screens: namely, desktops or laptops. The main benefit of adaptive design is the developer only has to deal with a limited number of potential resolutions. Responsive Design to the Rescue In contrast, responsive design does not snap, because it is developed to adjust to any resolution. Perhaps the biggest selling point with responsive Web design is that it works well for all browser sizes, and adjusts with none of the “snapping” when size is adjusted.

Win the Moments that Matter As consumers now live online with their smartphones rarely more than a metre away from their hands, search, video and app usage continues to accelerate and evolve. In this environment, brands have the chance to take advantage of more audience signals than ever before. Google’s Eileen Naughton says it’s essential that marketers rethink how they communicate with consumers to make the most of the opportunity to win the moments that matter. Although it’s only been eight years since the first smartphone came out, today it is a fixture in the hands of 2.8 billion people around the world. People now spend more time on mobile devices than they do on computers. In the UK, we’ve passed that threshold with more than 50% of YouTube views taking place on mobile. Mobile is a behaviour; we should stop thinking of it as a device. Humans have always searched for the essentials of life – food, water and shelter – as well as the existentials – music, poetry and love.

What are progressive web apps (PWAs)? You may have heard of Accelerated Mobile Pages but what about Progressive Web Apps (PWAs)? If you need a primer, this should help. What are PWAs? Simply put, they are websites that feel more like an app. They load quickly (no App Store involved), can be added to your smartphone home screen, function offline and can send push notifications - making them much more convenient than a traditional web app. Unsurprisingly, Google came up with the term, and PWAs are seen alongside Accelerated Mobile Pages as a weapon in the fight for slick mobile UX (fundamentally, quick and reliable loading). PWAs were made possible by advances in JavaScript and web browsers which now support more HTML5. How do they work? App shell PWA's use an app shell, which is the minimal HTML, CSS, and JavaScript required to power the user interface. The first time you load the app, the app shell is cached on your phone. Service worker The work of caching the app shell is done by a service worker. App manifest What are the benefits?

Related: