Member Avatar for seularts

Hi, I stumbled upon this website recently: http://archeage.xlgames.com/ and fell in love with the way they designed it, but I have no clue what css/jquery method they used to achieve this. Can anyone point me in the right direction to some sort of tutorial that will help me create a similar template? I'm also curios how the sliding png characters work? Thanks! :)

  • 3 Contributors
  • 2 Replies
  • 116 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

asked how that hero was made and how the PNG characters slide in. That page is a pretty standard pattern: a full-viewport "hero" (background image sized with background-size: cover) with several absolutely positioned image layers (PNG sprites with alpha) stacked with z-index. The motion is usually done by animating GPU-friendly transform properties (translate / translate3d) via CSS transitions/animations or a JS timeline (many teams use GreenSock/GSAP for precise sequencing). Animating transform avoids layout/paint thrash — see the CSS transform docs.

A simple reproduce workflow:

  • Place PNG characters as absolutely positioned elements inside a .hero wrapper.
  • Start them off-screen using transform: translateX(-100%).
  • On load (or after preloading critical art), add a class and transition them into place or drive the motion with a JS timeline.
  • Use translate3d / will-change to hint for GPU compositing and avoid animating left/top.

Example (minimal):

.hero { position:relative; height:100vh; overflow:hidden; background-size:cover; }
.character { position:absolute; bottom:0; left:0;
            transform:translate3d(-120%,0,0);
            transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.hero.visible .character { transform:translate3d(0,0,0); }

window.addEventListener('load', function(){
  document.querySelector('.hero').classList.add('visible');
});

Performance and troubleshooting: is right — these pages feel heavy if assets are not optimized. Compress PNGs (pngquant), convert hero art to WebP when possible, preload the single hero background, lazy-load non-visible assets, and serve from a CDN or HTTP/2 origin to reduce blocking. Use DevTools (Network/Performance) to find the biggest images and long-running scripts. ’s suggestion to ask the site is valid, but inspecting resources and script tags in the browser will reveal which libraries (jQuery, GSAP, slider plugins) they used. For advanced sequencing, consider GreenSock (https://greensock.com/).

Recommended Answers

All 2 Replies

Member Avatar for almostbob

Then why not ask the site

Member Avatar for Member #120589

Very nice once it loads, but takes so long, I think many people would lose interest.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.