Unlocking JD’s Race Ranking H5: Key Front‑End Techniques & Animations

H5 pages are a major form of mobile web applications, and front‑end technology is crucial in their development. This article examines the core front‑end techniques used in JD’s Race Ranking H5 page, including animations, style configuration, skin switching, poster generation, debugging tricks, and more.

Technical Points

1. Animations

1.1 Progress Bar Animation

The progress bar combines two CSS animations, ProgressRise and moveScaleRight, applied simultaneously via the animation property. It animates from 0% to 100% on load, then after a 4.6 s delay performs an infinite alternating scale on the X‑axis.

.progress {
  z-index: 10;
  height: 7px;
  background-image: @progress-bar-color;
  border-radius: 8px;
  animation: ProgressRise 2s ease, moveScaleRight 2s 4.6s alternate ease-out infinite;
  transform-origin: left center;
}
@keyframes ProgressRise {
  0% { width: 0; }
  100% { width: 100%; }
}
@keyframes moveScaleRight {
  from { transform: translate3d(0,0,0) scale3d(1,1,1) skewX(0deg); }
  to { transform: translate3d(0,0,0) scale3d(1.04,1,1) skewX(0deg); }
}

1.2 Badge Swing Animation

The ranking badge swings in sync with the progress bar, using an infinite alternating X‑axis translation after a 4.6 s delay.

.light-theme-0 {
  position: absolute;
  top: -6px;
  right: -34px;
  width: 22px;
  height: 22px;
  background: url('~@/assets/images/bcmixin/1.png') no-repeat center center;
  background-size: 100% 100%;
  animation: lightMoveRight 2s ease-out 4.6s alternate infinite;
  transform-origin: left center;
}
@keyframes lightMoveRight {
  from { transform: translateX(0px); }
  to { transform: translateX(-8px); }
}

1.3 Menu Scroll Animation

When the dropdown menu switches, a scroll animation is triggered by listening to touchmove, reading the element’s current transform, and applying a rightward translation with a 0.3 s transition.

<div class="menu" style="transform: translateX(257px); transition-duration: 0.3s;">
  <ul><li>Menu Item 1</li>...</ul>
</div>

document.querySelector('.menu').addEventListener('touchmove', function () {
  var transformValue = window.getComputedStyle(menu).getPropertyValue('transform');
  var translateXValue = parseInt(transformValue.split(',')[4]);
  var scrollDistance = 100;
  menu.style.transform = 'translateX(' + (translateXValue + scrollDistance) + 'px)';
});

1.4 Button Transition Animation

A transition effect makes button properties change smoothly over 1 s, including background image replacement on click.

.bc-controll-zoom-wrap {
  position: fixed;
  bottom: 30px;
  right: 0;
  width: 83px;
  height: 54px;
  background: url('../../assets/images/float_btn_2023_618.png');
  background-size: 100% 100%;
  z-index: 1999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;
}
.bc-controll-zoom-wrap-deep {
  background: url('../../assets/images/float_btn_deep_2023_618.png');
  background-size: 100% 100%;
}

1.5 Popup Zoom‑In Animation

The popup uses a zoomIn keyframe that starts at 0 % with opacity 0 and scale 0.3, reaches 50 % with opacity 1 while keeping the scale, creating a smooth enlarge effect.

.zoomIn-enter-active { animation: zoomIn 0.3s; }
@keyframes zoomIn {
  0% { opacity: 0; -webkit-transform: scale3d(0.3,0.3,0.3); transform: scale3d(0.3,0.3,0.3); }
  50% { opacity: 1; }
}

2. Animation Compatibility

Mixin definitions for CSS animations, transforms, rotations, scales, 3D translations, and keyframes improve reusability and cross‑browser compatibility.

.animation(@animation) {
  -webkit-animation:@animation;
  -moz-animation:@animation;
  -o-animation:@animation;
  animation:@animation;
}

3. Poster Generation

The page can automatically generate shareable posters using the lightweight Vue Canvas Poster component, which draws images, text, rectangles, and QR codes on a canvas based on CSS‑like configuration.

import { VueCanvasPoster } from 'vue-canvas-poster'

export default {
  components: { VueCanvasPoster }
}

this.painting = {
  width: '334px',
  height: '600px',
  background: backgroundImage,
  views: [
    { type: 'image', url: subTitleBackgroundImage, css: { top: '125px', left: '16px', width: '297px', height: '70px' } },
    { type: 'text', text: currTitle, css: [{ left: '23px', top: '140px', fontFamily: 'PingFangSC-Semibold', fontSize: currTitleFontSize, color: textColor, width: '290px', height: '33px', textAlign: 'center' }] },
    { type: 'rect', css: { bottom: '10px', right: '24px', width: '53px', height: '53px', color: '#fff' } },
    { type: 'qrcode', content: qrcodeSrc, css: { bottom: '14px', right: '28px', width: '44px', height: '44px', color: '#000' } }
  ]
}

4. UI Upgrade (Version B)

Annual UI updates adjust colors and extract theme variables (color, font, border, layout, animation, responsive) to improve development efficiency.

@primary-color: #007bff;
@font-size-base: 16px;
@border-color: #ccc;
@container-width: 1200px;
@animation-duration: 0.3s;
@screen-xs: 576px;

5. Skin Selection

Users can choose skins, which are loaded via a configuration file fetched from the backend; JavaScript dynamically applies the selected styles.

this.posterConfig = getConfigBySkin(this.$store.state.skin);
function getConfigBySkin(skin) {
  const config = {
    globalBg:'#3F2786',
    purpleTitleBg: require('../../../assets/images/skin_purple/bg-time-purple.png'),
    // ...other assets
    number: 'skin_purple'
  };
  switch (skin) {
    case 'red': config.globalBg = '#780605'; config.number = 'skin_red'; break;
    case 'blue': /* ... */ break;
    case 'golden': /* ... */ break;
  }
  return config;
}

6. Snapshot Mode

Snapshot mode records a unique timestamp ID with historical data, appends it to the URL for sharing, and loads the corresponding data on page load.

7. Price Security Upgrade

To prevent malicious scraping, the price API adds a gateway and SDK that encrypts requests using a token and random secret key generated on the front‑end.

8. Debugging Tools

8.1 vConsole

Adding vConsole enables console logs on mobile devices when the URL contains vconsole=1.

import VConsole from 'vconsole';
if (location.href.indexOf('vconsole') !== -1) {
  import('vconsole').then(({ default: VConsole }) => { new VConsole(); });
}

8.2 No‑Jump Parameter

Adding nojump=1 prevents automatic redirects in error scenarios, keeping the page for easier debugging.

const handlerResult = (resolve, reject, result, isNeedReject, url) => {
  const nojump = getQueryString('nojump') === '1';
  switch (result.code) {
    case '103':
      if (nojump) { console.log('nojump mode, status 103'); } else { window.location.href = '//www.jd.com'; }
      break;
    case '200': resolve(result.data); break;
    case '401': window.location.href = `//ssa.jd.com/sso/login?ReturnUrl=${encodeURIComponent(location.href)}`; break;
    // ...
  }
};

9. Cancel Ongoing Requests

Before page unload, all stored Axios tokens are cancelled to avoid wasted resources.

10. Polling Fallback

If the real‑time polling interface fails three consecutive times, the page redirects to a fallback, improving stability under network fluctuations.

11. Local Package Split Commands

Several npm scripts are defined to start mock, dev, prod environments and to build accordingly.

"start:dev": "node script/switch_env_server.js dev && cross-env BUILD_ENV=dev vue-cli-service serve --open",
"start:prod": "node script/switch_env_server.js prod && cross-env BUILD_ENV=prod vue-cli-service serve --open",
"start:mock": "node script/switch_env_server.js local && cross-env MOCK=true vue-cli-service serve --open",
"build:dev": "node script/switch_env_build.js dev && cross-env BUILD_ENV=dev npm run oss",
"build:prod": "node script/switch_env_build.js prod && cross-env BUILD_ENV=prod npm run oss"

12. Monitoring

An uptime monitor checks the page every minute; if three consecutive non‑200/301/302 responses occur, alerts are sent via internal chat and email.

Conclusion

The article presented the core front‑end technologies of JD’s Race Ranking H5 page, offering developers practical methods to enhance animation, style configurability, skin management, poster creation, debugging, security, and deployment, while outlining future directions for performance, structure, and accessibility improvements.