I am looking for guidance on creating a CSS3 preloader using a vector image. My goal is to have the logo start off transparent with only the border visible, and as the loading occurs, fill in from bottom to top with the background color.
Thank you to everyone who can assist with this!
There are multiple ways to achieve the desired result.
If you specifically mentioned canvas, here is a version using canvas:
This demonstration utilizes the clipping feature of context.drawImage to display only a portion of the image at the bottom of the canvas. A continuous animation loop gradually reveals more of the image over time.
// variables related to canvas
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw,ch;
// loading the logo and its outline
// then initiating the animation
var logoOutline;
var logo=new Image();
logo.onload=start;
logo.src='https://dl.dropboxusercontent.com/u/139992952/multple/marioStanding.png';
function start(){
logoOutline=outlinePNG(logo,'lightgray');
cw=canvas.width=logoOutline.width;
ch=canvas.height=logoOutline.height;
canvas.style.border='1px solid red';
logo.displayY=logo.height-2;
requestAnimationFrame(animate);
}
function animate(time){
// storing logo.displayY in a variable since it's used frequently
var y=logo.displayY;
// clearing the logo canvas
ctx.clearRect(0,0,cw,ch);
// using the clipping version of drawImage to
// gradually reveal the logo from the bottom
ctx.drawImage(logo,
0,y,logo.width,logo.height-y,
2,y+2,logo.width,logo.height-y);
// decreasing .displayY to increase the reveal
logo.displayY--;
// requesting another loop if the entire logo has not been revealed
if(logo.displayY>0){
// drawing the outline
ctx.drawImage(logoOutline,0,0);
// requesting another loop until the full logo is displayed
requestAnimationFrame(animate);
}
}
//
// Credit: Ken Fyrstenberg
// http://stackoverflow.com/questions/25467349/in-a-2d-canvas-is-there-a-way-to-give-a-sprite-an-outline/27127273#27127273
function outlinePNG(img,outlineColor){
// creating a new canvas with image size + 2px on each side
var c=document.createElement('canvas');
var cctx=c.getContext('2d');
c.width=img.width+4;
c.height=img.height+4;
// redrawing the image with 8-way offsets (n,s,e,w,nw,ne,se,sw)
cctx.translate(2,2);
cctx.drawImage(img, -2, -2);
cctx.drawImage(img, 0, -2);
cctx.drawImage(img, 2, -2);
cctx.drawImage(img, -2, 0);
cctx.drawImage(img, 2, 0);
cctx.drawImage(img, -2, 2);
cctx.drawImage(img, 0, 2);
cctx.drawImage(img, 2, 2);
cctx.translate(-2,-2);
// fill with color
cctx.globalCompositeOperation="source-in";
cctx.fillStyle=outlineColor;
cctx.fillRect(0,0,img.width+4,img.height+4);
// draw original image in "erase" mode
cctx.globalCompositeOperation = "destination-out";
cctx.drawImage(img,2,2);
// returning the outline canvas
return(c);
}<canvas id="canvas" width=300 height=300></canvas>Greetings! Currently, I am delving into the world of React and JavaScript. I am experimenting with a Table Component demo that can be found at the following link: https://codesandbox.io/s/hier2?file=/demo.js:5301-5317 In the demo, there is a function defi ...
My project includes an application_base.js file with a function: function drawLocations(canvas, blag, blah) { //do some stuff selectLocations(a_something, b_something); //do some stuff } For Page 1: page_1.js function selectLocations(a_somet ...
When a user selects a widget type from a dropdown on my form, different form fields are displayed based on the selection. However, upon initial load of the form (which is loaded via an ajax call), these fields remain hidden. Below is the code snippet that ...
When attempting to render the gridWithNode function inside the render method, I encountered an error message stating: "Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant ...
I encountered an issue in Chrome and Explorer while attempting to set a CSS property for a pseudo element :after. (I'm trying to create a styled burger nav icon) The error message I received was: 'Unknown property name' This happened wh ...
Link to view the illustrative example: here. Could anyone advise on a solution for ensuring only one submenu is open at a time? For instance, when "menu 3" is opened, I would like "menu 2" to be automatically closed. ...
I have been working on developing a component library consisting of multiple independent components. My objective is to enable users to easily import and use these components in their projects, similar to the following: import One from 'component-lib ...
My goal is to add the variable content into the database content using the $push method, but only if the content.hash doesn't already exist in the database. I want to avoid duplicating information unnecessarily. return shops.updateAsync({ "user": u ...
If there is no source in the video, I want to hide the video_wrapper class <div class="video_wrapper" style="width: 100%; height: 100%; display: none;"> <video id="df-video" playsinline="" webkit-playsinline="" style="height: 100%; width: 100%; ...
I'm currently working with the PrimeVue Dialog component. My goal now is to apply different styles depending on whether the dialog is maximized or not. Let's keep it simple by saying I want to change the text to bold or red when the dialog is max ...
I have developed a voting system that utilizes images. When a user clicks on an image, it submits the vote and fades out before reloading using a PHP page. The issue I'm facing is that after the first submit, clicking on the images does not trigger an ...
I'm currently utilizing the NodeJS implementation of KSS for my project. The file structure I am working with is as follows: styles (.scss files) public (compiled .css files) images (images & sprites) guide (auto-generated style ...
I'm currently working on a scroll component that resembles a gallery of images. My goal is to center the images based on the device height with equal padding on both the top and bottom. However, I'm facing an issue where the top padding does not ...
I have been attempting to add a slideshow transition effect to my video gallery, but the result is not visually appealing. You can check it out at this link: When transitioning from the 1st slide (video player) to the 2nd slide (image), the image appears ...
Looking for a Specific Solution: I've encountered similar problems before, but this one has a unique twist. What I'm trying to achieve is to search for a substring within a table, highlight that substring, and hide all other rows (tr's) th ...
I need a method to create PDFs using AngularJs that includes HTML, CSS, and JavaScript elements. I have tried two options: jsPDF (which does not support CSS) Shrimp (built on Ruby) Neither of these solutions fit my needs. Is there another way to accom ...
Can anyone help me figure out why the width of a div isn't being set dynamically using AngularJS? <ul id="contents"> <li ng-repeat="content in contents"> <div class="content_right custom_width"> <div class="title"> ...
I am working on a form that has multiple identical fields: <input type="text" id="qte" value="" name="qte[]"> How can I pass the array to my file processing? I have observed that the array sent via ajax is converted into a string. $("#form_comman ...
For a project I am working on, I need to implement a feature where users can view and edit their personal details on a JSP page. If a user is logged in, their information should be fetched from the session and displayed automatically. However, even if they ...
Within my component, I am utilizing VueStrap's modal in the following manner: <template> <modal-window v-model="show" v-on:keyup="keyHandler($event)" @ok="submit()" @cancel="cancel()" @closed=" ...