Split Page with the other half being dynamic and other is static

[jmsa]

Ive been lurking around reading tutorials and other stuff from this site but decided to register to ask for some help and guidance. I’ve just recently started studying website designs and came across this beautiful website which im very curious about.
The portfolio is
http://melaniedaveid.com/

My question is how do u implement a split page like that and add animation and all.
Ill appreciate any kind of help, Im just asking for guidance and not the step by step tutorial.
Thanks in advance.

[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.

[Beverleyh]

This isn’t quite the same but it gives you an idea about the layout CSS https://codepen.io/anon/pen/WpYzpd

Note that iOS doesn’t seem to handle the CodePen demo, but it works fine as a standalone web page http://fofwebdesign.co.uk/template/_testing/test/split-screen-panels.htm

[Author]

Posts