Animated absolute positioning with hidden overflow is being utilized

I have a dynamic div element identified by the id shooting star:

Below is my HTML:

<div id="sky">
    <span id="shootingstar"></span>
    <div id="allstars"></div>
</div>

.shootingstar {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    transform-origin: 100% 0;
    animation-iteration-count: 1;
    opacity: 0;
}

.shootingstar-animation-right {
    animation: shootingstar-right-down ease-out;
}

.shootingstar-animation-left {
    animation: shootingstar-left-down ease-out;
}

.shootingstar-animation-right:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-45deg) translate3d(1px, 2px, 0);
    transform-origin: 0% 100%;
}

.shootingstar-animation-left:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-135deg) translate3d(1px, 5px, 0);
    transform-origin: 0% 100%;
}

@-webkit-keyframes shootingstar-right-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(-100px, 100px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(-150px, 150px, 0);
    }
}

@-webkit-keyframes shootingstar-left-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(200px, 200px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(300px, 300px, 0);
    }
}

With my JavaScript file, I duplicate the element and assign random top and width values to create multiple shooting stars in the sky:

var sky = document.getElementById('sky');

function createShootingStar() {
        var time = Math.floor(Math.random() * (1000 - 800) + 800) / 1000;
        var finalTime = time.toFixed(2);
        var random = Math.round(Math.random());

        var tx = Math.floor(Math.random() * finalW);
        var ty = Math.random() * (finalH * 0.25 - 0) + 0;

        var element = document.getElementById('shootingstar');
        var cln = element.cloneNode(true);
        cln.classList.add('shootingstar');
        random == 1
          ? cln.classList.add('shootingstar-animation-right')
          : cln.classList.add('shootingstar-animation-left');
        cln.style.animationDuration = finalTime + 's';
        cln.style.right = tx + 'px';
        cln.style.top = ty  + 'px';
        sky.appendChild(cln);
        setTimeout(function () {
          sky.removeChild(cln);
        }, 3000);
}

setInterval(createShootingStar, 1000);

The issue arises when some of my shooting stars either start or finish beyond the visible area leading to horizontal scrollbar activation, which I want to prevent.

I intend to hide all the stars that are not on-screen using overflow: hidden;, but it seems to be ineffective.

EDIT: this occurs with mobile dimensions

https://i.sstatic.net/OUt6P.png

javascripthtmlcss

Answer №1

I encountered issues with finalH and finalW being flagged as undefined. To address this, I assigned them random initial positions. I implemented overflow: hidden on the sky element which produced a visually appealing outcome. The effect of shooting stars coming from various directions added an interesting dynamic, especially considering not all of them disappeared within the viewport.

var sky = document.getElementById('sky')

function createShootingStar() {
  var finalW = Math.random() * window.outerWidth;
  var finalH = Math.random() * window.outerHeight;
  var time = Math.floor(Math.random() * (1000 - 800) + 800) / 1000
  var finalTime = time.toFixed(2)
  var random = Math.round(Math.random())

  var tx = Math.floor(Math.random() * finalW)
  var ty = Math.random() * (finalH * 0.25 - 0) + 0

  var element = document.getElementById('shootingstar')
  var cln = element.cloneNode(true)
  cln.classList.add('shootingstar')
  random == 1 ?
    cln.classList.add('shootingstar-animation-right') :
    cln.classList.add('shootingstar-animation-left')
  cln.style.animationDuration = finalTime + 's'
  cln.style.right = tx + 'px'
  cln.style.top = ty + 'px'
  sky.appendChild(cln)
  setTimeout(function() {
    sky.removeChild(cln)
  }, 3000)
}

setInterval(createShootingStar, 1000)
.shootingstar {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  transform-origin: 100% 0;
  animation-iteration-count: 1;
  opacity: 0;
}

#sky {
  background-color: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shootingstar-animation-right {
  animation: shootingstar-right-down ease-out;
}

.shootingstar-animation-left {
  animation: shootingstar-left-down ease-out;
}

.shootingstar-animation-right:after {
  content: '';
  position: absolute;
  border: 2px solid #f00;
  border-width: 2px 150px 2px 150px;
  border-color: transparent transparent transparent #fff;
  transform: rotate(-45deg) translate3d(1px, 2px, 0);
  transform-origin: 0% 100%;
}

.shootingstar-animation-left:after {
  content: '';
  position: absolute;
  border: 2px solid #f00;
  border-width: 2px 150px 2px 150px;
  border-color: transparent transparent transparent #fff;
  transform: rotate(-135deg) translate3d(1px, 5px, 0);
  transform-origin: 0% 100%;
}

@-webkit-keyframes shootingstar-right-down {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(0) translate3d(-100px, 100px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0) translate3d(-150px, 150px, 0);
  }
}

@-webkit-keyframes shootingstar-left-down {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(0) translate3d(200px, 200px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0) translate3d(300px, 300px, 0);
  }
}
<div id="sky">
  <span id="shootingstar"></span>
  <div id="allstars"></div>
</div>

Answer №2

var galaxy = document.getElementById('galaxy');

function generateFallingStar () {
    var finalWidth = window.outerWidth;
    var finalHeight = window.outerHeight;
    var time = Math.floor(Math.random() * (1000 - 800) + 800) / 1000;
    var finalTime = time.toFixed(2);
    var random = Math.round(Math.random());

    var tx = Math.round(Math.random() * finalWidth);
    var ty = Math.round(Math.random() * (finalHeight * 0.25 - 0) + 0);

    var element = document.getElementById('fallingstar');
    var cln = element.cloneNode(true);
    cln.classList.add('fallingstar');
    random == 1 ? cln.classList.add('fallingstar-animation-right') : cln.classList.add('fallingstar-animation-left');
    cln.style.animationDuration = finalTime + 's';
    cln.style.right = tx + 'px';
    cln.style.top = ty  + 'px';
    galaxy.appendChild(cln);
    setTimeout(function () {
        galaxy.removeChild(cln);
    }, 3000);
}

setInterval(generateFallingStar, 1000);
body {
    background-color: #000;
    overflow:hidden;
}
.fallingstar {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    transform-origin: 100% 0;
    animation-iteration-count: 1;
    opacity: 0;
}


.fallingstar-animation-right {
    animation: fallingstar-right-down ease-out;
}


.fallingstar-animation-left {
    animation: fallingstar-left-down ease-out;
}

.fallingstar-animation-right:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-45deg) translate3d(1px, 2px, 0);
    transform-origin: 0% 100%;
}

.fallingstar-animation-left:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-135deg) translate3d(1px, 5px, 0);
    transform-origin: 0% 100%;
}


@-webkit-keyframes fallingstar-right-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(-100px, 100px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(-150px, 150px, 0);
    }
}


@-webkit-keyframes fallingstar-left-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(100px, 100px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(150px, 150px, 0);
    }
}
<div id="galaxy">
    <span id="fallingstar"></span>
    <div id="allstars"></div>
</div>

This solution suits my needs perfectly.

Answer №3

To address the issue, consider adding the CSS style overflow: hidden to the sky container.

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

Tips for Importing HTML Table Data Line by Line into SQL Table

I have the following code here. I am looking to insert HTML table data row by row into an SQL database. However, with this current code, only the last row is being stored in the database table. I believe I need to implement a loop to read the data from e ...

phphtmlsql

Node.js encountering req.body as undefined when using form-data as the content-type

After creating a small demonstration for this form-data passing API, I attempted to test it using Postman. However, I encountered an issue where no data was being retrieved. Code const http = require("http"); const express = require("expres ...

javascriptnode.jsexpressform-data

What is the best way to transform the HTML retrieved from an AJAX GET request into an object using JQuery?

$.ajax({ method:"get", url:"/wall", data:"ajax=1", beforeSend:function(){}, success:function(html){ $("#grid_mason").append(html); //Inserting additional co ...

javascriptjqueryhtmlcsstemplates

Styling a select drop-down menu with CSS to show a button in Chrome and Webkit browsers

On my HTML page, I have a basic drop down menu set up like this: <select name="menu" class="menu"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> ...

cssgoogle-chromebuttondrop-down-menuwebkit

Having trouble loading JSON data in jqGrid

Why is the JSON data not loading in jqGrid? I am using ASP.net with C# along with JQGrid using JavaScript and AJAX. Below is my code: public string Alarm_Main() { SqlConnection con = new SqlConnection(ConnString); DataTable dt = new DataTable( ...

javascriptc#asp.netjqgrid

The jQuery UI Tab is failing to scroll within its container

Scenario : I am facing an issue with a scrollable container in IE8. The containing div is supposed to be scrollable and it holds my jquery UI tab div. Issue: While scrolling the container in IE8, other content within it also scrolls, but the jQuery UI t ...

javascriptjqueryjquery-uiscrolljquery-ui-tabs

The debate between ensuring input validity and making fields mandatory on multi-page forms

I am currently working on a multi-page form and using jQuery Validate to validate it. The user has four options: next, prev, save, submit. Save, next, and prev all save the current page within the form; whereas submit is similar to save, but triggers addi ...

javascriptjqueryasp.netjquery-validate

What is the best way to stop webpack from generating typescript errors for modules that are not being used?

The directory structure is set up as follows: └── src ├── tsconfig.json ├── core │ ├── [...].ts └── ui ├── [...].tsx └── tsconfig.json Within the frontend, I am importing a limi ...

javascripttypescriptwebpackbabel-loader

Issue with displaying dropdown menu icon in Bootstrap 5

Currently utilizing Angular 14 alongside Bootstrap 5. The code snippet below showcases a simple Bootstrap dropdown menu: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id=&quo ...

cssdrop-down-menubootstrap-5

Import JSON data into Jasmine/Karma while running unit tests in AngularJS

I am currently testing a callback function that requires a response object as its sole parameter. The response object is the result of an HTTP request made from a different location, so using $httpBackend in this particular test is unnecessary as the reque ...

javascriptangularjsunit-testingjasminekarma-runner

Outdated ExpiresByType directive in .htaccess leads to website layout distortion. What is the best way to prompt the browser cache to refresh?

I recently updated my website and had the following configurations in the old .htaccess file: <IfModule mod_expires.c> ExpiresActive On # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" Expi ...

phpcss.htaccessjoomla

I'm encountering an issue with the alignment of a button

One time, I tried to lighten the mood by cracking a joke with my friends, but it backfired when I got stuck fixing a misaligned button on my website. Here is a snippet of my HTML code: <body> <?php include 'navbar.php'; ?> <br ...

htmlcss

Assign properties to hyperlinks within a specific category inside a container using Cascading Style Sheets

I am facing a challenge with two different sets of links on a page; one set is in an unordered list, while the other is in a table. I need both sets to have shared attributes but different widths. Specifically, I want the links in the table to be aligned i ...

htmlcss

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

javascriptcssnpmweb-deploymentfirebase-hosting

The Express server is having trouble successfully responding to the Axios CORS Preflight request

I have a get action implemented using react.js that is running on port 3000. var config = { headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type ...

javascriptnode.jsreactjsexpresscors

The CSS code is effective on one page but fails to render on the other

I am in the process of creating a website for my jewelry business and it's my first time doing so. I'm facing an issue where the CSS styles are being applied to one page but not to the other, even though both HTML files have the same code linking ...

htmlcssbrowser

Positioning SVGs within a parent container while maintaining responsiveness

How can I anchor an SVG overlay with a circle in the bottom right corner while expanding the rest of the SVG to fill the remaining area of the container without distorting the circle? I've been able to position the SVG in the bottom right corner, but ...

htmlcsssvgresponsive

Applying absolute positioning to the router-outlet element in Angular2 using CSS

I am working on a website with the following basic layout: <nav> Nav content here </nav> <router-outlet></router-outlet> I have a component that is being displayed in the router outlet, but I want it to appear on top of ...

cssangular

Guide to dynamically loading separate components on a single page in Angular 9

Rendering all components or widgets on the page at once can slow down the application's loading time. I prefer to have app-sidebar1, app-body, and app-sidebar2 load onto the DOM sequentially based on priority, rather than waiting for all components t ...

htmlangularionic-frameworklazy-loading

Enhancing the appearance of browser pop-up windows

(via failblog) The background and buttons have been completely altered. How was this transformation achieved? ...

javascripthtmlcss