How to create twinkling visual effects on the background to your Shopify store
Would you like to do something to make your Shopify store more impressive with visitors. But you don’t know how to do. Please try with starlight effect with Starlight.js.
Starlight.js is a simple jQuery plugin for creating twinkling visual effects on the background that randomly animates stars (squares or circles) based on the frequency and density defined by the user.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Layout section, click theme.liquid to open the file in the online code editor.
- Find
</head>and paste the below code just above it.12345678{{ '//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js' | script_tag }}<script>$(function(){$.getScript("https://huratips.com/scripts/starlight.js").done(function() {$('body').addClass('starlight');});});</script> - Click Save and you are done.
You can customize the twinkling visual effect by overriding the following options.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | var user_configuration={ // "circle" or "square" shape:"circle", // star size in pixels initial_size:"12px", // final size of the stars after expansion final_size:"64px", // how fast the stars get bigger, in milliseconds expand_speed:"1s", // how long until the star fades out fade_delay:"0.5s", // how long the star fades for fade_duration:"0.5s", // The variety of colors of the stars. Can be any CSS complient color (eg. HEX, rgba, hsl) colors:["hsla(62, 50%,50%, 0.5)", "rgba(255,255,255,0.5)","hsla(180, 72%, 52%, 0.5)"], // how often a new wave of stars pop-out (in milliseconds. Bigger==longer) frequency:100, // how many stars pop out per wave density: 1, // whether the stars disappear after they are created keep_lit: false, // whether the stars rotate through out their expansion rotation: true, // how much of the element's area the stars will show up in (0-1) coverage:1, // the elements the script will target based on the class name target_class:'.starlight' }; |
Advanced settings to customize the stars.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | var advanced_configuration={ // could be ease, ease-in, ease-out, etc expand_transition_timing: "linear", // how long until the star starts to expand expand_delay: "0s", // could be ease, ease-in, ease-out, etc rotation_transition_timing: "linear", // up to how much to rotate to rotation_angle: "360deg", // how long the rotation will take place rotation_duration: "1s", // how long until rotation starts rotation_delay: "0s", // could be ease, ease-in, ease-out, etc fade_transition_timing:"linear", //the stars are absolutely positioned, so you can give them a z-index of whatever you wish z_index:0 }; |
For more advanced usages, please visit the official website.
