Activate CSS div animation when the page loads

I wanted to incorporate a box with text that would fly in from the right upon page load using animate css.

Unfortunately, I encountered some issues with animate css as it disrupted the stacking order of my page.

All I really need is for my 'sheree_text_wrapper' div to begin off-screen and smoothly move into its designated position on page load. I am open to a subtle fade-in effect or any alternative, as the current static state is quite uninteresting without the use of animate.css.

The box's movement is responsive to the viewport width, which is why it already has transition times assigned to it.

Your assistance would be greatly appreciated. Thank you in advance

HTML

<div class="sheree_text_wrapper">
    <h1>SHEREE WALKER</h1>        
    <nav>
        <ul id="hero_menu">
            <li> <a href="#about" class="scroll">About</a> </li>
            <li>|</li>
            <li> <a href="#portfolio" class="scroll">Portfolio</a> </li>
            <li>|</li>
            <li> <a href="#contact" class="scroll">Contact</a> </li>
        </ul> 
    </nav>   
</div>

CSS

.sheree_text_wrapper {
    min-width:220px;
    width:270;
    height:33px;
    z-index:10;
    margin-left:auto;
    margin-right:auto;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -ms-transition: 1s ease;
}

Answer №1

To initially position the element off screen, you can add a class once the document has finished loading that will move it to its final position:

Check out this JS Fiddle for an example

.sheree_text_wrapper {
    position: relative;
    left: -100%;
    min-width: 220px;
    width: 270;
    height: 33px;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -ms-transition: 1s ease;
}
.sheree_text_wrapper.show{
   left: 0;
}

Using JQuery's addClass() method:

$(document).ready(function() {
    $('.sheree_text_wrapper').addClass('show');
});

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

Partial views within a nested hierarchy are not updating as expected

I am currently working on a partial view that has the following structure: @model ComPost.Core.CommandsAndQueries.Contract.DataContract.FinalizeScreenDTO <div class="row"> <p> <table id="ProductTable"> <tr><td> ...

Is there a way to change the background color of the body on click and have it applied throughout the entire site

Is there a way to change the background-color of the entire site and specific modal elements when a user switches between two radio buttons? Here is the HTML code for the radio buttons: <div class="btn-group btn-group-xs" data-toggle="buttons"> ...

Creating a full-width Bootstrap layout with dual backgrounds and a two-column structure

Explaining this concept is quite difficult, which is why I haven't been able to find an answer on Google. I am currently using Bootstrap 3 and I am trying to create a layout with a full width background image, along with two transparent color backgro ...

`Arrange Buttons Horizontally in Bootstrap`

I've been struggling to align my two bootstrap buttons next to each other horizontally, instead of on top of one another vertically. Despite researching and trying various suggestions, I still can't seem to get it to work... Below is the code I ...

Unable to achieve text centering within a button using HTML and CSS

I'm diving into the world of HTML/CSS for the first time and encountering some issues along the way. In my setup.html, I created a "Continue" button and applied a class to style it in styles.css. However, I'm facing an issue where text-align cen ...

Modify the hyperlink address in the body of the webpage using jQuery

I'm searching for a solution to modify the href attribute in the following code: <link rel="stylesheet" type="text/css" href="theme1.css"> For instance, changing it from: <link rel="stylesheet" type="text/css" href="theme1.css"> to: & ...

Fetching data from a ColdFusion component using AJAX

Having trouble performing an SQL COUNT on my database using AJAX through a cfc file, and I can't figure out how to retrieve the return variable. Here's the relevant section of the cfc file: <cffunction name="getSpeakerCount" access="remote" r ...

Issue with pushing inner list<object> in Knockout version 3.2.0

Currently, I am working with knockout.js on an ASP application. The issue I am facing involves a list of objects returned by the controller action to the view, where the objects in the list point to another list of objects. My struggle lies in adding new o ...

Unable to link name with the corresponding latitude and longitude information

: I have a page that displays 15 LI items and I'm struggling to convert the complex nested HTML data into a simple JSON object containing the name, latitude, and longitude. Here's an example of how a single record should look: {name: "Pied a T ...

Locate the <li> element within the list that was clicked on by the user using JQuery UI Selectable

I am trying to retrieve the <li> element that the user has clicked on in a jQueryUI selectable. The goal is to determine whether the clicked element is already selected or not and then take action based on that. The following code is what I have so f ...

Is it possible to invoke a Javascript function from a coffeescript file?

Struggling to invoke a javascript function from a Coffeescript file within my $(document).ready(), but it seems like the function is not being executed. The function I intend to call originates from an external source that I have included in the head sect ...

Is it possible to apply border-radius to selections, similar to how it is done in vscode

It was reminiscent of this... Visual Studio Code ::selection{ border-radius: 5px; } I attempted something similar to this, however it was not successful... ...

Is it possible to change the background color using jQuery?

Can you assist me with this: I have a website and I am looking to modify the bg-coler when hovering over the menu (similar to how it works on the rhcp-website). I attempted using jquery for this, but unfortunately, it did not yield the desired result.. ( ...

Is there a CSS fix for containing a floating div inside another div with overflow hidden?

I've managed to create a cool effect with a div of an airplane inside a parent div that has 'overflow: hidden' applied. This setup gives the illusion that the airplane div is flying from under an element on the page and carrying a banner alo ...

Transmitting a pair of data points to PHP using ajax POST for querying the SQL database

I am attempting to send two values from a form to another PHP file using the ajax post method. One value is the current input box value, while the other is the value being typed into a different input box which functions as a search box. When I execute the ...

When transmitting a base64 image to the server using an AJAX POST request, the forward slashes ("/") are being replaced by ampersands ("%")

I need to send an image as base64 to the server. This is how I am making the request: $.post(Config.serviceURL('captureImage/' + memid), { imageString: imageData }, function(data) { alert("Image uploaded!", data); }).fail(function() { ...

What is the correct way to encode an HTML string in JavaScript?

I have identified a XSS Scripting vulnerability in my code and I want to prevent it. To do so, I am utilizing a Jquery Encoder for protection against XSS Scripting attacks. Below is the JavaScript code snippet: function test(response) { $('#test ...

Sorting data values based on real-time dropdown menu selections

Currently, my view class displays a table populated with data from the backend using the MVC framework in CodeIgniter. I have also added dropdown menus above each column that display the same records from the database. My goal is to enable users to filter ...

Troubleshooting Challenges in JavaScript/jQuery Hangman Game

Having trouble with my hangman game's game loop. Attempting to replace correct letters as the game runs through the word, but it's currently: looping through the word checking if the guessed letter is in the word returns index[0] Tried splitti ...

Tips for aligning two elements in a row using Bootstrap 4 Flex

I am facing a challenge with positioning an H2 element and a Dropdown button on the same line using bootstrap 4 flex. Here is what I have: https://i.sstatic.net/kV45k.png This is what I am trying to achieve: https://i.sstatic.net/Owt5j.png Below is my ...