Is there a way to have the headline gently fade in and subtly rise when the page loads using CSS?

Is it possible to make the headline fade in and move up slightly on the home page using CSS after the user lands on the website? For a visual reference, check out this example on . I know it can be achieved with translateY, but I have never tried it before.

HTML

<div class="homepage">
<div class="headline">
<h1><span>WELCOME</span></h1>
</div>
<div class="subheadline">
<h1><span>To the home of</span></h1></div><div class="subheadline"><h1><span>Multimedia Journalist</span></h1></div>
<div class="subheadline"><h1><span>Dan Morris</span></h1></div>
<a href="#contact" class="smoothScroll" id="contactlink">Let's talk</a>
<div class="down-link"><a class="w-downlink" href="#about"><i class="fa fa-chevron-down"></i></a></div>
</div>

CSS

.homepage {
height: 650px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/25H.jpg);
background-attachment: fixed;
float: left;
}

.headline {
height: auto;
width: 75%;
margin-left: 78px;
margin-top: 120px;
margin-right: auto;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 12px;
font-weight: 200;
color: #676767;
text-align: left;
}
javascriptjqueryhtmlcss

Answer №1

The simplest method is to utilize a CSS animation:

http://jsfiddle.net/xdbpwoLa/

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.headline {
    -webkit-animation: fadeIn .25s ease-in .5s both;
    animation: fadeIn .25s ease-in .5s both;
}

Answer №2

@keyframes fadeInEffect {
    from {opacity: 0.2;}
    to {opacity: 1;}
}
.headline{
    animation-name: fadeInEffect;
    animation-duration: 2s;
}

Explanation of the Animation:

As soon as the headline loads, a fade-in effect is applied which transitions it from 20% to 100% opacity. The animation is named fadeInEffect and is specifically assigned to the element with the class .headline.

To test this animation, you can click on this JSfiddle link.

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

The getTotalLength() method in SVG may not provide an accurate size measurement when dealing with non-scaling-stroke. To obtain the correct scale of

In my current project, I am utilizing JavaScript to determine the length of a path and apply half of that length to the stroke-DashArray. However, I have encountered an issue as I am using vector-effect="non-scaling-stroke" in order to maintain a consisten ...

javascriptcsssvgresponsive

jQuery Popup Button - Maintain the Current Design

I'm currently working with a jQuery dialog and trying to make one of the buttons appear and function as a default button, while still keeping focus on form elements. I managed to achieve this using the code below. However, I encountered an issue where ...

jquerybuttondialogdefault

What is the best way to trigger a function following a user's selection from a form-control on a webpage?

I am looking for a way to automatically execute a function when a year is selected without needing a button. I am using HTML, JavaScript, and bootstrap 5. Any suggestions on how to achieve this? Thank you. function onSelect() { console.log('Hel ...

javascripthtmlwebbootstrap-4bootstrap-5

In JavaScript, filter out an array of image links that end with .jpg, .jpeg, .png, or

Need assistance, could someone lend a hand? I've got an array of image URLs and I'm attempting to filter out only the links with supported images using regex or endsWith(). It's been a struggle all morning. Appreciate any help offered! ...

javascriptnode.jsregex

Incorporate vanilla JavaScript and HTML into a Next.js application

I am facing an issue where I have a file that contains JavaScript and HTML code, which needs to be rendered within a Next.js application. The challenge is that the code in the file cannot be converted to JSX, and React Helmet does not seem to render anythi ...

javascripthtmlreactjsnext.jsreact-helmet

The preventDefault() method in jQuery AJAX is failing to work when trying to submit a form

I've been attempting to use jQuery Ajax in PHP Codeigniter to submit a form, but I can't seem to get it working. Can anyone point out where I might have made a mistake? Below is the HTML Markup that I am using. <form action="" method="post" ...

phpjqueryajaxcodeigniter

Stop the submission process by deactivating the button until a selection is made

Is there a way to prevent the submit button from being clicked until the user has selected or typed at least one value? <form name="forma" method="POST" action="used-results.php" id="apliforma"> many textboxes and dropdown menus <a oncli ...

javascriptjquery

Is JQuery the ultimate solution for creating a dynamic multi-language website?

Embarking on a new project that requires support for multiple languages. My plan is to create a jQuery/AJAX based application with all the code in jQuery, simply calling JSONs for data. What would be the most effective approach for implementing multi-lan ...

javascriptjqueryajaxjsoninternationalization

Customize the appearance of tables in your WordPress theme

I'm currently working on a website using the Wordpress Twenty Ten theme and I've run into an issue with inserting html tables. The theme seems to be overriding my styling, resulting in very unattractive tables. I've attempted to fix this pro ...

htmlcsswordpresswordpress-theming

Generate text in reStructuredText with columns

I'm attempting to style a reStructuredText segment in the following layout: type1 : this type4 : this type7 : this type2 : this type5 : this type8 : this type3 : this type6 : this type9 : this I want to fill the page with tex ...

cssrestructuredtext

What is the difference between class at DOM and className at component?

When passing the className props to the child component, sometimes the className for the active link is not correctly reflected in the DOM element during production: The child component (Link) receives the className prop for the active link from the paren ...

cssnext.js

Error message "Jquery smooth scrolling issue: Unable to retrieve property 'top' as it is not defined"

I'm currently working on a script for a back to top button that will be placed in the footer of my website. However, I'm running into an issue where I'm getting an error message saying "Cannot read property 'top' of undefined". Any ...

javascriptjqueryhtmlscrolljquery-animate

Firefox is unable to render the jQuery file from ajax.googleapis.com

I have Mozilla Firefox version 20.0.1 installed, and I am using the following code on my website: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!--<script s ...

javascriptjqueryhtmlajaxfirefox

How can I efficiently utilize HTML/CSS/JS to float items and create a grid that accommodates expandable items while minimizing wasted space?

After meticulously configuring a basic grid of divs using float, I've encountered an issue. When expanding an item in the right-hand column, the layout shifts awkwardly. My goal is to have boxes A and B seamlessly move up to fill the empty space, whi ...

javascripthtmlcssuser-interfacecss-float

When using HTML and PHP, do note that the function mysql_fetch_array() requires the first parameter to be a resource and

I'm currently working on developing a feature for our website that allows users to search for banned usernames on our servers. The idea is to create a simple form where users can enter the username they want to check and then display any matching resu ...

phphtmldatabasesearchtextbox

Center an image and superimpose text in the middle of the webpage

I am attempting to center an image with text overlay in the middle of a page. Although the image is centered correctly, the overlay text remains off-center. Below is the code snippet. The text should be positioned in the top left corner of the image. &l ...

htmlcss

Passing array map data to another screen in React Native

Greetings! I successfully created an array map to showcase specific data from my API. Now, I am faced with the challenge of TRANSFERRING THIS DATA TO ANOTHER SCREEN. My current dilemma lies in the fact that the displayed data is generated using ARRAY MAP, ...

javascriptandroidreactjsreact-nativemobile

Explore Python and Selenium for implementing pagination with JavaScript functionality

Having recently started using Selenium with Python 2.7, I am looking to click on certain JavaScript elements used for pagination on a website. To provide context, here is the link to the page: . Any guidance or example code would be greatly appreciated. ...

javascriptpython-2.7seleniumweb-scraping

Deactivate the signup button automatically when the user is not present, without the need to refresh

To determine user availability, the system will check the table of users. If the user is available, the signup button will be displayed; otherwise, the button will remain disabled or its color may change. ...

javascripthtmlajax

Having trouble displaying the selection menu when using Angular Strap?

//test.js const dropdownMenu = document.querySelector('.dropdown-menu'); dropdownMenu.addEventListener('click', (event) => { alert(`You clicked on ${event.target.textContent}`); }); // index.html <div class="dropdown"> ...

javascriptangularjstwitter-bootstrapangularjs-directiveangular-strap