New Year decorations for the site: garland, snow, toys

What this solution does

The module for 1C-Bitrix allows adding adaptive New Year and Christmas decorations to a website, including garlands (static and animated), snowfall effects, and decorative ornaments. The elements are compact and adapt to any screen resolution without obstructing the main content.

The garland supports placement along any side of the screen. The current version includes static and animated options; future updates will expand the selection to include interactive elements.

The snowfall effect allows flexible adjustment of snow speed, flake size, and density. Additional snow types will be added as the module is updated.

Ornaments can be placed anywhere on the site with flexible display settings.

Module configuration is accessed via the 1C-Bitrix administration panel: Settings — Product Settings — Module Settings — New Year Decorations for Your Site. The main "Module Settings" tab allows enabling or disabling the module while preserving existing configurations.

The 'Garland Settings' tab controls the appearance and positioning of the decoration. The Z-index parameter sets the element's position along the Z-axis, determining whether it appears above or below other objects.

The 'Snowfall Settings' tab allows you to configure the visual effects of falling snow. It is recommended to select parameters so that the animation does not hinder viewing the website on mobile devices.

The 'Toy Settings' tab allows placing Christmas decorations on website elements. To add a decoration, click 'Add Toy', select an icon from the list, and specify target elements using the 'Add Placement Location' button.

In the CSS selector field, specify the unique selector of the site element to which the decoration will be attached.

To correctly determine the selector, open any page of the public part of the site without logging in as an administrator or editor. Logging in may cause service selectors to be added, which will interfere with correct operation.

Hover over the desired element, right-click, and select the context menu item corresponding to your browser:

Firefox: Inspect

Google Chrome: Inspect

The developer tools window will open with the Elements or Inspector tab (name depends on the browser). The code of the selected element will be highlighted. The element is displayed in the hierarchical tree of the page structure; if necessary, you can select a different element.

Select the required element in the structure tree and open the context menu using the right mouse button. Depending on the browser, choose the option to copy the CSS selector: in Firefox, select 'Copy' — 'CSS selector'; in Google Chrome, choose 'Copy' — 'copy selector'. Paste the copied selector into the 'CSS selector' field in the toy settings. Additional parameters allow you to define the appearance and position of the element relative to the selected node, as well as configure its display based on screen resolution. The ability to add multiple placement locations for a single toy enables more flexible display configuration. Once all settings are configured, click the 'Save' button.

General iT can install and configure this module and check how it works on your website.