Reply To: Split Page with the other half being dynamic and other is static

[Beverleyh]

Using the developer toolbar will help you examine the page source/styles/JavaScript yourself – that’s F12 in most browsers.

how do u implement a split page

I’m not sure if you’re refering to the X or Y axis, but it looks like, in this case, the vertical split is being done, somewhat, with JavaScript – it appears to be calculating the viewport and modifying inline styles to achieve full height panels and/or identify scroll points. You could do something similar (visually) with viewport units in CSS (Google something like “fullscreen vh viewport panels in CSS” for examples). The horizontal split panels are done using % units (50% for half-width), but they could again be done using vw viewport units.

and add animation

Animations (assuming you mean the zoom when you hover over the image panels) are being done with CSS3 transforms, using scale() – again, you can inspect the elements in the developer toolbar to see how it’s being done.

Here are some places to start learning about CSS animations and transitions;
https://css-tricks.com/almanac/properties/a/animation/
https://css-tricks.com/using-multi-step-animations-transitions/
https://css-tricks.com/almanac/properties/t/transition/

The hand looks like its an animated SVG.

And the scroll is done with JavaScript.

Good look with your research.