Làm cách nào để tạo hiệu ứng cho văn bản bỏ qua hình nền

Question

Tôi đang cố gắng bắt chước hoạt ảnh được hiển thị bên dưới bằng cách sử dụng CSS và/hoặc JavaScript. Tôi đã tạo bước bắt đầu nhưng không thể tìm ra cách tạo hiệu ứng thu phóng một phần.

body { 
 
     background-color: #222; 
 
    } 
 
    .container { 
 
     background-image: url(test.jpg); 
 
     height: 96vh; 
 
     width: 100%; 
 
    } 
 
    .box { 
 
     background-color: #fff; 
 
     height: 98vh; 
 
     width: 100%; 
 
    } 
 
    .big { 
 
     font-size: 17vw; 
 
     background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg) 33px 659px; 
 
     -webkit-text-fill-color: transparent; 
 
     -webkit-background-clip: text; 
 
     padding-top: 24vh; 
 
     margin-top: 0; 
 
     text-align: center; 
 
     animation: opac 2s infinite; 
 
    } 
 
@keyframes opac { 
 
    0%, 100% { 
 
    /*rest the move*/ 
 

 
    } 
 
    50% { 
 
    /*move some distance in y position*/ 
 
    } 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    <h1 class="big">TRY THIS</h1> 
 
    </div> 
 
    <!--end of box--> 
 
</div> 
 
<!--end of conatiner-->

Và mục tiêu của tôi:

Answer 1

tôi đã đưa ra một giải pháp dựa trên mã ban đầu của bạn sử dụng -webkit-text-fill-color và -webkit-background-clip-text và thêm font-size và tiêu cực text-indent cho các hình ảnh động. Phủ định text-indent là cần thiết để giữ cho văn bản "được căn giữa" trong phần tử bởi vì văn bản bên trong các phần tử luôn muốn chạm vào cạnh trái.

* { 
 
    box-sizing: border-box; 
 
    } 
 

 
    html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 

 
    #container { 
 
    height: 160px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    width: 600px; 
 
    } 
 

 
    #image { 
 
    animation: scale 3000ms linear infinite; 
 
    background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg); 
 
    bottom: 0; 
 
    font: 96px "Arial"; 
 
    font-weight: bold; 
 
    left: 0; 
 
    line-height: 160px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: center; 
 
    top: 0; 
 
    text-transform: uppercase; 
 
    white-space: nowrap; 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-background-clip: text; 
 
    } 
 

 
    @keyframes scale { 
 
    0% { 
 
     font-size: 66px; 
 
     text-indent: 0; 
 
    } 
 
    16% { 
 
     font-size: 132px; 
 
     text-indent: 0; 
 
    } 
 
    80% { 
 
     font-size: 330px; 
 
     text-indent: -500px; 
 
    } 
 
    100% { 
 
     font-size: 10000px; 
 
     text-indent: -25300px; 
 
    } 
 
    }

<div id="container"> 
 
    <div id="image">try this</div> 
 
</div>

Về cơ bản, tôi đang điều chỉnh text-indent để như font-size tăng giữa "T" sẽ ở trung tâm (nó thực sự không phải ở trung tâm mặc dù) và sau đó là văn bản trở nên quá lớn (10.000 pixel!) mà chữ "T" có tác dụng "tiết lộ" bằng cách lấp đầy khoảng trống.

Answer 2

Một posibility, sử dụng 2 yếu tố, một cho hình ảnh và một cho các văn bản, và chế độ hòa trộn để đạt được tính minh bạch:

Lưu ý rằng chế độ hòa trộn không được hỗ trợ bởi IE hoặc Edge

body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.container { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(http://placekitten.com/1000/600); 
 
    background-size: cover; 
 
} 
 
.box { 
 
    position: absolute; 
 
    width: 80%; 
 
    height: 80%; 
 
    left: 10%; 
 
    top: 10%; 
 
    background-color: white; 
 
    overflow: hidden; 
 
    mix-blend-mode: lighten; 
 

 
} 
 

 
.big { 
 
    position: absolute; 
 
    left: 20%; 
 
    top: 30%; 
 
    font-size: 10vw; 
 
    color: black; 
 
    animation: zoom 4s infinite; 
 
} 
 
@keyframes zoom { 
 
    from { 
 
    transform: scale(0.2, 0.2); 
 
    } 
 
    to { 
 
    transform: scale(4, 4); 
 
    } 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    <div class="big">TRY THIS</div> 
 
    </div> 
 
</div>

Answer 3

body { 
 
    margin: 0; 
 
} 
 
.image { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: url("https://www.viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg"); 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 
.text-container { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: white; 
 
    mix-blend-mode: lighten; 
 
    animation: 2s scale cubic-bezier(0.88, 0, 1, 0.1) infinite; 
 
} 
 
.text { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%) translateX(-0.3em); 
 
    font: bold 7vw "Arial", sans-serif; 
 
    white-space: nowrap; 
 
} 
 
@keyframes scale { 
 
    from { 
 
    transform: scale(1); 
 
    } 
 
    to { 
 
    transform: scale(500); 
 
    } 
 
}

<div class="image"> 
 
    <div class="text-container"> 
 
    <div class="text">TRY THIS</div> 
 
    </div> 
 
</div>