Incorporate a new JavaScript animation as the background for an established website, replacing the static background image

Seeking assistance with my portfolio as I delve into the world of Webdesign and learn the basics from templates. How can I integrate this javascript code into the background of my site, replacing the current minecraft image?

Every attempt to implement it results in breaking the entire page for unknown reasons.

Regards,

The code I wish to implement: https://codepen.io/towc/pen/eNEBQX (provided below)

HTML:

<canvas id=c></canvas>
<a href=http://hd4desktop.com/669-colours-circle-rainbow-hd-wallpaper/>
<img src=http://hd4desktop.com/images/m/a-colours-circle-rainbow-HDWallpaper.jpg ></a>

CSS:

body {
  overflow: hidden;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}

a {
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc(100% - 200px);
  top: calc(100% - 130px);
}
img {
  width: 200px;
}

JS:

// JavaScript code provided at the given link
// For more details and troubleshooting, visit the link

...

Link to my current site (WARNING: AUTOPLAY MUSIC)

I am concerned about potential conflicts between the new CSS and existing styles on my site.

Feel free to inquire if more information is needed!

Thank you for your help!

javascriptjqueryhtmlcssweb

Answer №1

If you're not certain about how close you are, the key is to ensure that all CSS and JavaScript files are included on your site. This means including the JavaScript GUI library used for the space effect. In the Codepen example, if you click on the settings wheel next to JS, you can see the libraries that are included. Make sure you have these added to your project. Afterwards, simply add the HTML within the overlay div of your page. Refer to the code snippet below for guidance: 

// JavaScript code snippet
var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
    
    // More variables and options here...
   
function init() {
  // Initialization function
   
}

// Additional functions and prototype declarations...

init();
body {
  overflow: hidden;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}

a {
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc( 100% - 200px );
  top: calc( 100% - 130px );
}
img {
  width: 200px;
}

.dg.ac {
    position: absolute;
    z-index: 10;
}
// External script references
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Ensure inclusion of this library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script> 

// HTML snippet with canvas and overlay content...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating a nested document within an array - Utilizing MongoDB with the Node.js driver

I am struggling to achieve the following task: locate a document with a specific id, then find the corresponding document in the legacy array based on a shortID, and update the sets array of that matched embedded document. For some reason, I can't se ...

javascriptnode.jsmongodb

The Controller's ActionResult methods are not successfully collecting form data sent through an ajax request

I'm facing an issue with my purchase form where the purchase_return object in the controller is not receiving any data. It seems to be getting productId as 0 and productNm as null. Can someone help me figure out what's causing this issue? Here&a ...

javascriptjqueryajaxasp.net-mvcforms

Tips for utilizing various broadcast options to trigger Angular controllers according to the user's chosen selection

I'm currently developing an angularjs application that includes multiple date range pickers on a single web page. When a user selects a date range from one of these pickers, I need to send the selected dates to the corresponding angular controller ass ...

javascriptjqueryangularjs

Change the css code to override the color of the background material

Hey there, I'm facing an issue with overriding the background color of a material element. I've tried several methods but can't seem to get it to change. After inspecting the element on the web browser, I found the CSS code that controls th ...

cssmaterial-ui

Utilize image maps for dynamically displaying and concealing div elements

Here is the current state of my code... VIEW DEMO I am aiming to display the blue text to the user only when they click on the blue circle, etc... I believe I need to modify the attributes of the div elements, but I am not very familiar with jQuery and ...

jqueryhtmlimagemap

Embedding PHP code within HTML causing functionality issues

I'm attempting to include PHP within CSS, but the outcome is not what I expected. Instead of displaying the desired results, it's showing me the variable names and an echo statement: <!doctype html> <?php require_once("mysqlconnect.php" ...

phphtml

Tips on effectively utilizing dynamic data with Google Charts

I am working on creating a dynamic chart using Google Charts with multiple CSV files. I want to display a different chart depending on the selection made by the user. The first file loads successfully and displays a chart, but the $("#selection").change(.. ...

javascriptjquerygoogle-visualization

When getStaticPaths and getStaticProps are programmed to deliver results

Seeking assistance with my first attempt at using getStaticPaths and getStaticProps in nextJS as a beginner. Can anyone help me resolve this issue? const datas = [ { id: 1, name: "Banheiro", image: "https://res.cl ...

javascriptreactjsnext.js

Is it possible to incorporate HTML tags within the <template> section of AIML files?

My goal is to create a simple bot using an AIML file. The idea is that I can input a question and the corresponding pattern will be returned from the file. For instance, I have this sample pattern in my AIML file: <category> <pattern>TEST& ...

pythonhtmlartificial-intelligenceaiml

Discover the HTML of a different website using Javascript

I'm currently developing a basic webcrawler that will display all the links found on a specified website. Here's what I envision my program doing: - enter a URL: http://www.example.com/ - the program retrieves the HTML source and locates all th ...

javascriptjqueryajaxcross-domain

Sending a JS function to a PHP script

I've been incorporating the Soundcloud API into my project and successfully implemented their record button on my website. Once the upload is completed, the code generates the URL of the newly created soundcloud file. My goal now is to pass that URL ...

phpjavascriptajaxwordpress

What is the best way to position this dropdown menu component directly under a specific section of my navbar in a React application?

As I delved into creating a basic navbar and dropdown menu in React, I encountered a puzzling issue. I envisioned a section within the nav that would trigger a dropdown menu right below it upon hovering over it. Attempting to replicate this functionality b ...

htmlcssreactjsnavbar

Vuejs fails to properly transmit data

When I change the image in an image field, the new image data appears correctly before sending it to the back-end. However, after sending the data, the values are empty! Code Commented save_changes() { /* eslint-disable */ if (!this.validateForm) ...

javascripttypescriptvue.js

What is the best way to access a specific attribute of an object that is within an array in JavaScript or Google Apps Script?

One challenge I'm facing is with a javascript function that generates an array filled with objects. Each object contains various attributes such as id, colour, and size. After the array is created, it is sent to a Google Apps Script for further proces ...

javascriptgoogle-apps-script

The PowerShell script has misplaced the HTML formatting

I am a beginner in scripting and I have two questions. I wrote a .ps1 script to identify devices with less than 10% free space: Get-Content "C:\temp\servers.txt" | Sort | ForEach { $computer = $_ $disks = @(Get-WmiObject Win32_LogicalDisk -Com ...

htmlpowershell

Issue with Setting Value in JQuery Select Box

I am in the process of designing a webpage that allows users to edit listings they have created on my website. These listings fall under three main categories, each with its own set of subcategories. To streamline this process, I am implementing AJAX to dy ...

javascriptphpjqueryajax

Compact NiceScroll Scroller within a narrower div compared to the width of the scrolled div

I am currently working on a table layout where I have fixed two columns on the left, similar to what is shown in this example. To enhance the scrolling experience, I am using the nicescroll plugin. However, I have encountered an issue where the plugin be ...

jquerycssnicescroll

Configuring Axios header in Java backend based on the value stored in the express session

I am currently working on a frontend app using node.js express for server-side rendering. This app calls java backend endpoints and I use Axios to make the requests. A specific header named "agent-id" needs to be set in every request that is sent from expr ...

javascriptnode.jsexpresssessionaxios

Tips for modifying the function of an Electron application using an external JavaScript file

This is the project structure I envision. https://i.stack.imgur.com/ocRp9.jpg kareljs folder houses an Electron app, and upon running npm start within that directory, a window appears and executes the run method of karel.js when the button Run Karel is ...

javascriptnode.jsnpmelectron

Modify the HTML input type color in React.js only after releasing the mouse button

<input className="color-palatte" type="color" onChange={(e) => onColorChange(e)} /> When interacting with the color palette, I have set up an API call to trigger only when I release the slider instead of continuous calls while sliding over the co ...

htmlreactjseventsinputcolors