Instructions for making text stand out on a background image and allowing it to move across the image

I'm looking to create a unique effect where a background image only shows through knockout text and then have that text animate from the top of the page to the bottom, revealing different parts of the background image as it moves.

Although I know how to create knockout text:

#screen1 h1 {
    display:block;
    margin: auto;
    font-family: 'proxima-nova', sans-serif;
    background-image: url('../img/my-image.jpg');
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 12rem;
    font-weight: 800;
}

What I really want is to have a background image on #screen1 that only shows through the knockout text. When you animate the text, different parts of the background image should be revealed.

Here's the HTML code:

<div id="screen1" >
<div style="">
<h1>MY TEXT</h1>
</div>  
</div>

And the accompanying CSS code:

#screen1 {
    background: url(../img/my-image.jpg) no-repeat; 
    background-size: cover;
    overflow: hidden;
}
#screen1 h1 {
    display:block;
    margin: auto;
    font-family: 'proxima-nova', sans-serif;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 12rem;
    font-weight: 800;
}

However, this code currently just displays the background image without the desired effect. But I can sense that I am getting close.

htmlcssbackground-image

Answer №1

I am interested in creating a unique design where a background image only shows through knockout text and then animates from the top to the bottom of the page, revealing different parts of the background image as the text moves.

To achieve this effect, you can animate the text while unveiling the background image:

body {
 margin: 0;
 background-color: lightblue;
 overflow: hidden;
}

h1 {
  display: flex;
  justify-content: center;
  height: 100vh;
  margin: auto;
  font-family: 'proxima-nova', sans-serif;
  background: url('https://placekitten.com/g/200/300') no-repeat;
  background-size: cover;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 800;
  padding-top: 0;
  animation: animate 5s linear infinite;
}

@keyframes animate {
  to {
    padding-top: calc(100vh - 6rem);
  }
}
<h1>Text</h1>

A similar effect can be achieved by applying the same technique to the markup with identifiers #screen1 and nested h1, inheriting the background to the h1 element and utilizing the clip background effect. See the demo below:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

#screen1 {
  background: url('https://placekitten.com/g/200/300') no-repeat, lightblue;
  background-size: 0; /* don't show the background yet */
  height: 100vh;
  overflow: hidden;
}

#screen1>div {
  background: inherit;
  /* background size is still zero */
  height: 100%;
}

#screen1 h1 {
  display: flex;
  justify-content: center;
  margin: 0;
  background: inherit;
  /* now show the background */
  background-size: cover;
  font-family: 'proxima-nova', sans-serif;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 800;
  padding-top: 0;
  animation: animate 5s linear infinite;
  height: 100%;
}

@keyframes animate {
  to {
    padding-top: calc(100vh - 5rem);
  }
}
<div id="screen1">
  <div>
    <h1>MY TEXT</h1>
  </div>
</div>

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

Display a video modal upon page load, allowing users the option to click a button to reopen the modal

Looking for a way to make a video modal automatically open on page load and allow users to reopen it by clicking a button? Here's a snippet of code that might help you achieve that: HTML <html> <head> <link rel="stylesheet ...

javascripthtmlcssbootstrap-4bootstrap-modal

To open a popup menu with a text box, simply click on the text box

Whenever the text box text is clicked, a popup menu should open with a text box. Similarly, when the filter icon in the right side corner is clicked, a menu should open with a list of checkboxes. However, currently both menus are opening when clicking on b ...

javascripthtmlreactjsreduxmaterial-ui

Insert HTML code at the top of a WordPress page

Currently, I am in search of a solution for the following issue: I want to include a black bar at the top of every page using a plugin (similar to the WordPress admin bar that appears when you are logged in at wp-admin). Initially, I considered adding th ...

phphtmlwordpressheader

Executing the SQL query more than once is not permitted

I seem to be facing a challenge in executing SQL queries multiple times. In the given code snippet, the first SQL query 【SELECT h.title, h.place, h.introduction ~】works fine. However, the second one 【SELECT name ~】fails to execute. If I comment ...

phphtmlcss

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

I'm trying to find a way to add a class to an unordered list and alternate that class after every third item. Here's the code I have so far: <?php $i=1; foreach($this->items as $item) : ?> <li class="<?php if ($i % 3 == 0) : ...

phpcssaddclass

Achieving Perfect Vertical Alignment in Bootstrap 4 Grid Cells

I am currently working on an admin page that involves querying and reporting on the page weights of key pages on a website, such as landing pages. Bootstrap 4 is in the pipeline, and I have utilized it to design a layout that I am satisfied with. However, ...

htmlcsstwitter-bootstrap-4

What steps can I take to display lines in a textarea so that it closely resembles the appearance of a notepad document

Is there a way to display lines in a text-area to give it the appearance of a notepad? I only have one text-area available. See the example notepad below for reference. ...

javascriptjqueryhtmlcss

The basic CSS container fails to properly align its elements as intended

Recently, I created a CSS div using Bootstrap and added some custom styling. You can check out the fiddle for a live demo of the code: https://jsfiddle.net/w9gyc0t5/. Here's the actual code: <!-- Bootstrap docs: https://getbootstrap.com/docs -- ...

htmlcss

What is the best method for utilizing the jQuery Selector in this particular web application?

I have been attempting to figure out how to select a delete icon within my personal web application. delectIcon HTML <main> <div class="container"> <div class="tabs"> <a href=""><p><span class="act ...

javascriptjqueryhtmlcss

What is the best way to manage photos from your phone without having to upload them online?

I'm currently developing an application using AngularJS/Javascript, HTML, and CSS within a cloud-based environment on c9.io. My next task is to create and test an app that can access the phone's photo album, apply filters to images, and I'm ...

javascripthtmlcssangularjsimage-processing

Creating a custom script for a search field that retrieves information from an XML document

Attempting to create a script that iterates through an XML file, the provided code currently displays alerts but fails to show information when a valid value is entered into the search field. However, upon removing the error checks and keeping the final ...

javascripthtml

Volkswagen elements spilling over

Why are two divs overlapping each other? I have divided the two divs equally with viewport width. When I set the width to 49% instead of 50%, the code works fine. Why is that? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcss

The Java.lang.finalize heap became too large during the Hadoop URL parsing task

I'm currently working on analyzing the content of various homepage URLs by utilizing a Hadoop mapper without a reducer. This mapper fetches the URLs and sends them to a parser class for further analysis. The parser leverages Jericho's html parse ...

javahtmlhadoopgarbage-collection

What are the steps to shift columns to the left within a table?

I need to adjust the alignment of the columns and also create a fixed size space between them. Currently, it appears like this: https://i.sstatic.net/F7Rqk.png My desired outcome is something similar to: https://i.sstatic.net/ALKa9.png CSS Code: .tabl ...

htmlcss

Accurately replicate the Logout functionality of asp:Login within the siteMap

How can you effectively integrate/simulate the Logout feature in asp:Login for a siteMapNode? <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> <%--[ <a href ...

c#htmlasp.netsitemaplogout

Can the :after pseudo-element be modified when hovering, except when hovering over the after element itself?

Currently, my CSS code looks like this: class-name:hover:after {} Although it works well, the hover effect triggers even when hovering over the after portion of the element. Is there a way to modify the code so that the :hover only applies when hovering ...

csshover

Move from right to left on the slide?

Is there a way to toggle a div's visibility between collapsed and expanded, transitioning smoothly from right to left? I've noticed that most examples I come across demonstrate the transition from left to right. ...

jqueryhtmlcssjquery-uiposition

Understanding the reasoning behind the back button

I am currently working on a project that requires implementing a back button functionality. Unfortunately, I am facing some challenges with it. While I have successfully created a back button that works, the issue arises when the user wants to edit the pre ...

javascriptphpjqueryhtml

What's the ideal file structure for Codeigniter paired with Angularjs?

Recently, I embarked on a project using Codeigniter and AngularJS for an app. However, I encountered some issues when attempting to use font-awesome offline. After investigating the problem, I concluded that it may be related to the file folder structure ...

phpcssangularjscodeigniterfonts

To view the contents of the dropdown list on an iPhone, simply tap the arrow key next to the mobile dropdown list and the contents will be

I am attempting to trigger the dropdown list contents to open/show by tapping on the arrow keys near AutoFill on the iPhone mobile keyboard. This action should mimic clicking on the dropdown itself. Currently, I am working on implementing this feature for ...

javascriptjqueryhtmliosiphone