Developing a Mobile Dragon Boat Festival Activity Page: Drafting, CSS, Sprite, and CreateJS Implementation

The author recounts creating a mobile Dragon Boat Festival activity page and reflects on the habit of drafting before coding, noting that starting without a sketch leads to messy, unstructured CSS and a lack of overall layout vision.

Drafting steps include recording approximate margin and padding values, noting font colors and sizes, planning image slicing and composition, extracting common components (buttons, pop‑ups, loading, inputs, tables), collecting utility styles, defining CSS3 animations, and analyzing page difficulties to prioritize features.

Overview : The page consists of five screens. Key observations are margin/padding analysis for centered buttons, about seven font colors and ten sizes (suggested to store in SASS variables), image reuse (e.g., background images for team selection and ranking), four button styles abstracted into a single .btn class, two pop‑up types, and four animation types (fade, scale, slide, float). The third screen’s game logic is the most challenging, involving a countdown, floating zongzi, and clouds, to be implemented with CreateJS.

Image slicing and sprites : The author recommends the Photoshop plugin “cutterman” for precise slicing. For sprites, images are combined into a single file and positioned using background-position . Because the mobile page uses the flexible.js plugin, percentages are preferred over pixels. The W3C definition of background-position is quoted, and the following formula is given for calculating the top‑left offset: n%*W - n%*w = -x n%*H - n%*h = -y A SASS mixin for vertical sprite positioning is shown: @mixin spriteY($offset_y, $height, $total_height) { background-position: 0 $offset_y /($height - $total_height)*100%; }

PrimusUI is a lightweight UI library created by the author to improve development efficiency. The activity page uses modules such as normalize , grid (Flex layout), rem calculations, typeface , layout , loading , and table . Examples include a Flex‑based logo grid and semantic heading styles for h1‑h6 .

CSS3 effects cover simple keyframe animations (boat movement and floating zongzi), gradients with shadows for buttons, pseudo‑elements ::after / ::before to reduce markup, reusable pop‑up markup, and a countdown timer styled via media queries. Sample keyframes: @keyframes boat { from { transform: translate3d(0, funcPxToRem(-10px, 75px), 0); } to { transform: translate3d(0, funcPxToRem(10px, 75px), 0); } } @keyframes quant { from { transform: rotate(15deg); } to { transform: rotate(0deg); } } And a gradient button example: .btn-begin { background: linear-gradient(to bottom,#ec3d1d 50%, #a8270f); box-shadow: 0 8px #761c0b; } Media query for countdown positioning: @media only screen and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 640px) and (min-device-pixel-ratio: 2) { #third .countdown span:nth-child(1) { left: 147px; } #third .countdown span:nth-child(2) { left: 215px; } #third .countdown span:nth-child(3) { right: 211px; } #third .countdown span:nth-child(4) { right: 143px; } }

CreateJS handles the mini‑game. The canvas is scaled down for mobile ( stage.scaleX = stage.scaleY = 0.5; ). Resources are loaded with PreloadJS, and the main game logic resides in game.js . Zongzi and clouds appear every 400 ms via setInterval , move with TweenJS , and respond to mousedown (which maps to touch when createjs.Touch.enable(stage, true) is set). Example tween code: createjs.Tween.get(gift).to({ x: -750 }, 5000).call(function(){ gift.parent.removeChild(gift); }); createjs.Tween.get(gift).to({ y: 550 - gift.y }, 800 * ((550 - gift.y) / 550)) .to({ y: 700 - gift.y, alpha: 0 }, 300).call(function(){ /* ... */ }); The source code is available at https://github.com/pwstrick/dragon .