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>I've been working on creating a chatbot widget for my website, but I've run into an issue. The "Chat with us" button only shows the bot and not the close button as well. Here's what I've attempted: <input id="chat" type="button" on ...
While I have experience with unit tests using Karma, my office is now interested in integration tests, specifically to test cross-browser capabilities. Protractor seemed like the best option for this, so I began working on some basic dashboard tests. Howev ...
Is there a way to eliminate the white space that appears when mixing landscape and portrait images? I want the images to move up and fill the space, even if they don't align perfectly. Additionally, I would like the images to resize based on the scal ...
I am currently working on a project involving socket.io. Upon connecting to a new socket, my input username is displayed in the "usersDiv" where all clients are supposed to be listed. However, I've noticed that when I open another tab and input my nam ...
I have created a popup component that can be shown and hidden by calling specific methods that manipulate the back and front variables associated with the class. hide() { this.back = this.back.replace(/[ ]?shown/, ""); this.front = this.front.replace( ...
Before jumping to conclusions, I want to clarify that I am not inquiring about the actual process of formatting the price. Instead, I am seeking guidance on where I may be going wrong or what steps I need to take in order to achieve the desired outcome. I ...
In the frontend code, there is a user login form that accepts the strings email and password. Using MobX State Management in the userstore, there is an action triggered when the user clicks the login button to submit the strings via HTTP post. @action logi ...
The response from the API action is shown here. I have written a web API action as shown below and it works fine when called via an AJAX request. However, I am facing an issue where the AJAX request does not return a success result even though the action p ...
This question has been bothering me for quite some time. I am currently using Selenium in conjunction with Python to find an element within a webpage. The specific element I am targeting is as follows: <a id="topmenu_adhocQtraditional_Reports" ...
Struggling to create a user interface framework for multiple web applications, I'm faced with the challenge of setting up the infrastructure in our unique situation: We have 7 (or more) different web applications built using asp.net mvc Some of thes ...
Currently, I am working on creating a list of buttons with h5 text. The issue I'm facing is that all the buttons have the same width, but when the text exceeds this width, the button expands. I would like the text to span multiple lines without affect ...
I'm facing an interesting issue. I've implemented FancyBox lightbox to showcase a "video" tag when users click on the image thumbnail, and it functions well with all varieties of HTML5 video. The challenge arises when testing in browsers older th ...
I recently made changes to my interface and class structure: export interface State { arr : any[]; } export const INITIAL_STATE: State = { arr: [] }; This updated code compiles without any issues. Now, I decided to modify the Interface to incl ...
<style type="text/css"> .inner-container{ width:400px; height:400px; position:absolute; top:calc(50vh - 200px); left:calc(50vw - 200px); overflow:hidden; } #no-blur{ z-index: 20; } .box{ position:absolute; height: ...
I have a search form that includes select options with two values. However, I want to have two select options for both the Max and Min price values. <input type="hidden" id="budget_min" name="filter_budget_min" value="0" /> <select onchange="upda ...
Currently, I am working on implementing Class Components for a project involving a main picture and a smaller pictures gallery stored in an array. The overall structure consists of an all pictures container that houses both the main picture and smaller pic ...
Here's my current project plan: I've created a small Node app that fetches data about the stock market from an API and then stores the data in a Mongo DB (which is already up and running). My next step is to create an API that will allow other se ...
My javascript code functions properly when it's embedded within the HTML file. However, I encounter issues when I try to import it externally. The Google Developer Tools indicate that the file has been loaded successfully, but there seems to be no vis ...
I have a situation where I am dealing with a node module that exports a promise to resolve a database connection. Once this connection is resolved, I then need to use it to query records which involves another asynchronous operation. Is it possible to hand ...
Recently, I've been working on developing a basic CRUD application using MongoDB as my database. However, I keep encountering an error labeled MongoError: Document failed validation, and I am struggling to pinpoint the issue. The data appears to be s ...