Apple iPad website effect in Blocs

General Discussion
1

I was just looking at this Apple web page as I often do, just for the fun of seeing some of their web design efforts iPad 10.2-inch (9th generation) - Apple

If you scroll down to the section where it says “Your home theatre. Home optional.” the background changes from light to dark and the header text, which is actually a graphic changes from black to white. This is then reversed when scrolling away and I am wondering if this could be done in Blocs.

Some of the video effects and mini animations are very cool as well.

3 Likes
2

That does look very cool :slight_smile:

A couple of ways that I know of that you could use, depending on the design and usage you wanted is to add a class when the scroll either gets to a certain number of pixels or to an ID.

The code for scroll distance is below, I do know you can also use Javascript to identity an ID and then apply the classes. You could modify the below code to also remove the class after so many pixels.

Eg. to add classes on scroll based on distance (pixels). Change the 50 to suit, change the #myID to your ID and the “newClass” to your overriding class. You can easily add this to blocs.

$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
       $('#myID').addClass('newClass');
    } else {
       $('#myID').removeClass('newClass');
    }
});

My guess is you could also force the @media dark mode, but then that has limited support at the moment.

There are examples online for JS that enables you to detect ID’s.

I am curious about other peoples ideas on this also.

3 Likes
3

The video in the iPad, is like what you were trying to get working the other week. How did that go?

4

Not sure how the effect is applied, but it is based on image swapping which appears to happen on scroll. The “home theatre” text is actually two svg’s - one white and one black. These are swapped when scrolling. Likewise, the iPad image is also two images - one lit normally, the other lit in a dimmed light. These are also being swapped on scroll. The effect looks like a fade as the images change from one to the other.

5

@hendon52 Yes I noticed they were using svg files and I was originally curious what font they had used for those headers in the handwritten style. I wonder if @Norm could think of a way to achieve this effect in Blocs on scroll, rather than on hover. It really draws attention to important parts of the website.

@PeteSharp Yes that video in the iPad is rather like the effect I was trying to achieve last week, though this is arguably of greater impact, since it is also at an angle. I didn’t get very far with my attempts and it looks like we’ll be dropping video from that particular project, however it would be a useful trick to learn. I shall try to see if I can get anywhere with this scroll effect using your ID class code.

At the moment I am working on three client sites with four more waiting to start, so time management is always an issue when wanting to experiment like this. Clients like to see progress, so I seem to cycle through projects, spending no more than half a day without changing. On the upside it can help avoid boredom, but it also stops me from really moving single projects projects forward swiftly at times. If anybody knows a better way of dealing with that I’d love to know.

1 Like
6

Nope lol .

7

Have you ever used Tumult Hype? I haven’t used it since the very first release, which at the time wasn’t very good, but it looks like it has matured a lot. https://tumult.com

8

I’m embarrassed to say I bought two versions and never once used it. I had to check and discovered I have Hype 3 installed, but it’s just one of those things on my very long to do list. Hopefully I’ll have time by the start of next year to rebuild my own site with many more services that will also include 3D animation using Maya.

There was a discussion about Hype a while back and some were saying there are better alternatives now. https://greensock.com/ is one that was mentioned.

1 Like
9

I can relate lol.

Yeah I have similar issues. I am on a 9 week full time project unrelated to websites at the moment, and I am way behind in development of my own stuff.

Thanks for the heads up about Green Sock, looks interesting.