Adobe Portfolio is not a new concept, and may only be a rehash of Bechance ProSites, but the landing page designed by Andrew Couldwell and built by his team is quite impressive. I especially liked the portfolio scroll within the device as the whole site scrolled. This was a nice subtle effect and I took a stab at trying to recreate it.

Here’s a codepen of the result.

See the Pen Portfolio scroll effect by tejasprithvi (@tejasprithvi) on CodePen.

This is achieved through parallax scrolling of the background image via background positioning.

The JS code is simple parallax effect using jQuery
$(window).bind("load resize scroll", function(e) {
var y = $(window).scrollTop();

$(".tablet .screenshot").filter(function() {
return $(this).offset().top < (y + $(window).height()) && $(this).offset().top + $(this).height() > y;
}).css('background-position', '0px ' + parseInt(-y / 2) + 'px');
$(".phone .screenshot").filter(function() {
return $(this).offset().top < (y + $(window).height()) && $(this).offset().top + $(this).height() > y;
}).css('background-position', '0px ' + parseInt(-y / 1) + 'px');
$(".desktop .screenshot").filter(function() {
return $(this).offset().top < (y + $(window).height()) && $(this).offset().top + $(this).height() > y;
}).css('background-position', '0px ' + parseInt(-y / 3) + 'px');
});