I'm currently trying to replicate the effect seen in this example:
Specifically, I am referring to the text that reads "CREATIVE AGENCY FOR DARING BRANDS"
Although it appears simple, I am having trouble figuring out how to achieve it. I primarily work with HTML, CSS, and jQuery. I'm not sure if there is a plugin available for this type of effect or if I am using the wrong search terms.
If you haven't already, consider checking out gsap or kute.js scripts - they're great for adding animation effects to text and other elements.
Check out my demo showcasing a combination of CSS and JavaScript:
$(document).ready(function () {
setTimeout(function(){
$('.header__title').addClass('show');
}, 500);
});.animated-text {
display: inline-block;
width: 100%;
height: 9rem;
overflow: hidden;
}
.header__title {
color: #000;
font-weight: 400;
max-width: 32rem;
opacity: 1;
position: relative;
text-align: center;
z-index: 1;
max-width: 60rem;
font-size: 3rem;
position: relative;
transform: translateY(8rem);
transition: transform 1s;
text-transform: uppercase;
}
.header__title.show {
opacity: 1;
transform: translateY(0);
}
h1 em {
position: relative;
}
.header__title em:before {
background-color: rgba(249,214,61,.8);
bottom: .05rem;
content: "";
height: 1.2rem;
left: 0;
position: absolute;
right: 0;
-ms-transform: scaleX(0);
-ms-transform-origin: left;
-webkit-transform: scaleX(0);
-webkit-transform-origin: left;
-webkit-transition: -webkit-transform .9s cubic-bezier(.515,.005,.185,1) 1s;
transform: scaleX(0);
transform-origin: left;
transition: -webkit-transform .9s cubic-bezier(.515,.005,.185,1) 1s;
transition: transform .9s cubic-bezier(.515,.005,.185,1) 1s;
transition: transform .9s cubic-bezier(.515,.005,.185,1) 1s,-webkit-transform .9s cubic-bezier(.515,.005,.185,1) 1s;
}
.header__title.show em:before {
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="animated-text">
<h1 class="header__title">
Creative agency<br>for <em><i>daring brands</i></em>
</h1>
</div>
Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselv ...
I am currently working on a project where I need to delete a record from MySQL using AJAX. Everything is functioning correctly, but I would also like to incorporate a loading feature for the button when the trash icon is clicked. The button link can be fou ...
Can the font size be smoothly scaled in relation to the width of the body or parent element? I am seeking a solution that does not involve javascript. Is it feasible to relate rem to a specific width? ...
I have been tasked with creating an HTML page for a car dealership using JQuery and Bootstrap 5. The goal is to utilize Bootstrap 5 to accomplish the following: Set up a table with appropriate form input elements that allow users to input four (4) quarter ...
Working on a website located at When viewing the site on mobile devices ( < 768px ), I am struggling with getting the off-canvas navigation to automatically close after clicking on one of its links. Any assistance would be greatly appreciated as I&apos ...
GOAL I want the content of my page to adjust to screen sizes that are smaller than 600px wide. ISSUE When using the responsive tool in Chrome, preset screen sizes like iPhone X do not apply media queries properly. Even manually adjusting the screen size ...
Example: The URL of my site is "http://localhost:54887/CustomOrdering.html", but I want to retrieve data from another site "http://localhost:27746/Orders.aspx". In order to do this, I have implemented the following code in my CustomOrdering.html: function ...
I am currently working with MUI and I have a need to modify certain properties that are prefixed with random IDs. How can I target, for instance, the first one using: '& endsWith(MuiAccordionDetails-root)' I wish to achieve this because the ...
I have created a custom post using functions.php, which is working fine in the admin panel. Now, I want to manually create a custom post from another PHP file using AJAX. Here is the code snippet from functions.php: add_action('save_post', &apos ...
My Bootstrap table has the class "table-responsive," which automatically sets overflow-x to auto when the table is too wide for the screen. In addition, I've applied the class "sticky-top" to the th elements in order to make them sticky within the ta ...
As a newcomer to PHP, I have successfully learned how to upload a file from a list using the following code: var file = e.target.files[0]; alert(file); This code returns an [object File], indicating that the file has been uploaded. Now, my question is: ...
.selector select[multiple="multiple"] { border-radius: 0; height: 200px; margin: 0 0 0 -1px; max-width: 368px !important; padding-left: 3px; width: 368px !important; } <select id="id_included_packages_from" class="filtered" multiple="multipl ...
I am facing an issue with my web page that consists solely of HTML, CSS, full JavaScript with jQuery, and some jQuery UI effects. The problem arises when certain animations are applied to specific areas of the page, causing it to hang on Chrome 13 and Expl ...
My dilemma involves a dropdown menu and a list of elements that are initially set to hidden using CSS. When an item is selected from the dropdown, it becomes visible. However, I am struggling with finding a way to revert the previously selected element b ...
Encountered an issue with cloning rows using bootstrap-datepicker and bootstrap. To reproduce the problem: 1. Select a date in the first input field (id_form-0-expense_date_item). 2. Add another row and select a date in the second input field, which shoul ...
I am facing an issue with my dynamically updating form. When I submit the form, I want to post the data to a views function and receive a response. Below is the code from my template file: $("#myForm").submit(function(){ event.preventDefault(); va ...
When loading content using AJAX and ASP.NET web-methods, the following code is used to trigger the Ajax request: var pageIndex = 1; var pageCount; $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) ...
I am curious to find out how I can dynamically change the color of the last character of each word within a <p> tag using a Javascript loop. For example, I would like to alter the color of the "n" in "John", the "s" in "Jacques", the "r" in "Peter" ...
While working on a responsive website, I encountered some challenges. I have a Div containing an image and some information. When a user hovers over this div, the background changes and 3 buttons appear. However, the issue arises when using a mobile devi ...
I have a flexbox div nested inside another div, and I'm trying to adjust the height of the outer box based on the content of the inner flexbox. Here is the link to the current fiddle. The issue I am facing is that the text in the second box overflows ...