How to animate a text cutout over a background-image - javascript

I'm trying to imitate the animation shown below using CSS and/or JavaScript. I have created the beginning step but cannot figure out how to animate the zooming in part.
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-->
And my TARGET:

A posibility, using 2 elements, one for the image and another for the text, and blend mode to achieve transparency:
Note that blend mode is not supported by IE or 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>

I came up with a solution based on your original code using -webkit-text-fill-color and -webkit-background-clip-text and added font-size and a negative text-indent for the animation. The negative text-indent is needed to keep the text "centered" within the element because text within elements always wants to bump up against the left edge.
* {
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>
Basically, I'm adjusting the text-indent so that as the font-size increases the middle "T" stays centered (it's really not in the center though) and then the text becomes so big (10,000 pixels!) that the "T" does the "reveal" effect by filling the space.

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>

Related

How do I mirror a card or the word in css

I need help with this CSS, when I hover to see the details of the movie it flip but the whole word in it flip too.
Is there a way that I can make the word flip first and then when I hover the word becomes normal?
This is the HTML code, it was written in JS file and the CSS code.
body {
background-color: var(--primary-color);
font-family: 'Poppins', sans-serif;
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.overview {
background-color: white;
padding: 2rem;
position: absolute;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
transform: translateY(101%);
}
.movie:hover .overview {
transform: rotateY(180deg);
transition: transform 0.3s ease-in;
overflow-y: auto;
}
<img href = "#" src =https://i.pinimg.com/originals/a4/7b/a5/a47ba59b4a353e0928ef0551ca44f980.jpg>
<div class="movie-info">
<h3>Title</h3>
</div>
<div class="overview">
<h3>Overview</h3>
lorem ipsuim
<br/>
</div>
.card {
position: reletive;
height: 400px;
width: 250px;
font-size: 32px;
text-align: center;
}
.card__side--back {
height: 400px;
width: 250px;
/* background-color: orange; */
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
background-color: orange;
transform: rotateY(180deg);
}
.card__side--front {
height: 400px;
width: 250px;
/* background-color: orange; */
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
background-color: teal;
}
.card:hover .card__side--front {
transform: rotateY(-180deg);
}
.card:hover .card__side--back {
transform: rotateY(0);
}
<div class="card">
<div class="card__side">
<div class="card__side--front">This is the front </div>
<div class="card__side--back"> This is the back</div>
</div>
</div>
From my understanding this is what you were trying do achieve. The key here is backface-visibility and hovering on the container that contains both cards, because when hidden it cant be hovered over.

keeping div in the same position along with window resize

This content moves along with the window resize and I'm trying to make it stay in place. Is there any way to stop the content from moving or should I move the section along with window resize so that it appears in the same position?
Pictures of the content in [#media only screen and (min-width: 992px) and (max-width: 1199px)]
width: 1198 px
width: 992 px
The partial code
#hero {
height: 100%;
position: relative;
float: left;
padding: 18% 10% 35% 6%;
margin: 0 5% 0% 5%;
width: 90%;
}
.IntroText {
margin-left: auto;
margin-right: auto;
color:black;
padding-bottom: 1.5%;
font-size: 20px;
transform: translateX(-20px);
transition: transform 1s, opacity 1s;
transition-delay: 0.5s;
}
.MyName {
color:#fad25a;
}
.knowMore {
left: 0.4%;
font-weight: bold;
font-size: 20px;
transform: translateX(-20px);
transition: transform 1s, opacity 1s;
transition-delay: 1s;
}
button, .talkButton {
color: #d4af37;
padding: 5px 25px;
border: 2px solid #d4af37;
position: relative;
margin: auto;
z-index: 1;
overflow: hidden;
transition: 0.3s;
}
button:after, .talkButton:after {
content: '';
background-color: #252526;
position: absolute;
z-index: -2;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
button:before, .talkButton:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d4af37;
transition: 0.3s;
z-index: -1;
}
button:hover, .talkButton:hover {
cursor: pointer;
color: #252526;
}
button:hover:before, .talkButton:hover:before {
width: 100%;
}
button:focus, .talkButton:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero" class="jumbotron">
<div class="container">
<h1 class="IntroText animated">
Lorem Ipsum dolor <span class="MyName">sit amet</span> and<br> consecteuer
</h1>
<button type="button" id="knowbutton" class="knowMore animated" onclick="toAbout()">Know more</button>
</div>
</section>
In the CSS file, in the #hero rule set you have given padding and margins in percentages. It means whenever the screen changes then the padding and margin apply according to that screen(in percentages).
try by fixing padding and margins in the #hero rule set
You could do a position: fixed
#hero {
height: 100%;
position: fixed;
top: 100px;
left: 50px;
padding: 18% 10% 35% 6%;
margin: 0 5% 0% 5%;
width: 90%;
}
Now it is always going to stay in the same position(100px from the top, 50px from the left), even if you scroll.

Html Transistion lag only for the first time after reload

This is a gif of issue : https://gifyu.com/image/DeGX
And my code: https://jsfiddle.net/Mrsheesh/dj1L3vhq/7
i am using xampp to host this page in locale
and even jsfiddle seems laggy.
I tried to remove the image, and it worked fine.
Is there a way to fix this, without remove the image?
My code:
console.log("msg.js Loaded");
function show_msg() {
document.querySelector(".box-msg").classList.add("active");
document.querySelector(".bg-msg").classList.add("active");
}
function hide_msg() {
document.querySelector(".box-msg").classList.remove("active");
document.querySelector(".bg-msg").classList.remove("active");
}
body {
margin: 0;
}
.bg-msg {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgb(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s ease;
}
.bg-msg.active {
visibility: visible;
opacity: 1;
}
.box-msg {
visibility: hidden;
position: fixed;
left: 50%;
top: 10%;
transform: translateX(-50%);
height: 0;
width: 0;
max-width: 550px;
border-radius: 20px;
background-color: white;
border: 1px solid rgb(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.box-msg.active {
visibility: visible;
opacity: 1;
height: 400px;
width: 50%;
}
.box-msg .box-head {
height: 20%;
width: 100%;
/* background-color: blue; */
}
/* ==================================Close Button================================= */
.box-msg .box-head .close {
position: absolute;
top: 5px;
left: 5px;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
}
.box-msg .box-head .close::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\D7";
/* use the hex value here... */
font-size: 30px;
color: #FFF;
line-height: 20px;
text-align: center;
}
/* ==================================Head IMG================================= */
.box-msg .box-head .background {
position: absolute;
width: 100%;
height: 20%;
overflow: hidden;
}
.background img {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 300%;
/* animation: 10s left_right forwards; */
}
#keyframes left_right {
from {
left: 0;
}
to {
left: 100%;
}
}
/* ==================================Head Title================================= */
.box-msg .box-head .title {
position: relative;
height: 100%;
margin-left: 25px;
margin-right: 25px;
color: white;
font-size: clamp(10px, 4vw, 35px);
/* line-height: 80px;
text-align: center; */
display: flex;
justify-content: center;
align-items: center;
font-family: BebasNeue-Regular;
letter-spacing: 0.1em;
}
/* ====================================MSG Body================================= */
.box-msg .box-body {
height: 80%;
width: 100%;
/* background-color: brown; */
}
/* ======================================BTN===================================== */
.btn {
cursor: pointer;
width: 100px;
height: 50px;
background: coral;
text-align: center;
line-height: 50px;
}
<div class="btn" onclick="show_msg()">Test</div>
<div class="bg-msg"></div>
<div class="box-msg">
<div class="box-head">
<div class="background">
<img src="./img/background/bg2.jpg" alt="">
</div>
<div class="close" onclick="hide_msg()">Close</div>
<div class="title">Title</div>
</div>
<div class="box-body">
<div class="body-text">Body Text</div>
</div>
</div>

Background image zoom on hover without change text size

I want to zoom background image on a hover but without change text size. How can I make this?
* { margin: 0; padding: 0; }
body {
}
.article-container {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.article-img-holder {
width: 100%;
height: 100%;
background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.article-img-holder:hover {
transform: scale(1.2);
}
.split-image-links {
width: 100%;
height: 100vh;
display: flex;
}
.split-image-links .split-image-link {
width: 25%;
height: 100%;
overflow: hidden;
position: relative;
}
.split-image-links .split-image-link .zoom-image {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
.split-image-links .split-image-link .zoom-image .split-image-header {
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
color: #fff;
}
.split-image-links .split-image-link .zoom-image .zoom-image-headline {
color: #fff;
text-align: center;
line-height: 100vh;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 45px;
font-weight: 600;
}
.split-image-links .split-image-link .zoom-image.zoom-image-first {
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s;
}
.split-image-links .split-image-link .zoom-image:hover {
transform: scale(1.1);
}
<body>
<div class="split-image-links">
<div class="split-image-link">
<div class="zoom-image zoom-image-first">
<h1 class="zoom-image-headline">who</h1>
</div>
</div>
</div>
</body>
Instead of using scale() for the entire element, work with the background-size property, that way font-size will remain untouched, lemme know if it works for you or not.
.bg {
width: 400px;
height: 240px;
margin: 30px auto;
background: url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1) no-repeat center center;
background-size: 100%; /* work with the background-size */
transition: background-size 1s ease-in-out;
position: relative;
z-index: 1;
}
.bg:hover {
background-size: 120% /* work with the background-size */
}
.bg::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
top: 0;
left: 0;
z-index: -1;
}
.bg h2 {
text-align: center;
font-size: 60px;
line-height: 230px;
font-family: sans-serif;
color: #fff;
}
<div class="bg">
<h2>WHO</h2>
</div>
Thats the expected behavior of scale, it scale every children too, to change just the bg maybe you should use other approaches.
I provide one, I hope it fit in your need.
On this approach the BG is an absolute element, isnt the container of the h1 and the hover now is on split-image-link instead of zoom-image.
* { margin: 0; padding: 0; }
body {
}
.article-container {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.article-img-holder {
width: 100%;
height: 100%;
background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.article-img-holder:hover {
transform: scale(1.2);
}
.split-image-links {
width: 100%;
height: 100vh;
display: flex;
}
.split-image-links .split-image-link {
width: 25%;
height: 100%;
overflow: hidden;
position: relative;
}
.split-image-links .split-image-link .zoom-image {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
.split-image-links .split-image-link .zoom-image .split-image-header {
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
color: #fff;
}
.split-image-links .split-image-link .zoom-image-headline {
position: relative;
color: #fff;
text-align: center;
line-height: 100vh;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 45px;
font-weight: 600;
}
.split-image-links .split-image-link .zoom-image.zoom-image-first {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s;
}
.split-image-links .split-image-link:hover .zoom-image {
transform: scale(1.1);
}
<body>
<div class="split-image-links">
<div class="split-image-link">
<div class="zoom-image zoom-image-first"></div>
<h1 class="zoom-image-headline">who</h1>
</div>
</div>
</body>
Here is the basic version of your need.
.content {
position: relative;
/* border: 1px solid red; */
display: inline-block;
}
h1 {
color: #FFF;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
.bg:hover, h1:hover + .bg {
transform: scale(1.1);
transition: all 1s;
}
<div class="content">
<h1>WHO</h1>
<img class="bg" src="https://awik.io/demo/background-image-zoom/traffic2.jpg" alt="background image">
</div>

Locking the body scroll, but some div in body is possible to scroll

In the mobile device,
when the user touches the (.menu-btn), (.menu) is shown and the (body) is locked to scroll.
But the problem is (.menu) was also looked too.
How can I make (.menu) is possible to scroll even though the (body) is looked to scroll?
https://jsfiddle.net/n17qw8sb/
I know there is body-scroll-lock. : https://github.com/willmcpo/body-scroll-lock
Unfortunately, I'm not allowed to use webpack for this one :(
<body>
<header>
<h2> Top area </h2>
<div class="menu-btn">
</div>
<div class="menu">
<h2> Hamburger menu area </h2>
</div>
</header>
<section class="contents">
<h2> Contents area </h2>
</section>
</body>
$('.menu-btn').on('click', function() {
$('.menu').toggleClass('active');
$('body').toggleClass('lock-scroll');
$('html').toggleClass('lock-scroll');
})
body {
width: 100%;
background-color: lavender;
}
body.lock-scroll {
overflow: hidden;
}
html.lock-scroll {
overflow: hidden;
}
header {
width: 100%;
height: 3em;
position: fixed;
top: 0;
background-color: beige;
z-index: 100;
}
.menu-btn {
width: 1em;
height: 1em;
background-color: lightseagreen;
position: fixed;
z-index: 300;
top: 1em;
right: 1em;
}
.menu {
width: 100%;
height: 130vh;
position: fixed;
top: 0;
z-index: 200;
padding-top: 40%;
background-color: rgba(255,255,255, .5);
transform: translateX(100%);
transition: all .5s ease;
}
.menu.active {
transform: translateX(0%);
}
.contents {
width: 100%;
padding-top: 50%;
height: 150vh;
background-color: lightblue;
}
h2 {
text-align: center;
}
add a .menu-content element and place the content of .menu element inside that.
And also add this style to end of your style
.menu {
height: 100%;
overflow: scroll;
}
.menu-content {
height: 130vh;
}
https://jsfiddle.net/dm8zrabx/
$('.menu-btn').on('click', function() {
$('.menu').toggleClass('active');
$('body').toggleClass('lock-scroll');
$('html').toggleClass('lock-scroll');
})
body {
width: 100%;
background-color: lavender;
}
body.lock-scroll {
overflow: hidden;
}
html.lock-scroll {
overflow: hidden;
}
header {
width: 100%;
height: 3em;
position: fixed;
top: 0;
background-color: beige;
z-index: 100;
}
.menu-btn {
width: 1em;
height: 1em;
background-color: lightseagreen;
position: fixed;
z-index: 300;
top: 1em;
right: 1em;
}
.menu {
width: 100%;
height: 130vh;
position: fixed;
top: 0;
z-index: 200;
padding-top: 40%;
background-color: rgba(255,255,255, .5);
transform: translateX(100%);
transition: all .5s ease;
}
.menu.active {
transform: translateX(0%);
}
.contents {
width: 100%;
padding-top: 50%;
height: 150vh;
background-color: lightblue;
}
h2 {
text-align: center;
}
/* newly added style */
.menu {
height: 100%;
overflow: scroll;
}
.menu-content {
height: 130vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<h2> Top area </h2>
<div class="menu-btn">
</div>
<div class="menu">
<div class="menu-content">
<h2> Hamburger menu area </h2>
</div>
</div>
</header>
<section class="contents">
<h2> Contents area </h2>
</section>
</body>
Note: See the result in full-page view

Categories