What is the best way to add animation to my `<div>` elements when my website is first loaded?

Question

What is the best way to add animation to my `<div>` elements when my website is first loaded?

I am looking for a way to enhance the appearance of my <div> contents when my website loads. They should gradually appear one after the other as the website loads. Additionally, the background image should load slowly due to being filtered by the weatherType. This is a webpage dedicated to local weather that provides real-time weather information based on the user's location.

Note:- To access the API, please share the code on third-party Web Development platforms like codepen.io.

Here's the Code:

$(document).ready(function() {
  $(".text-center").fadeIn();
            var lon, lat, weatherType, ftemp, ktemp, ctemp, wspeed;

            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(function(position) {
                        lon = position.coords.longitude;
                        lat = position.coords.latitude;
                        var api = 'https://api.openweathermap.org/data/2.5/forecast?lat=' + lat + '&lon=' + lon + '&appid=bb4b778076b0c8c79c7eb8fcd1fd4330';
                        $.getJSON(api, function(data) {
                            // $("#data").html(api);
                            var city = data.city.name;
                            weatherType = data.list[0].weather[0].description;
//weatherType="clear sky";
                            ktemp = data.list[0].main.temp;
                            console.log(ktemp);
                            ftemp = (9 / 5 * (ktemp - 273) + 32).toFixed(1);
                            ctemp = (5 / 9 * (ftemp - 32)).toFixed(1);
                            wspeed = data.list[0].wind.speed;
                            wspeed = (wspeed * 5 / 18).toFixed(1);
                            /* $("#city").addClass("animated fadein",function(){
 $("#city").html(city);
 }); */
 $("#city").addClass("animated fadein");
 $("#city").html(city);
                            $("#weatherType").html(weatherType);
                            $("#temp").html(ctemp + " &#8451;");
                            //$("[name='my-checkbox']").bootstrapSwitch();
                            $("#degree-toggle").attr("value", $("<div/>").html("&#8457;").text());
                            var celsius = true;
                            $("#degree-toggle").on("click", function() {
                                if (celsius === true) {
                                    $("#temp").html(ftemp + " &#8457;");
$("#temp").fadeIn();
                                    $("#degree-toggle").attr("value", $("<div/>").html("&#8451;").text());
                                    celsius = false;
                                } else {
                                    $("#temp").html(ctemp + " &#8451;");
$("#temp").fadeIn();
                                    $("#degree-toggle").attr("value", $("<div/>").html("&#8457;").text());
                                    celsius = true;
                                }
                            });
                            $("#wspeed").html(wspeed + " kmph");
weatherType=weatherType.toLowerCase();
                            if (weatherType === "clear sky")
                                $("body").css("background-image", "url('https://static.pexels.com/photos/281260/pexels-photo-281260.jpeg')");
                            else if (weatherType === "few clouds")
                                $("body").css("background-image", "url('https://clearalliance.org/wp-content/uploads/2015/01/CLEAR-see-clear-flowers-e1422658973500.jpg')");
                            else if (weatherType === "cloudy")
                                $("body").css("background-image", "url('http://www.gazetteseries.co.uk/resources/images/5360796/')");
else if (weatherType === "sunny")
    $("body").css("background-image","url('https://i2-prod.examiner.co.uk/incoming/article10372520.ece/ALTERNATES/s1227b/JS75768352.jpg')");
else if (weatherType==="showers")
    $("body").css("background-image","url('http://ak8.picdn.net/shutterstock/videos/1479838/thumb/1.jpg')");
                          else if(weatherType==="overcast clouds") 
                                $("body").css("background-image","url('https://patchegal.files.wordpress.com/2012/07/img_2406.jpg')");
                          else if(weatherType==="light rain")
                               $("body").css("background-image","url('https://i.ytimg.com/vi/LbAigABOm_E/maxresdefault.jpg')");
                        else
    $("body").css("background-image","url('https://www.almanac.com/sites/default/files/image_nodes/thanksgiving-weather.jpg')");
                        });
                    });
                }
            });

.text-center{
  display: none;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
     <div class="text-center" id="content">
      <div> <h1><b>Weather Today</b></h1></div><br/>
       <h2>Location : <span id="city"></span></h2> <br/>
       <h2>Weather : <span id="weatherType"></span></h2><br/>
       <h2>Temperature : <span id="temp">
     </span>
 <input type="button" id="degree-toggle"  checked="checked">
      </h2><br/>
     <h2>Wind Speed : <span id="wspeed"></span></h2><br/>
      </div>
    </body>
</html>

javascript jquery html css

Answer 1

Answer №1

To create a seamless entry effect, I would incorporate animations instead of simply toggling element visibility.

Manually writing elements can be tedious and impractical, especially when dealing with a large quantity like 20 or even 1000.

Here is a basic framework to start with, which you can customize to fit your specific scenario:

HTML

<div id="elementsInThis">
  <div class="K">ELEMENT 1</div>
  <div class="K">ELEMENT 2</div>
  <div class="K">ELEMENT 3</div>
  <div class="K">ELEMENT 4</div>
  <div class="K">ELEMENT 5</div>
  <div class="K">ELEMENT 6</div>
  <div class="K">ELEMENT 7</div>
  <div class="K">ELEMENT 8</div>
  <div class="K">ELEMENT 9</div>
</div>

JS

var delay = 0;

function animate(element, delay){
    window.setTimeout(function(){
        element.style.display = 'block';
    }, delay*1000)
}

var elements = document.getElementById("elementsInThis").childNodes;
var onlydivs = Object.keys(elements).forEach(function(index, element){
    if (elements[element].nodeType !== Node.TEXT_NODE) 
    animate(elements[element], delay++);
});

CSS

.K{
  display: none;
  background: red;
  border: solid 2px black;
  animation-name: appear;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes appear{from{left:-300px;opacity:0} to{left:0;opacity:1}}

See the implementation in action here:

js fiddle

Adjust the animation and delay according to your preferences, as well as bind them to your own parent element and select children more efficiently for complex scenarios. While this is a demonstration, the underlying principle remains the same:

Utilize CSS for animation effects and ensure default display of elements is set to none (consider using visibility depending on HTML structure)
Create a delay function with a set interval between each element's appearance
Use childNodes, forEach(), and Object.keys() to automate binding your CSS animation classes to elements
You can separate additional styling into different CSS classes if needed

Answer 2

To create a seamless entry effect, I would incorporate animations instead of simply toggling element visibility.

Manually writing elements can be tedious and impractical, especially when dealing with a large quantity like 20 or even 1000.

Here is a basic framework to start with, which you can customize to fit your specific scenario:

HTML

<div id="elementsInThis">
  <div class="K">ELEMENT 1</div>
  <div class="K">ELEMENT 2</div>
  <div class="K">ELEMENT 3</div>
  <div class="K">ELEMENT 4</div>
  <div class="K">ELEMENT 5</div>
  <div class="K">ELEMENT 6</div>
  <div class="K">ELEMENT 7</div>
  <div class="K">ELEMENT 8</div>
  <div class="K">ELEMENT 9</div>
</div>

JS

var delay = 0;

function animate(element, delay){
    window.setTimeout(function(){
        element.style.display = 'block';
    }, delay*1000)
}

var elements = document.getElementById("elementsInThis").childNodes;
var onlydivs = Object.keys(elements).forEach(function(index, element){
    if (elements[element].nodeType !== Node.TEXT_NODE) 
    animate(elements[element], delay++);
});

CSS

.K{
  display: none;
  background: red;
  border: solid 2px black;
  animation-name: appear;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes appear{from{left:-300px;opacity:0} to{left:0;opacity:1}}

See the implementation in action here:

js fiddle

Adjust the animation and delay according to your preferences, as well as bind them to your own parent element and select children more efficiently for complex scenarios. While this is a demonstration, the underlying principle remains the same:

Utilize CSS for animation effects and ensure default display of elements is set to none (consider using visibility depending on HTML structure)
Create a delay function with a set interval between each element's appearance
Use childNodes, forEach(), and Object.keys() to automate binding your CSS animation classes to elements
You can separate additional styling into different CSS classes if needed

Answer 3

Answer №2

Unfortunately, I won't be able to provide an exact solution right now as I'm preparing to leave. However, one approach you can take is to create a dedicated function for your animation feature. Within your script, you can then use setTimeout to assign specific delays to each element before displaying them. You can also incorporate transition or animation properties on the elements to enhance the visual effect.

CSS

.elements {
//place your CSS styles here
}

JS

//delay = time in milliseconds before showing, element = element to display.
function animateWithDelay(delay, element){
    window.setTimeout(function(){
        element.style.display = 'block';
    }, delay);
}

function initiateAnimation(){
     animateWithDelay(1000, el1); //first element shown after 1 second
     animateWithDelay(2000, el2); //second element shown after 2 seconds
     animateWithDelay(3000, el3); //third element shown after 3 seconds, and so on
}


window.onload = function(){ initiateAnimation(); };
//consider using jquery on() or addEventListener instead of overriding window.onload event.

Answer 4

Unfortunately, I won't be able to provide an exact solution right now as I'm preparing to leave. However, one approach you can take is to create a dedicated function for your animation feature. Within your script, you can then use setTimeout to assign specific delays to each element before displaying them. You can also incorporate transition or animation properties on the elements to enhance the visual effect.

CSS

.elements {
//place your CSS styles here
}

JS

//delay = time in milliseconds before showing, element = element to display.
function animateWithDelay(delay, element){
    window.setTimeout(function(){
        element.style.display = 'block';
    }, delay);
}

function initiateAnimation(){
     animateWithDelay(1000, el1); //first element shown after 1 second
     animateWithDelay(2000, el2); //second element shown after 2 seconds
     animateWithDelay(3000, el3); //third element shown after 3 seconds, and so on
}


window.onload = function(){ initiateAnimation(); };
//consider using jquery on() or addEventListener instead of overriding window.onload event.

What is the best way to add animation to my `<div>` elements when my website is first loaded?

Answer №1

Answer №2

Similar questions

Creating and inserting multiple objects into a table in Sails JS while bypassing any existing rows

Leverage Angular to highlight updated items within a list

streamlined method for accessing page parameters in nested components using the next.js application router

Determine the necessary adjustment to center the div on the screen and resize it accordingly

Integrating a Find Pano functionality into a Kolor Panotour

WebStorm not recognizing NodeJS Core Modules in External Libraries

Are there any alternative methods to avoid duplication of Navbar link margin classes in Tailwind CSS?

How does the onclick event trigger even without physically clicking the button?

Update the button text dynamically when clicked without using an identifier or a class

Declaring module public type definitions for NPM in Typescript: A comprehensive guide

Importing an image from the public folder in a nested directory with Next.js

Is there a way to access the value of a string variable with unicode characters from a different function than the one where it was originally defined?

Performing a double running of an Express GET request with an :id parameter

Looking for assistance in streamlining my jQuery code for bootstrap tab pane. Any takers?

React Native encounters issues with removing the reference to the callback attribute upon unmounting

Top solution for maintaining smooth navigation across web pages

Pattern matching excluding "two or more" white spaces

Unable to change the value of selected items in checkbox event within a React context

I cannot understand why I keep receiving <input type="email" value="required"> when all I want is <input type="email" value="" required>

Is TinyMCE creating unexpected <g> tags?