My first parallax site

[mikeabrams]

Hey guys,

I wanted some critique on my first parallax website. My code is based off:

http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/

Here is the test site:

http://qa.withinhelp.com/

Couple things I plan to do:

• Finish “Contact Us” section
• Make skrollr slides responsive for mobile using Enquire.js

Things that are weird that I haven’t yet figured out (may need input):

• Window resizing detection is horrible, the video glitches out, content overlaps and sometimes hides under the slides on smaller screen resolutions
• Initial page load on shows the content before it is completely loaded thus looking a bit garbled.

Cheers!

[nixnerd]

Technically, this isn’t parallax. This employs SCROLL EFFECTS… but it’s not parallax per se. The envelopes at the end are quasi-parallax, as they move at different speeds giving a slight illusion of dimension… but they move down, not up on scroll, sort of breaking the illusion…

NOT THAT ANY OF THAT MATTERS. I just want people to know what parallax is and what it is not.

On another note, looks like you’re using skrollr, which uses jQuery for tweens. I say this all the time and people are probably real sick of it… but I would use Scroll Magic, as it uses GSAP… which CRUSHES jQuery in every conceivable performance benchmark.

@ChrisCoyier wrote a nice piece on it here:

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

Pay CLOSE attention to the particle test. GSAP is crazy fast.

[mikeabrams]

Thanks for the suggestion! I used skrollr because I saw that it was common and the example was very easy to follow. Scroll Magic is news to me and looks fantastic!

Appreciate the input, those animations and particles are quite silky smooth indeed.

[nixnerd]

Dude, check this out:

http://janpaepke.github.io/ScrollMagic/examples/index.html

This is a great tool. These examples are the best I’ve seen on ANY scroll tool to show you how to use it. They are stupid easy and teach you all about using their tool.

Also Scroll Magic is aggressively developed and ACTIVELY maintained on Github.

Also, you can use GSAP completely separate from Scroll Magic. Scroll magic is just the tool that ties a great tweening engine to scroll position.

Here are their tuts:

http://www.greensock.com/get-started-js/

GSAP has awesome docs and a GREAT forum community.

These are awesome tools you should hang onto because clients love scroll effects… for whatever reason.

Other than my suggestion to use GSAP… great job!

[__]

Suggestion: The video background is awesome. However, it needs to stop — running it on a loop (so the camera pans up, down, up, down, …) is distracting (especially at the point where it starts over). It should pan up to view the house, and then stay there.

[mikeabrams]

Great point. Maybe I will edit the video to freeze frame on each pan so its not as annoying. The video does stop on scroll to solve some performance issues but continues when the viewport is at the top.

[nixnerd]

Maybe I will edit the video to freeze frame on each pan so its not as annoying.

I bet you could stop the video with about 2 lines of JS.

[mikeabrams]

@NIX you are on top of it. Bare with me i’ve been up for about 48 hours getting ready for my trip to Europe and tying loose ends. Definitely seems like the better solution. Thank you.

var vid = document.getElementById("video");

function myFunction(){
    vid.play();

    setTimeout(function(){
        vid.pause();
    }, 15000); //15 second timeout in milliseconds
}

[nixnerd]

That is definitely along the lines of what I was thinking… not quite two lines though. Ha ha ha! That might have been an exaggeration.

Does this work?

[mikeabrams]

I believe it will because I use a similar script to pause the video on scroll or else scrolling will jump. This other script isn’t quite 2 lines but does the job:

var videos = document.getElementsByTagName("video"),
fraction = 0.8;
function checkScroll() {

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

        var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
            b = y + h, //bottom
            visibleX, visibleY, visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);

            if (visible > fraction) {
                video.play();
            } else {
                video.pause();
            }

    }

}

When I add it I will let you know, in theory it should work.

[Alen]

To me, video doesn’t add anything of value. It’s just blurry, pixelated, and pans up and down. It’s not a strong visual IMO. It doesn’t engage me, it doesn’t provide any compelling argument.

You need to make emotional connection between the house and the viewer. Placing people in the frame doing something helps. It helps by enabling the viewer to envision themselves buying or selling this home.

Other than that, site looking great.

Hope that helps,
-Alen

[mikeabrams]

Alen,

While I personally agree with this….the case we have here is “the client is always right” syndrome. They purchased the stock video already so it cannot be un-done (and it was expensive). As far as the pixelation is concerned, from other sites that I have viewed as an example usually the embedded video should not exceed 1.5mb-2mb. I used handbrake (mp4) and firefogg(webm) for the encoding but i’m not a video guy so I am unsure of the proper tweaking to get less pixelation and seems to be the case here, but I will probably look into it further. Have any ideas?

[nixnerd]

I think it kind of is what it is dude. Without the granular control of choosing the video yourself, just let the client have what they think they want.

[Alen]

I totally get it :)

[mikeabrams]

Thanks guys for all your kind words…until next time.

[Author]

Posts